React-leaflet: Custom Icons Don't Render

[quesurifn]

Please make sure to check the following boxes before submitting an issue. Thanks!

• [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [X] Using a supported version of React and ReactDOM (v15.x).
• [X] Using the supported version of Leaflet (v1.1.x) and its corresponding CSS file is loaded.
• [X] Using the latest stable version of React-Leaflet.
• [x] The issue has not already been reported.
• [X] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

Icons Render

Actual behavior

Photo

Steps to reproduce

Create react app with latest leaflet.

Try rendering markers.

Example:

import React from 'react'


import { Map, TileLayer, Marker } from 'react-leaflet';

import lorama from './images/marker-icon.png'


export class MapComponent extends React.Component {


    render() {
        const markers = this.props.locations.map((e, index) => (
            <Marker key={index} position={[e.lat, e.lng]} icon={lorama} />
        ));
        console.log(markers)

        const position = [51.0, -0.09]
        return (
            <div className="marginTopXS box MpH fourEighty"> 
                <p className="subtitle">{this.props.title}</p> 
                <Map center={position} zoom={2}>


                    <TileLayer
                        url='http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
                        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
                        subdomains='abcd'
                        maxZoom="19"
                    />

                    {markers}

                </Map>
                <small className="date">As of {this.props.now}</small>
            </div>
        );
    }

}

Please provide the simplest example possible to reproduce the issue, based on this WebpackBin.

[PaulLeCam]

Please refer to Leaflet's doc, Marker expects a Leaflet.Icon to be provided as icon, not a string.

[quesurifn]

@PaulLeCam Can you give an example? I looked at that and couldn't get it to work?

```
const image = {
iconUrl: require('../public/marker-icon.png'),
shadowUrl: require('../public/marker-shadow.png'),
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor
}

    const markers = this.props.locations.map((e, index) => (
        <Marker key={index} position={[e.lat, e.lng]} icon={image} />
    ));

```

[PaulLeCam]

As I wrote in my previous comment, you need to use Leaflet.icon, please refer to the docs.

[evo3cx]

i have a same problem and this my solution, thanks @PaulLeCam for insight

import Leaflet from 'leaflet'

const image = Leaflet.Icon({
               iconUrl: require('../public/marker-icon.png'),
               shadowUrl: require('../public/marker-shadow.png'),
               iconSize:     [38, 95], // size of the icon
               shadowSize:   [50, 64], // size of the shadow
               iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
               shadowAnchor: [4, 62],  // the same for the shadow
               popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor
           })

[joeferraro]

@evo3cx I had to use new Leaflet.Icon

[HsiehYuho]

new Leaflet.Icon
@joeferraro Thank you so much!!