New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
L.Icon.Default brings a wrong image url #4968
Comments
|
This may be from the same issue discussed in #4849 |
Indeed. Which why I'm curious as to know the circumstances this can be reproduced, so we can make unit tests against those. |
I had the same issue moving from RC3 to 1.0.1 - in my code I had the line L.Icon.Default.imagePath = 'images'; - can't remember quite why this was, but commenting it out solved the issue - might be worth checking you don't have similar |
ok I got something. So a marker looks like this currently because the images (icon and shadow) aren't found. this function in leaflet:
causes the The name of the file can be removed if you delete
and here we go, the icon shows up. One last issue is that the shadow image is a marker icon as well - the src path is already wrong, I have no idea why (yet). So a marker now look like this: @IvanSanchez does this help you a bit narrowing down the issue? |
@codeofsumit would be nice to step through |
@IvanSanchez @perliedman I think I found the bug. This is
the Which is correct. Now the regex wants to extract the data.image url from this, and it returns this:
Notice the last
This fixes the image problem, together with
inside |
having the same issue, |
the shadow issue seems to be cause by the fact that in could it be related to this commit hardcoding the marker image? |
@codeofsumit yeah, i did something similar here https://github.com/Radu-Filip/Leaflet/tree/temp |
@Radu-Filip do you mind updating your PR with that solution? It may get merged. |
@codeofsumit done, let's see if it goes through |
Hi, Maybe I miss something, but it seems to me that this issue of Webpack building could be simply addressed with a Leaflet plugin, that would override Demo: http://playground-leaflet.rhcloud.com/nexo/1/edit?html,css,output With this approach, you get rid of any tricky RegExp, and the default marker images are inlined (by hard coding), which is one of Webpack intended result for small images anyway. A possible downside is that each marker has its own base64 icon, not sure if browsers can cache that… (same downside for PR #5041) Demo: http://playground-leaflet.rhcloud.com/mey/1/edit?html,css,output (not taking care of retina) The biggest advantage of the plugin approach, is that it keeps this specific behaviour for Webpack projects only. Hope this helps. |
BTW, it seems to me that there is something intrinsically wrong here. Leaflet makes a "complex" path detection to images, which must be in a pre-defined place compared to the CSS file. But webpack build process bundles that CSS and may (or not) move the images as well (and rename them!), depending on what the developer requests to webpack (like requiring images). PR #5041 is like a trick to accept the case where webpack inlines images into the CSS, at the cost of duplicating the Base64 image into each marker. Not even talking about the cost to non-webpack users. PR #4979 was meant just to prevent the webpack build error message (due to missing file), it does not look to handle at all the actual image path resolution. |
I don't really manage it. I just don't use the default icon so this bug wasn't a problem for me until now. |
Hi, just a note to say I can reproduce this path error using the 1.0.1 version of this library. As far as I can see the "problem" is on _getIconUrl function? as after |
Sounds like what you report is a different issue. Unfortunately, as it seems to involve a port to a framework (Drupal), you would have first to make sure that the bug is not related to how that port is working. Leaflet 1.0.x with vanilla JS correctly includes the trailing slash: http://playground-leaflet.rhcloud.com/fosa/1/edit?html,output See for instance http://cgit.drupalcode.org/leaflet/tree/leaflet.module#n51, where Looks like that module does not handle the change between Leaflet 0.7.x and 1.0.x, where the slash must now be included in As Leaflet 1.0.0 is a major release, I guess there is no commitment for backward compatibility. |
hey @ghybs I see... I will contact the Drupal module maintainers to let them know this. As you said, it sounds that they have to modify the module to fit well with the 1.0.x version of the library, or at least add some lines to the docs warning about this. Thanks for your feedback! |
I'm having the exact same issue as originally reported -- in an aurulia skeleton/esnext+webpack project. Until this is fixed I've copied the images out to my source folder and am using a custom marker -- omitting size/placement info seems to be ok...
|
Wanted to share what I did to workaround the invalid data:url issue. Basically set the default icon to a new one that uses the provided marker icon and shadow, but will let webpack handle the data encoding of those images individually. Just include a file like this somewhere. import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon; Could probably be tweaked to include the retina icon as well. |
@ghybs thanks for the hotfix. I've ran into this bug a few times in different projects. This entire thread seems absurd that its not fixed or isn't seen as a problem. |
google brought me here because using the library with Webpack was giving me this error. |
Does anyone know why aren't those images inlined as svg? I think this could easily solved with |
Legacy browser support. |
Thanks @IvanSanchez Then I see two potential solutions. One is to inline the images as base64 encoded Is any of these solutions worth a pull request? Out of all the browsers supported by leaflet, the following don't have support for svg (caniuse).
|
See #4968 (comment) |
Fixes #706 / FeatureLayer icons do not display correctly as a result of multiple issues. Vendorizing an asset_url "friendly" version of Leaflet 1.4.0 fixes our display issue. Reasons for local vendorized leaflet: * leaflet-rails icon path issue remains open: axyjo/leaflet-rails#81 * The leaflet-rails gem appears unmaintained * Leaflet's icon "path" regex bug breaks image url path: Leaflet/Leaflet#4968 * Overriding L.Icon.Default icon options still runs into the "path" bug * Rails asset pipeline fingerprinting complicates leaflet icon path
Fixes #706 / FeatureLayer icons do not display correctly as a result of multiple issues. Vendorizing an asset_url "friendly" version of Leaflet 1.4.0 fixes our display issue. Reasons for local vendorized leaflet: * leaflet-rails icon path issue remains open: axyjo/leaflet-rails#81 * The leaflet-rails gem appears unmaintained * Leaflet's icon "path" regex bug breaks image url path: Leaflet/Leaflet#4968 * Overriding L.Icon.Default icon options still runs into the "path" bug * Rails asset pipeline fingerprinting complicates leaflet icon path FeatureLayer: use nearby method to fetch feature data Fixes #717 / Switching intersects() for nearby() returns data as expected Rubocop: AlignParameters
Fixes #706 / FeatureLayer icons do not display correctly as a result of multiple issues. Vendorizing an asset_url "friendly" version of Leaflet 1.4.0 fixes our display issue. Reasons for local vendorized leaflet: * leaflet-rails icon path issue remains open: axyjo/leaflet-rails#81 * The leaflet-rails gem appears unmaintained * Leaflet's icon "path" regex bug breaks image url path: Leaflet/Leaflet#4968 * Overriding L.Icon.Default icon options still runs into the "path" bug * Rails asset pipeline fingerprinting complicates leaflet icon path FeatureLayer: use nearby method to fetch feature data Fixes #717 / Switching intersects() for nearby() returns data as expected Rubocop: AlignParameters
Fixes #706 / FeatureLayer icons do not display correctly as a result of multiple issues. Vendorizing an asset_url "friendly" version of Leaflet 1.4.0 fixes our display issue. Reasons for local vendorized leaflet: * leaflet-rails icon path issue remains open: axyjo/leaflet-rails#81 * The leaflet-rails gem appears unmaintained * Leaflet's icon "path" regex bug breaks image url path: Leaflet/Leaflet#4968 * Overriding L.Icon.Default icon options still runs into the "path" bug * Rails asset pipeline fingerprinting complicates leaflet icon path FeatureLayer: use nearby method to fetch feature data Fixes #717 / Switching intersects() for nearby() returns data as expected Rubocop: AlignParameters
Had to add anchor and size too to make it work, e.g.
|
I also have the same issue (webpack using Flask, so all the elements are supposed to be in a static folder), but @Giorgi-M fix is not enough, as I get a '"exports" is read-only' error (Firefox, seems to be linked to the png imports?). |
Seeing this issue with vue2-leaflet 2.0.2 and leaflet 1.4.0. |
this appears to have existed for quite awhile, and half of the presented solutions don't seem to work. Has anyone figured out the root of this problem? |
i am having the same problem with versions "vue2-leaflet": "2.0.3" leaflet "leaflet": "1.4.0". also running webpack. |
We are successfully using vue2-leaflet 2.0.3 and leaflet 1.4.0 using a solution found in this same issue:
|
I guess the better question that needs to be asked is why this wasn't fixed with the merged code which caused the issue to be closed? Since a workaround that works is great, but this should work out of the box and still needs to be an open issue. |
Dear all, Leaflet works out-of-the-box. Webpack (and other build engines) combined with Leaflet does not work out-of-the-box. Please refer to solution proposed in #4968 (comment): leaflet-defaulticon-compatibility
With webpack, another typical solution, once you have configured your loaders: import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
}); There are other solutions proposed higher in this thread for other build engines and framework combinations. To prevent these solutions from being further buried under comments, I am going to lock this thread. Thank you all for the shared solutions! 👍 |
The image url leaflet prsents me is https://uismedia.geo-info-manager.com/apis/leaflet_1/imagesmarker-icon-2x.png. It seems there is a missing "/"
Additionally i have an error
leaflet.min.js:5 GET https://uismedia.geo-info-manager.com/apis/leaflet_1/images/ 403 (Forbidden)
The text was updated successfully, but these errors were encountered: