Marker loads png from media instead of own image folder.

fudom commented 1 month ago

Checklist

[X] I've looked at the documentation to make sure the behavior isn't documented and expected.
[X] I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
[X] I've searched through the current issues to make sure this hasn't been reported yet.
[X] I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

Following is tested in Angular.

Install the package.

npm i leaflet

Import in styles.scss

import 'leaflet';

Load map in component.

import * as L from 'leaflet';
// ngAfterViewInit:
const coords = [0, 0];
const map = L.map('map');
map.setView(coords, 20);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.marker(coords).addTo(map);

Run ng serve.

Result:

Marker is shown as broken image link.

GET http://localhost:4200/media/marker-icon-2x.png 404 (Not Found)
GET http://localhost:4200/media/marker-shadow.png 404 (Not Found)

The URLs in the css file are correct. Not sure where the media path comes from. Ok, the marker is an img element. So the css image url is not used. I wonder why img instead.

Expected behavior

The images should be loaded from images/ of the package.

Current behavior

Trying to load the images from the root media/.

Environment

Leaflet version: 1.9.4
Browser: Chrome 122
OS/Platform: Win 10 22H2

fudom commented 1 month ago

Workaround:

angular.json

Add the following object to the assets array.

{
  "glob": "**/*",
  "input": "node_modules/leaflet/dist/images/",
  "output": "./media"
}

Note: This may overwrite other files. For example, if leaflet/dist/images contains something you already have in media from another source. Because Angular adds not unique ID in this case. You could copy the images to assets in a unique folder and change the default paths.

{
  "glob": "**/*",
  "input": "node_modules/leaflet/dist/images/",
  "output": "./assets/leaflet"
}

delete (Leaflet.Icon.Default.prototype as any)._getIconUrl;
Leaflet.Icon.Default.mergeOptions({
  iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
  iconUrl: 'assets/leaflet/marker-icon.png',
  shadowUrl: 'assets/leaflet/marker-shadow.png',
});

(not tested)

I wonder why other png files from leaflet are copied automatically into media like layers-2x-TBM42ERR.png. (The ID behind is added by Angular). Also marker-icon-2V3QKKVC.png is copied into media. What is different for the other marker pngs (404 above)?

IvanSanchez commented 1 month ago

Hi, and thanks for taking the time to open a bug report in Leaflet.

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

React
Ractive
AngularJS
Bootstrap
Leaflet for R
Joomla
Wordpress
Ionic
Cordova
Vue
Electron
Polymer
TypeScript
D3
Folium
NativeScript
...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropriate repo.

Leaflet / Leaflet