reactjswebpackleafletwebpack-4

marker icon isn't showing in Leaflet

I 've put together a very simple React / Leaflet demo but the marker icon is not showing at all. Full running code is here.

Here's what I have in my componentDidMount method:

componentDidMount() {
this.map = L.map("map-id", {
  center: [37.98, 23.72],
  zoom: 12,
  zoomControl: true
});

const mapboxAccessToken =
  "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q";
L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 25,
    id: "mapbox/streets-v11",
    accessToken: mapboxAccessToken
  }
).addTo(this.map);

L.marker([37.98, 23.72])
  .addTo(this.map)
  .bindPopup("a marker")
  .openPopup();
}

Basically, the popup is visible, but not the marker icon itself. I.e., here's what I see:

enter image description here

Solution

  • Try to add an icon:

    const myIcon = L.icon({
   iconUrl: 'myIcon.png',
   // ...
});

L.marker([37.98, 23.72], {icon: myIcon})
  .addTo(this.map)

    Perhaps you have some problems with the default one: https://leafletjs.com/reference-1.6.0.html#icon-default