Leaflet: v: 1.1.0: url to default marker icons is incorrect

Created on 5 Jul 2017 · 3Comments · Source: Leaflet/Leaflet

How to reproduce

Leaflet version I'm using: 1.1.0
Browser (with version) I'm using: Chrome 59
OS/Platform (with version) I'm using: MacOS 10.12
Using leaflet in conjunction with React + the Rubix Admin template. Have used leaflet 0.7 with this same setup & no problems. Leaflet is installed via Bower.

What behaviour I'm expecting and which behaviour I'm seeing

Leaflet markers should load correctly. Instead I get this error message:

GET http://localhost:8080/bower_components/leaflet/dist/imagesmarker-icon-2x.png 404 (Not Found)

But that URL is wrong because it's missing the slash between "images" and "marker-icon-2x.png"

It should be formatted with the slash. If I go into the Leaflet source and change the IconDefault options so that it looks like this (Line 6976...):

    iconUrl:       '/marker-icon.png',
    iconRetinaUrl: '/marker-icon-2x.png',
    shadowUrl:     '/marker-shadow.png',

then it works as expected.

If I revert to 0.7.7 then this problem goes away. What is causing this issue?

Source

brambow

Most helpful comment

Perhaps this is related to my issue that I just ran into. The marker is not loading (it tries to load as base 64).

How to reproduce

Leaflet version I'm using: 1.1.0
Browser (with version) I'm using: Version 59.0.3071.115 (Official Build) (64-bit)
OS/Platform (with version) I'm using: MacOS 10.12.5
Using leaflet in conjunction with Angular 2. Installed via NPM and used @types/leaflet to setup the project with Angular CLI.

What behavior I'm expecting and which behavior I'm seeing

For me, the Leaflet library is loading the icon as Base 64:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB[CUT_FOR_BREVITY]ASUVORK5CYII=&quot;)marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(225px, 197px, 0px); z-index: 197; outline: none;">

The src field contains ")marker-icon.png at the end, which causes the image to fail to load as invalid base64. If I remove that in the Chrome inspector, the icon appears as normal.

ethanmick on 5 Jul 2017

👍4

All 3 comments

Actually, better fix is to just set L.Icon.Default.imagePath to make sure the path includes the final slash. I guess at this point, just wondering why this seeming change?

brambow on 5 Jul 2017

Perhaps this is related to my issue that I just ran into. The marker is not loading (it tries to load as base 64).

How to reproduce

Leaflet version I'm using: 1.1.0
Browser (with version) I'm using: Version 59.0.3071.115 (Official Build) (64-bit)
OS/Platform (with version) I'm using: MacOS 10.12.5
Using leaflet in conjunction with Angular 2. Installed via NPM and used @types/leaflet to setup the project with Angular CLI.

What behavior I'm expecting and which behavior I'm seeing

For me, the Leaflet library is loading the icon as Base 64:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB[CUT_FOR_BREVITY]ASUVORK5CYII=&quot;)marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(225px, 197px, 0px); z-index: 197; outline: none;">

The src field contains ")marker-icon.png at the end, which causes the image to fail to load as invalid base64. If I remove that in the Chrome inspector, the icon appears as normal.

ethanmick on 5 Jul 2017

👍4

Hi guys, thanks for reporting. I'm pretty certain the problem you're describing is the same as #4968, so I'm closing this as duplicate. Please tell me if you believe this is another problem, and I'll consider re-opening.