Reputation: 123
I have my component MAP and I use leaflet (not react-leaflet). I want to set a marker.
This is the code of my component.
import React from 'react';
import L from 'leaflet';
import '../../../../node_modules/leaflet/dist/leaflet.css';
import './map.scss';
export default class Map extends React.Component {
componentDidMount() {
this.map = L.map('map', {
center: [48.8762, 2.357909999999947],
zoom: 14,
zoomControl: true,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',{
detectRetina: true,
maxZoom: 20,
maxNativeZoom: 17,
}),
]
});
L.marker([48.8762, 2.357909999999947],
{
draggable: true, // Make the icon dragable
title: 'Hover Text', // Add a title
opacity: 0.5} // Adjust the opacity
)
.addTo(this.map)
.bindPopup("<b>Paris</b><br>Gare de l'Est")
.openPopup();
L.circle([48.8762, 2.357909999999947], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(this.map);
};
render() {
return <div className="map" id="map" />
}
}
I add the marker us described in the documentation, but the result in the map is not the default icon, it is only a square with a thin border. I checked the css-File from leaflet. The icon is in the images folder, but it is not in the map available.
This icon (marker) I am looking for
Can anybody help or see what is wrong with my code?
Upvotes: 0
Views: 8936
Reputation: 14600
This is a well known css bundle issue with webpack. Define markerIcon as
const markerIcon = L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
// specify the path here
iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
});
and assign it to the icon property of L.marker
like this:
L.marker(
[48.8762, 2.357909999999947],
{
draggable: true, // Make the icon dragable
title: "Hover Text", // Add a title
opacity: 0.5,
icon: markerIcon // here assign the markerIcon var
} // Adjust the opacity
)
.addTo(this.map)
.bindPopup("<b>Paris</b><br>Gare de l'Est")
.openPopup();
Upvotes: 6
Reputation: 2949
As per your question, I can interpret that you are not able to import the CSS properly.
You can import the css for the leaflet module by writing
import 'leaflet/dist/leaflet.css';
For detailed explanation you can read
Do I have to import leaflet's CSS file?
Example of how to load static CSS files from node_modules using webpack?
Upvotes: 0