Leaflet Marker not found production env

Question

I got a problem with leaflet.

Everything is working fine in development, but in production, my app isn't able to locate the marker-icon.png and marker-shadow.png images.

It is looking for the path assets/station/images/marker-icon.png

Leaflet js is including like this in my html.erb file

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />

If someone can help!

Answer 1

This is a known bug in Leaflet, the root issue is that Leaflet's icon image location is been wrongly referenced during bundling.

You can verify that this is your issue, buy validating this parameter (in run time): L.Icon.Default.prototype._getIconUrl().
The correct value should be <some_directory>/leaflet/dist/images/.
However if this bug is happening to you, it's value is: data:image/png;base64,iVBO....K5CYII=")undefined

There are different solutions (work around) depending on which bundle-loader you are using (Vanila WebPack, Angular-Cli - superset of WebPack, etc...).

You can see the original issue here (as well as different solutions depending on your bandle-loader):
https://github.com/Leaflet/Leaflet/issues/4968

If you are using Angular-Cli this solution will work for you. Add this code somewhere before setting the Maker:

import { icon, Marker } from 'leaflet';
const iconRetinaUrl = 'assets/marker-icon-2x.png';
const iconUrl = 'assets/marker-icon.png';
const shadowUrl = 'assets/marker-shadow.png';
const iconDefault = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
Marker.prototype.options.icon = iconDefault;

(this code will change the broken Marker's url, to a valid image from your assets folder).

And add this code at you angular.json (for Angular version >= 6.x) or at your angular-cli.json (for Angular version <= 5.x):

"assets":
[
   "src/favicon.ico",
   "src/assets",
   {
      "glob": "**/*",
      "input": "node_modules/leaflet/dist/images/", // you may need to change this path, according to your files structure
      "output": "./assets/"
   }
] ...

(this code will copy the original Marker images to the /assets folder so angular-cli could load them)

Answer 2

import "leaflet/dist/images/marker-shadow.png";

if using webpack, just import the image