The file marker-icon.png is not found when loading modules local

[Blittr]

Thanks for the great article on The Esri Leaflet Geocoder. However, I am experiencing a problem when I place the modules on-premise instead of loading them from unpkg. When I place the modules on-premise, browsers on iOS (iPhone / iPad) cannot find the file marker-icon.png (marker-shadow.png is found though). Browsers on a Windows platform do not experience this problem. The problem seems to be in leaflet.css because if I load that file from unpkg (the rest remains on-premise) the problem is over. I cannot figure out what is going wrong.

[gavinr-maps]

Hi, can you please post an example zip file of the files you're hosting internally that causes the issue.

[Blittr]

Thanks for the reply. Please find enclosed the files. Also I attached index.html, it is the Esri Leaflet Sample Code with only the path to unpkg.com removed. Internally, I have a folder named img that contains the necessary images. The css and js files are download from the the respective unpkg.com path.

index.zip

[Blittr]

Good day, thank you for your attention. Is it clear what the problem could be?

[gavinr-maps]

Hi, when I place the images from https://github.com/Esri/esri-leaflet-geocoder/tree/master/src/img into a folder called img at the same level of the index.html, it works for me:

I hope that helps!

[Blittr]

Hi, thank you for your reply. The problem does not occur with the above files but with the file marker-icon.png When I place the modules on-premise, browsers on iOS (iPhone / iPad) cannot find the file marker-icon.png (marker-shadow.png is found though). Browsers on a Windows platform do not experience this problem.

Please see the iPad screenshots below. The upper shows the issue (a question mark is displayed). The problem seems to be in leaflet.css because if I load that file from unpkg (the rest remains on-premise) the problem is over, see the lower iPad screenshot.

[gavinr-maps]

It appears you pulled that part of the CSS in your sample from leaflet.css (https://unpkg.com/browse/leaflet@1.9.4/dist/leaflet.css), correct? if so you'll need to pull those image assets from the Leaflet repo.

[Blittr]

Indeed, I downloaded leaflet.css from https://unpkg.com/browse/leaflet@1.9.4/dist/ to my local environment. My index.html contains link rel="stylesheet" href="leaflet.css". The leaflet.css file contains a relative path to marker-icon.png (namely images/marker-icon.png). I created the same path on my local environment that includes marker-icon.png. That should be OK, or am I overlooking something?

[gavinr-maps]

Seems ok to me. Are you ok with closing this issue then? Thanks!

[Blittr]

Thanks for your time. The strange thing is that it still does not display properly on a system running iOS (iPhone / iPad) however on a system running Windows it does display properly. Please give me some more time to figure out if I can find out what is going wrong.

[Blittr]

I think I found what the problem is. In esri-leaflet-geocoder.css it refers to the path img which contains the images, in leaflet.css it refers to the path images. Of course, when I put all the files locally, I create only one folder containing all the images. The references are then no longer correct. I have to test if that is the problem.

[Blittr]

I noticed I used on-premise the marker marker-icon@2x.png, but that should be marker-icon-2x.png. I don't know how this error got in there. My apologies.