custom marker icon with react-leaflet
I finally found the correct code for the Icon.js file :
import L from 'leaflet';
const iconPerson = new L.Icon({
iconUrl: require('../img/marker-pin-person.svg'),
iconRetinaUrl: require('../img/marker-pin-person.svg'),
iconAnchor: null,
popupAnchor: null,
shadowUrl: null,
shadowSize: null,
shadowAnchor: null,
iconSize: new L.Point(60, 75),
className: 'leaflet-div-icon'
});
export { iconPerson };
I was brought here while trying to figure out how to render a custom icon server side (using react-leaflet-universal). I thought I'd post this in case anyone in the future finds themselves here for the same reason. Just as in the case of react-leaflet-markercluster, I was able to get this working by requiring leaflet inside the return function like:
<Map center={this.props.center}
zoom={zoom}
className={leafletMapContainerClassName}
scrollWheelZoom={false}
maxZoom={18}
preferCanvas={false}
>
{() => {
const MarkerClusterGroup = require('react-leaflet-markercluster').default;
const L = require('leaflet');
const myIcon = L.icon({
iconUrl: require('../assets/marker.svg'),
iconSize: [64,64],
iconAnchor: [32, 64],
popupAnchor: null,
shadowUrl: null,
shadowSize: null,
shadowAnchor: null
});
return (
<React.Fragment>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution=''
setParams={true}
/>
<MarkerClusterGroup>
{coordArray.map(item => {
return (
<Marker icon={myIcon} key={item.toString()} position={[item.lat, item.lng]}>
{item.title && <Popup>
<span>{item.title}</span>
</Popup>}
</Marker>
)
})}
</MarkerClusterGroup>
</React.Fragment>
);
}}
</Map>
You don't need to use require. instead of giving iconUrl = "../assets/name" you only need to import your png or svg then you can give the source to your iconUrl. look at the example below:
// first import your image or svg
import heart from "../../images/other/love.svg";
// give the source to your icon
let loveIcon = L.icon({
iconUrl: heart,
iconRetinaUrl: heart,
iconAnchor: [5, 55],
popupAnchor: [10, -44],
iconSize: [25, 55],
});
// simply add it to your map
L.marker([28, 50], {
icon: loveIcon,
}).addTo(map);
I was also experiencing the same problem. Here is my working solution:
`import L from 'leaflet';
import marker from '../assets/placer.svg';
const myIcon = new L.Icon({
iconUrl: marker,
iconRetinaUrl: marker,
popupAnchor: [-0, -0],
iconSize: [32,45],
});`