Issue with displaying the leaflet map pinpoint using Angular

Question

We are using the leaflet package v 1.7.1 in our angular app.

We are having an issue with when the use selects a point on the map, the pinpoint icon doesn't display, rather it displays the broken image icon.

We have tried including the leaflet images in the assets folder by adding this to our angular.Json file

“Assets”: [

   “src/assets”,
   {
      “glob”: “**/*”,
      “input”: “./node_modules/leaflet/dist/images”,
      “output”: “./assets/“
   }
]

We have a reference to the leaflet css file in our global styles.scss file.

   @import "~leaflet/dist/leaflet.css";

In our component, we are doing the following

const iconRetinaUrl = './assets/marker-icon-2x.png';

const iconUrl = './assets/marker-icon.png';

const shadowUrl = './assets/marker-shadow.png';

const iconDefault = L.icon({

iconRetinaUrl,

iconUrl,

shadowUrl,

iconSize: [25, 41],

iconAnchor: [12, 41],

popupAnchor: [1, -34],

tooltipAnchor: [16, -28],

shadowSize: [41, 41]

});

L.Marker.prototype.options.icon = iconDefault;

Then when the use selects a point we are doing this:

var marker = L.marker([33.89268303132417, 35.50405740737915]).addTo(this.map);

We are not seeing the marker icon, we get a missing image icon. If we inspect the element on the page it shows the source like this:

https://friendlyurl.somedomain.com/marker-icon.2b3e1faf89f94a483539.png")marker-icon.png

Why is angular changing the name of the file and referencing it in this manner?

Answer 1

Why is angular changing the name of the file and referencing it in this manner?

Because Angular build uses webpack with css loaders and asset files finger printing (for browser cache busting).

All this interferes with Leaflet scheme to automatically detect its icon path and reconstruct it.

That being said, your above workaround should have at least changed the URL of the image.

As for a solution, you might be interested in my leaflet-defaulticon-compatibility plugin:

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.

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

See issue Leaflet/Leaflet#4698 if you want the story and details, and other possible solutions.