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

Closed
ArminMueller opened this Issue Sep 28, 2016 · 74 comments

Comments

Projects
None yet
@ArminMueller

ArminMueller commented Sep 28, 2016

  • [ x] I'm reporting a bug, not asking for help
  • I've looked at the documentation to make sure the behaviour is documented and expected
  • [x ] I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
  • I've searched through the issues to make sure it's not yet reported

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)

@IvanSanchez

This comment has been minimized.

Member

IvanSanchez commented Sep 28, 2016

  • Is there any public webpage in your server we can visit, so we can reproduce the problem ourselves?
  • What OS and web browser are you using?
@jasongrout

This comment has been minimized.

jasongrout commented Sep 28, 2016

leaflet.min.js:5 GET https://uismedia.geo-info-manager.com/apis/leaflet_1/images/ 403 (Forbidden)

This may be from the same issue discussed in #4849

@IvanSanchez

This comment has been minimized.

Member

IvanSanchez commented Sep 28, 2016

Indeed. Which why I'm curious as to know the circumstances this can be reproduced, so we can make unit tests against those.

@Greigrm

This comment has been minimized.

Greigrm commented Oct 2, 2016

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

@codeofsumit

This comment has been minimized.

Contributor

codeofsumit commented Oct 15, 2016

suddenly got the same issue in two completely different projects, both using webpack and leaflet.
If I add markers to the map, the images aren't found. Browser throws this error:
image

@codeofsumit

This comment has been minimized.

Contributor

codeofsumit commented Oct 16, 2016

ok I got something.

So a marker looks like this currently because the images (icon and shadow) aren't found.
image

this function in leaflet:

_getIconUrl: function (name) {
    if (!L.Icon.Default.imagePath) {    // Deprecated, backwards-compatibility only
        L.Icon.Default.imagePath = this._detectIconPath();
    }

    // @option imagePath: String
    // `L.Icon.Default` will try to auto-detect the absolute location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right absolute path.
    return (this.options.imagePath || L.Icon.Default.imagePath) + L.Icon.prototype._getIconUrl.call(this, name);
},

causes the data:image urls to have the following string at the end of the url:
")marker-icon-2x.png.

The name of the file can be removed if you delete + L.Icon.prototype._getIconUrl.call(this, name). The ") part is probably from the _detectIconPath regex magic. I can't fix that so I just tried slicing the last two chars off, which results in this function:

_getIconUrl: function (name) {
    if (!L.Icon.Default.imagePath) {    // Deprecated, backwards-compatibility only
        L.Icon.Default.imagePath = this._detectIconPath();
    }

    // @option imagePath: String
    // `L.Icon.Default` will try to auto-detect the absolute location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right absolute path.
  var url = (this.options.imagePath || L.Icon.Default.imagePath);

  return url.slice(0, - 2);
},

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:

image

@IvanSanchez does this help you a bit narrowing down the issue?

@perliedman

This comment has been minimized.

Member

perliedman commented Oct 17, 2016

@codeofsumit would be nice to step through _detectIconPath and see what's going on there, especially what value does the path variable have before it's passed through the regex.

@codeofsumit

This comment has been minimized.

Contributor

codeofsumit commented Oct 23, 2016

@IvanSanchez @perliedman I think I found the bug.

This is _detectIconPath

_detectIconPath: function () {
    var el = L.DomUtil.create('div',  'leaflet-default-icon-path', document.body);
    var path = L.DomUtil.getStyle(el, 'background-image') ||
               L.DomUtil.getStyle(el, 'backgroundImage');   // IE8
    document.body.removeChild(el);

    return path.indexOf('url') === 0 ?
        path.replace(/^url\([\"\']?/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : '';
}

the path variable is something like this:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQ…n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=").

Which is correct.

Now the regex wants to extract the data.image url from this, and it returns this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQ…n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=")

Notice the last ") that isn't removed from the path variable. The regex /^url\([\"\']?/ only targets url(" at the beginning of the path, not the ") at the end.
Using this regex works:

return path.indexOf('url') === 0 ?
    path.replace(/^url\([\"\']?/, '').replace(/\"\)$/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : '';

This fixes the image problem, together with

var url = (this.options.imagePath || L.Icon.Default.imagePath);

inside_getIconUrl. But it doesn't fix the shadow - I still don't know whats going on with the shadow.

@raduflp

This comment has been minimized.

raduflp commented Oct 23, 2016

having the same issue,
the path value in _detectIconPath is something like "url("data:image/png;base64,i...5CYII=")"
and it looks like _getIconUrl and _detectIconPath weren't designed to handle data URLs

@raduflp

This comment has been minimized.

raduflp commented Oct 23, 2016

the shadow issue seems to be cause by the fact that in _getIconUrl the value for L.Icon.Default.imagePath is already set with the marker data URL, so the image for marker is used and stretched
image

could it be related to this commit hardcoding the marker image?
837d190

@codeofsumit

This comment has been minimized.

Contributor

codeofsumit commented Oct 23, 2016

@Radu-Filip I was able to fix it with these modifications to your PR - I'm not sure what other effects this might have though:
image

The problem is - as you said - that the default URL is the marker image, for all icons basically.
So first of all I added the default URL for the shadow to the CSS:

/* Default icon URLs */
.leaflet-default-icon-path {
    background-image: url(images/marker-icon.png);
}

.leaflet-default-shadow-path {
    background-image: url(images/marker-shadow.png);
}

Then I passed the name from _getIconUrl to _detectIconPath and used it to add the class to the element from which the path is extracted:

_getIconUrl: function (name) {

  L.Icon.Default.imagePath = this._detectIconPath(name);

    // @option imagePath: String
    // `L.Icon.Default` will try to auto-detect the absolute location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right absolute path.
  var path = this.options.imagePath || L.Icon.Default.imagePath;
  return path.indexOf("data:") === 0 ? path : path + L.Icon.prototype._getIconUrl.call(this, name);
},

_detectIconPath: function (name) {
    var el = L.DomUtil.create('div',  'leaflet-default-' + name + '-path', document.body);
    var path = L.DomUtil.getStyle(el, 'background-image') ||
               L.DomUtil.getStyle(el, 'backgroundImage');   // IE8

    document.body.removeChild(el);

    return path.indexOf('url') === 0 ? path.replace(/^url\([\"\']?/, '').replace(/(marker-icon\.png)?[\"\']?\)$/, '') : '';
}

I also had to remove the if/else around detectIconPath, because it wasn't called for the shadow icon. Now everything works for the default marker icon - not sure about custom ones.

@raduflp

This comment has been minimized.

raduflp commented Oct 23, 2016

@codeofsumit yeah, i did something similar here https://github.com/Radu-Filip/Leaflet/tree/temp
and I'll use if for now as a hack. Hopefully there will be a more future proof solution down the line for those using webpack et al

@codeofsumit

This comment has been minimized.

Contributor

codeofsumit commented Oct 23, 2016

@Radu-Filip do you mind updating your PR with that solution? It may get merged.

@raduflp

This comment has been minimized.

raduflp commented Oct 25, 2016

@codeofsumit done, let's see if it goes through

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Oct 26, 2016

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 L.Icon.Default behaviour.

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)
We could imagine a refinement by setting it as a background image instead of placing it in the image src attribute, as done for Layers Control icon for example.
There may be a hidden trap with this idea (edit: sounds like that one), otherwise I am sure it would have been implemented long time ago, as it would have avoided the image path detection in the first place.

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.

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Oct 27, 2016

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).
Therefore the Leaflet detection surely fails when webpack is used.

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 guess developers then manually specify the L.Icon.Default.imagePath?
@jasongrout and @Eschon, maybe you could share how you managed it?

@Eschon

This comment has been minimized.

Contributor

Eschon commented Oct 27, 2016

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.

@anairamzap-mobomo

This comment has been minimized.

anairamzap-mobomo commented Nov 2, 2016

Hi, just a note to say I can reproduce this path error using the 1.0.1 version of this library.
I'm using it along with the leaflet Drupal module (7.x-1.x-dev), and here there is an issue reported to the module: https://www.drupal.org/node/2814039 in case its useful.

As far as I can see the "problem" is on _getIconUrl function? as after L.Icon.Default.imagePath there is a missing slash, so the image path for example in Drupal gets generated like this "/sites/all/libraries/leaflet/imagesmarker-icon.png". Between the images path and the marker image filename (marker-icon.png) should be a slash /.

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Nov 3, 2016

Hi @anairamzap-mobomo,

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 L.Icon.Default.imagePath is overriden by the Drupal module.

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 L.Icon.Default.imagePath.

As Leaflet 1.0.0 is a major release, I guess there is no commitment for backward compatibility.

@anairamzap-mobomo

This comment has been minimized.

anairamzap-mobomo commented Nov 3, 2016

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!

thb added a commit to covoiturage-libre/covoiturage-libre that referenced this issue Nov 5, 2016

@ajoslin103

This comment has been minimized.

ajoslin103 commented Nov 27, 2016

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...

		var customDefault = L.icon({
			iconUrl: 'images/marker-icon.png',
			shadowUrl: 'images/marker-shadow.png',
		});
@crob611

This comment has been minimized.

crob611 commented Dec 1, 2016

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.

@mb21

This comment has been minimized.

mb21 commented May 9, 2018

@perliedman from the looks of it the involved changed of #5771 are necessary. Otherwise you'll keep having this issue in different circumstances. Why not just merge that?

@ghybs

This comment has been minimized.

Collaborator

ghybs commented May 9, 2018

Hi @mb21,

the involved changed of #5771 are necessary

Actually the proposed changes are of 2 types:

  • reading each image path instead of just the images folder location, so that urls modified by build engines (like webpack file loader) are read as is instead of reconstructed / guessed.
  • reading all other default icon options from CSS, so that all the configuration is gathered in a single place.

The 2nd point is interesting if the 1st one cannot be avoided, even if it adds quite some code.

The 1st one is actually a favour to developers using a build engine that fiddles with urls in CSS. It keeps Leaflet zero config spirit even in a new environment where the developer spends quite some time tuning their configuration (if you use webpack file loader, you need a custom config anyway), at the expense of adding quite some code for everyone else, which is IMHO against Leaflet spirit (support common usage in core, delegate other use cases to plugins).
You can very easily solve the issue in the first place by specifying the image paths, typically using require(image) as shown in numerous above comments.

Therefore even though I authored that PR, I personnally feel uncomfortable merging it in core. The changes are not necessary for the majority.

They sure are nice to make developers' life easier, but the issue is primarily caused by interaction of build engines / framework wrappers, each having their specifities, and each having an easy way to tell Leaflet where the images are now, using the already existing API.

Maybe we should rather address this issue with better documentation (e.g. a section dedicated to usage with build engines / frameworks?), and/or a plugin?

@mb21

This comment has been minimized.

mb21 commented May 9, 2018

Well, I'm not sure I understand the intricacies. But it would sure be nice for all sorts of developers if all image paths could be specified in CSS. It's not only webpack-users, it's also people like me using the Rails or Django asset pipeline that appends a hash to each static asset...

@macwis

This comment has been minimized.

macwis commented Jun 5, 2018

I've experienced exactly the same problem:
data:image/png;base64,iVBORw0...AAAAASUVORK5CYII=")marker-shadow.png net::ERR_INVALID_URL

Solution is to replace:

getIconUrl: function (name) {
		if (!IconDefault.imagePath) {	// Deprecated, backwards-compatibility only
			IconDefault.imagePath = this._detectIconPath();
		}

		// @option imagePath: String
		// `Icon.Default` will try to auto-detect the location of the
		// blue icon images. If you are placing these images in a non-standard
		// way, set this option to point to the right path.
		return (this.options.imagePath || IconDefault.imagePath) + Icon.prototype._getIconUrl.call(this, name);
	},

with:

 // ...
  const url = (this.options.imagePath || L.Icon.Default.imagePath);

  return url.slice(0, -2);

as suggested by codeofsumit.

I found it really annoying and that fact that there is a PR to fix it but not merged because of the "feeling" that "The changes are not necessary for the majority." Sorry, but I've seen people struggling with it in PHP, RoR, Python (Django) and node.js, so where do you think is "the majority" beyond these groups? What compatible framework would you recommend?

@alexanderdejong

This comment has been minimized.

alexanderdejong commented Jun 5, 2018

I agree with @macwis

Having the same issue and this thread is very long. Why not merge the PR ?

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Jun 5, 2018

That is not a feeling, it is a fact: the majority uses no framework, or those that do not fiddle with CSS.
Last time I checked, Leaflet was no 1 downloaded from unpkg CDN, i.e. unbundled and unfiddled CSS.

The proper solution is to define the default icon options, as explained in many above messages.
Many frameworks do so as part of their Leaflet integration plugin.

If you want a more automatic solution, you still have the option to publish a plugin.

Why not merge the PR ?

Read the comments, e.g. #4968 (comment)

@googol7

This comment has been minimized.

googol7 commented Jun 5, 2018

I’d just like to throw in a little hint: you can use CDN also when using a framework. That’s what we do for example with our React App. We load big libs via CDN.

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Jun 5, 2018

@googol7 thank you for your input.

Please correct me if I am wrong: if you load Leaflet through the CDN, it very probably means you do not alter its CSS. Hence your users are in the majority.

@googol7

This comment has been minimized.

googol7 commented Jun 5, 2018

@ghybs: What I had to do was the following:

// Workaround: https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-269750768
/* eslint-disable no-underscore-dangle, global-require */
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"),
})
/* eslint-enable no-underscore-dangle, global-require */

our webpack config looks like this:

module.exports = {
    externals: {
        leaflet: "L",
    },
}
@ghybs

This comment has been minimized.

Collaborator

ghybs commented Jun 5, 2018

@googol7 thank you for the details of your config.

So you mean you load Leaflet JS from the CDN, but bundle the CSS and images in your app.

@googol7

This comment has been minimized.

googol7 commented Jun 5, 2018

@ghybs yes I guess that’s what’s happening here.

@mariotee

This comment has been minimized.

mariotee commented Jun 6, 2018

Be sure to follow the first two steps: https://leafletjs.com/examples/quick-start/
I had a similar issue because I was using the css of someone else's tutorial, but this one must be used

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

and then the Leaflet script immediately after that

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Jun 25, 2018

Hi all,

I published Leaflet plugin "leaflet-defaulticon-compatibility" that takes code from my PR #5771.
By using that plugin, the Leaflet Default Icon no longer tries to re-build the icon image paths, but fully relies on the CSS. That way, it becomes fully compatible with build engines and frameworks that automatically manage assets based on CSS (and usually re-write url()'s).

Simply load the plugin (CSS + JS) after Leaflet.
E.g. in webpack:

import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
import * as L from 'leaflet'
import 'leaflet-defaulticon-compatibility'

(demo)

While I can understand that many developers would have preferred such feature to be incorporated directly in Leaflet core, it has been argued that the added code is useless to a majority of end-users. Therefore, aligning with Leaflet spirit of keeping its core simple, I decided to make it a plugin.

Please feel free to open an issue on the plugin repo should you have troubles or concerns with how it works.

@HarelM

This comment has been minimized.

HarelM commented Jul 23, 2018

The fact is, that if you are using webpack you get this issue. I see the trend of more and more sites using webpack. Placing this as a plugin is less than ideal, IMHO, as I don't see people looking for a plugin to fix this kind of issue (much like I did when I opened a dup).
I would very much like to see this inside leaflet as this is more of a bug fix than a feature...

@marko-jovanovic

This comment has been minimized.

marko-jovanovic commented Sep 8, 2018

If you want to resolve this issue in Angular 6, just write in angular.json:

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

After that, override Marker default behavior, as some of previous answers suggests:

import { Icon, icon, Marker, marker } from 'leaflet';

@Component({
   selector: 'app-something',
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.scss']
})
export class SomeComponent implements OnInit {
  // Override default Icons
  private defaultIcon: Icon = icon({
    iconUrl: 'assets/leaflet/marker-icon.png',
    shadowUrl: 'assets/leaflet/marker-shadow.png'
  });

  ngOnInit() {
     Marker.prototype.options.icon = this.defaultIcon;
  }
}

The Angular package I used and had the same issue as here is: ngx-leaflet

NOTE:
There is small catch in Angular 6, as answer from t.animal on StackOverflow says

Be aware that in Angular 6 there are two relevant builders in the architects build and test.

Make sure you put it under build.

@HarelM

This comment has been minimized.

HarelM commented Sep 8, 2018

@marko-jovanovic thanks for the info, but what if I'm not using these assets and would like to reduce my package size?
Your suggestion still falls under my definition of a workaround, IMO.

@marko-jovanovic

This comment has been minimized.

marko-jovanovic commented Sep 10, 2018

@HarelM Well I could not come with any other solution because I was in a hurry to finish the school project. It's not perfect and I know it increases the package size, but my solution was enough for me, and hoped my answer could help others too somehow.

@HarelM

This comment has been minimized.

HarelM commented Sep 10, 2018

@marko-jovanovic your solution is great and I too hope it can help others. I'm just hoping for a solution, not a workaround :-)

@gittiker

This comment has been minimized.

gittiker commented Sep 11, 2018

@marko-jovanovic Hi, I am too sitting on a school project (Angular 6) and can't figure out why stuff does not work for me. To be honest I am a total noob to all of this stuff here.

When I insert your code in the ngOnInit-Function of my component, it throws an error at the part where you set iconUrl and shadowUrl:

Argument of type '{ iconUrl: (options: IconOptions) => Icon<IconOptions>; shadowUrl: any; }' is not assignable to parameter of type 'IconOptions'. Types of property 'iconUrl' are incompatible. Type '(options: IconOptions) => Icon<IconOptions>' is not assignable to type 'string'.

Am I missing something? Thanks in advance!

@marko-jovanovic

This comment has been minimized.

marko-jovanovic commented Sep 11, 2018

@gittiker I've updated an answer with the imports, component and ngOnInit example. Let me know if everything went fine. :)

@gittiker

This comment has been minimized.

gittiker commented Sep 11, 2018

@gittiker I've updated an answer with the imports, component and ngOnInit example. Let me know if everything went fine. :)

Yes thank you very much, it finally works. I had to manipulate your URL a little bit so it is
'assets/leaflet/images/marker-icon.png instead of 'assets/leaflet/marker-icon.png',. Same goes for the shadow image.

@hanzhi525

This comment has been minimized.

hanzhi525 commented Sep 25, 2018

@crob611 Thank you very much, I tried to solve the problem with this method.

Tevvek added a commit to Tevvek/railmapchallenge that referenced this issue Oct 3, 2018

markers arreglados
usando la informacion que habia en esta url: Leaflet/Leaflet#4968

consegui arreglar el problema que tiene la libreria al usarse con angular2.
@Tevvek

This comment has been minimized.

Tevvek commented Oct 3, 2018

@marko-jovanovic you saved me! but how @HarelM says, isn't there a solution?

@JLFabia

This comment has been minimized.

JLFabia commented Oct 14, 2018

thank you very much, but for me it served the following code: (Angular 6 and leaflet1.3.4)
First step
(https://codehandbook.org/use-leaflet-in-angular/)
But then the icon was not shown
error get icon image
net::ERR_INVALID_URL
solve it by inserting the following code in the component
delete L.Icon.Default.prototype._getIconUrl;`

L.Icon.Default.mergeOptions({
  iconRetinaUrl: '/assets/leaflet/dist/images/marker-icon-2x.png',
  iconUrl: '/assets/leaflet/dist/images/marker-icon.png',
  shadowUrl: '/assets/leaflet/dist/images/marker-shadow.png',
});`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment