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:

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

Map, Marker icons in Flat style, Iconfinder is the leading search engine and market place for vector icons in SVG, PNG, CSH and AI format. Just for reference, this is due to webpack trying to include the Marker Icon image file specified in Leaflet CSS as a static asset in different folder and possibly file renaming (e.g. for finger printing); all this interferes with Leaflet algorithm which uses that image only as a pointer to its actual CSS images folder, which therefore can be completely missing after webpack build step.

Here's what worked for me in the end (I'm on webpack):

const defaultIcon = new L.icon({
  iconUrl: require('../node_modules/leaflet/dist/images/marker-icon.png'); // your path may vary ...
  iconSize: [8, 8],
  iconAnchor: [2, 2],
  popupAnchor: [0, -2]
});

generateMarkers().forEach( c=> {
   L.marker(c, {icon: defaultIcon}).addTo(this.map).bindPopup('a marker; yeah').openPopup();
}

Simple Marker Icons | Maps JavaScript API, This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap(): void { const map = new google.maps.Map( Markers identify locations on the map. The default marker uses a standard icon, common to the Google Maps look and feel. It's possible to change the icon's color, image or anchor point via the API. Markers are objects of type Marker, and are added to the map with the GoogleMap.addMarker(markerOptions) method. Markers are designed to be interactive.

Just for reference, this is due to webpack trying to include the Marker Icon image file specified in Leaflet CSS as a static asset in different folder and possibly file renaming (e.g. for finger printing); all this interferes with Leaflet algorithm which uses that image only as a pointer to its actual CSS images folder, which therefore can be completely missing after webpack build step.

See details in https://github.com/Leaflet/Leaflet/issues/4968

I specifically made a Leaflet plugin to cover this issue: https://github.com/ghybs/leaflet-defaulticon-compatibility

Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS.

Unfortunately, it would still not work in CodeSandbox (or even in StackBlitz), because the latter does not handle these static assets. It is visible by just trying to use Leaflet Layers Control, which uses a very simple CSS background image, which is also missing in CodeSandbox.

But everything should be fine in your own environment.

demo in CodeSandbox: https://codesandbox.io/s/elegant-swirles-yzsql

and in StackBlitz (same static assets issue): https://stackblitz.com/edit/react-vqgtxd?file=index.js

marker icon isn't showing in Leaflet, 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� What are the Different Legends, Icons, and Points of Interest Explained in Google Maps? When you search for a specific address in Google, you may notice blue, orange, yellow and red markers surrounding the area of the red pin. Many local SEO companies and even business owners struggle to find the answer about these map markers.

Markers With Custom Icons - Leaflet, Note that the white area in the images is actually transparent. Creating an icon. Marker icons in Leaflet are defined by L.Icon objects, which are passed as an� Preparing the images. To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one shadow image for the three:

Marker Icons, This takes a Point object. • anchor. The part of the icon that is pointing at a location in the map. For the default marker it's� A Free Online Tool To Generate Custom Map Icons On The Fly. Just fill in the fields and click on the Generate button to download your marker, or click on the Generate All button to download them all in a row. If an inserted image isn't displayed on your downloaded icon, it's because the server doesn't allow to load that image outside of their

Map marker Icons - 1,457 free vector icons, 1457 map marker icons. Free vector icons in SVG, PSD, PNG, EPS and ICON FONT. Reasons for local vendorized leaflet: * leaflet-rails icon path issue remains open: axyjo/leaflet-rails#81 * The leaflet-rails gem appears unmaintained * Leaflet's icon "path" regex bug breaks image url path: Leaflet/Leaflet#4968 * Overriding L.Icon.Default icon options still runs into the "path" bug * Rails asset pipeline fingerprinting

Comments
  • I'm accepting this answer since it led me to the correct solution in webpack (stackoverflow.com/a/60188233/274677)