Cannot use leaflet directive multiple time at once.

[pgayvallet]

Hello,

The _leafletMap directive variable singleton in the root directive cause leaflet to crash in various way if more than one map is used at the same time in the application. ( all maps use the variable, causing previous maps to loose reference to their own map at one point )

Fix should be easy using a scope variable instead of directive singleton to store the map promise.

[tombatossals]

Hi, have you tried passing an id to the "leaflet" tag? The leafletData object stores a leaflet object based on the id, so it will be able to fetch the required map object when you ask for it.

For example:

<leaflet id="first" center="london"></leaflet>
<leaflet id="second" center="paris"></leaflet>

Then you can use:

leafletData.getMap("first").then(function(map) {
    console.log(map);
});

Take a look at this example code:
http://tombatossals.github.io/angular-leaflet-directive/examples/double-map-example.html

I think this will solve the behaviour you are experiencing.

[wixo]

This is kind of happening to me too with async loaded views, when I go back and forth between these views the current leaflet map inherits the center of the previous leaflet map.
I am using the ids as advised.

[tombatossals]

Can you guys code a simple case where I can see this behaviour?

You could fork this jsfiddle example as a starting point:

http://jsfiddle.net/tombatossals/4PhzC/

[dnazarov]

Is this example OK? You may change some of scope preperties directly through the scope methods.
http://jsfiddle.net/4PhzC/36/

[ugaz]

There is an issue with the _layersControl when you have multiple maps: it is also a singleton. I have fixed it replacing "var _layersControl;" by "var _layersControl = [];" and every occurrence of the variable "_layersControl" by "_layersControl[mapId]". Seemed to work for me, though I am sort of newbie both in angularjs and leaflet, and I'm not sure if this is the best solution. Hope you hackers could take it from here, maybe...

By the way, thanks for the good job!!

[Splaktar]

I'm seeing this as well. All of the markers which are on layers (feature group) are applied to the first map on the page. This includes using marker clustering. If the markers are not on layers, then the markers get applied to the proper map. But our use case requires that all of the markers be in separate layers/feature groups.

So this limits us to using only one map per page, which is a significant limitation that we would like to see removed.

[michaelryancaputo]

Having this issue as well. Having an issue building a dynamic map that has the ability to toggle various geojson and popup data. I've settled on having multiple maps on the page, and show/hiding them, but now that i've built that, I'm finding that I can't have more than one map showing different data on one page. I've tried passing the id solution as above with no luck unfortunately.

[tombatossals]

Hey guys, can anyone make a jsfiddle where I can see this behaviour?

[tombatossals]

@flashpunk, do you mean that you can't show two maps on the web page with different markers on each one? Is there some more complexity on your code?

I'm going to try to make a jsfiddle myself

[tombatossals]

http://jsfiddle.net/4PhzC/168/

This jsfidle could be an starting point. Could anyone ellaborate a more complex example where we can see the failure?

[michaelryancaputo]

I'm using multiple maps with different geojson data on each one (not markers) - also including data, style, and onEachFeature popups for each geojson boundary.

[michaelryancaputo]

Ok, so i've been playing with your example above, with some of the extra features i'm using and it seems to be working...
Going to go back again and try and re implement it again.

http://jsfiddle.net/flashpunk/vosru6t9/

[tombatossals]

Fantastic example. Would you mind if I put this code in the project as an example of how to use multiple maps and geojson data at the same time?

[michaelryancaputo]

Just found this bug with ng-show/ng-hide - the map on the show/hide doesn't seem to want to draw: http://jsfiddle.net/flashpunk/vosru6t9/1/

Sure feel free to use the example.

[tombatossals]

Yes, the ng-show/ng-hide behaviour is related with leaflet, which needs to call "invalidateSize" when the size of the div is changed. You can easily solve this using ng-if instead of ng-show:

http://jsfiddle.net/bL69rzch/1/

I'll add your example to the project, thanks.

[michaelryancaputo]

FYI, I ended up scrapping this method, and using this gist: https://gist.github.com/pospi/85c31530c4a93cf091ce

It destroys the layer and recreates a new one. I've also had to hack a way to destroy the legend and create a new one whenever the button was created (that was done with angular.element('.legend.leaflet-control').remove();)

Can probably create a fiddle at some point with an example for anyone else needing this type of functionality.

[tombatossals]

Hi @flashpunk, just added your example here:

http://tombatossals.github.io/angular-leaflet-directive/examples/double-map-sharing-attributes.html

Thanks for sharing

[Splaktar]

That example is helpful but it still isn't quite what I need. I debugged this a lot more today.

Basically, I need to pass in dynamic names to the directive via the attribs. But since the directive uses isolated scope with = (two way data binding) you cannot use data binding in the attribs. Do you really need to be bound in both directions? Should the directive really be modifying the event-broadcast, markers, paths, or layers objects? It seems like these should be input only?

Here is what I need to work:

  <leaflet id="{{map.uuid}}" center="'{{ 'leaflet.center.' + map.name }}" markers="{{ 'leaflet.markers.' + map.name }}"
           layers="{{'leaflet.layers.' + map.name}}" controls="controls" paths="{{'leaflet.paths.' + map.name}}"
           event-broadcast="{{'leaflet.events.' + map.name}}"
           class="leaflet-map"></leaflet>

But this fails with Angular exceptions since you can't use data binding for these attributes.

[michaelryancaputo]

@Splaktar This isn't the full answer you're looking for, but in the end I was able to render multiple different maps by modifying and using this directive: https://gist.github.com/pospi/85c31530c4a93cf091ce

[kuanb]

Wondering if anyone has any insight on the following TypeError (seems to likely be related to this issue). I have two maps, map_left and map_right. When adding new layers, using leafletData.getMap('map_xxx').then(function(map) { ... } works great but whichever map I attempt to var.addTo(map) second (after one map has already been interacted with), results in the following TypeError:

Uncaught TypeError: Cannot read property 'min' of undefined
o.LineUtil._getBitCode @ leaflet.js:8
o.LineUtil.clipSegment @ leaflet.js:8
o.Polyline.o.Path.extend._clipPoints @ leaflet.js:8
o.Polyline.o.Path.extend._updatePath @ leaflet.js:8
o.Mixin.Events.fireEvent @ leaflet.js:6
o.Util.bind @ leaflet.js:6

I should not this occurred when employing leafletData.getMap('map_left').then(function(map) { ... }.

[nmccready]

This issue was moved to angular-ui/ui-leaflet#11

[tombatossals]

I'm going to rework&redesign angular-leaflet-directive to be compatible with Leaflet v1.0. It will mantain almost all its functionality, and will be compatible with the current features of the directive, but I must start from a fresh point, so I'm going to close this issue. If you think it must be worked with the new version, please reopen it.

[tfendt]

This is still not working or me. Multiple maps each is updating it center when moving the other. Causes tiles to not load as well. I have different ID's for the maps and different controllers.