Comments (22)
From @tombatossals on March 20, 2014 13:27
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.
from ui-leaflet.
From @wixo on March 21, 2014 5:36
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.
from ui-leaflet.
From @tombatossals on March 21, 2014 6:46
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/
from ui-leaflet.
From @dnazarov on March 21, 2014 8:27
Is this example OK? You may change some of scope preperties directly through the scope methods.
http://jsfiddle.net/4PhzC/36/
from ui-leaflet.
From @ugaz on April 23, 2014 22:48
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!!
from ui-leaflet.
From @Splaktar on September 24, 2014 19:3
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.
from ui-leaflet.
From @michaelryancaputo on October 8, 2014 14:16
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.
from ui-leaflet.
From @tombatossals on October 8, 2014 14:28
Hey guys, can anyone make a jsfiddle where I can see this behaviour?
from ui-leaflet.
From @tombatossals on October 8, 2014 14:32
@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
from ui-leaflet.
From @tombatossals on October 8, 2014 14:39
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?
from ui-leaflet.
From @michaelryancaputo on October 8, 2014 19:30
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.
from ui-leaflet.
From @michaelryancaputo on October 9, 2014 14:27
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/
from ui-leaflet.
From @tombatossals on October 9, 2014 17:10
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?
from ui-leaflet.
From @michaelryancaputo on October 9, 2014 17:38
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.
from ui-leaflet.
From @tombatossals on October 16, 2014 6:38
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.
from ui-leaflet.
From @michaelryancaputo on October 16, 2014 15:33
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.
from ui-leaflet.
From @tombatossals on October 17, 2014 15:33
Hi @flashpunk, just added your example here:
http://tombatossals.github.io/angular-leaflet-directive/examples/double-map-sharing-attributes.html
Thanks for sharing
from ui-leaflet.
From @Splaktar on October 22, 2014 20:59
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.
from ui-leaflet.
From @michaelryancaputo on October 22, 2014 23:16
@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
from ui-leaflet.
From @kuanb on June 5, 2015 21:26
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) { ... }
.
from ui-leaflet.
Did this ever get fixed? I am still having this issue.
from ui-leaflet.
from ui-leaflet.
Related Issues (20)
- leafletData.getDirectiveControls
- Dynamically add data to geoJSONShape HOT 1
- Migration to Angular 4 HOT 1
- Changin markers on scope, the model is different HOT 2
- Markers not showing in second (or more) maps HOT 4
- Travis CI seems to be broken HOT 1
- Add Custom Styles To Google Maps
- layercontrol - More than 1 map on the DOM
- IE 11: US Map mouse over highlighting beside state(s)
- <Security Issue> Slack token need to be encrypted
- Fitbounds and markercluster zoom issue
- Marker in not updating its position on the map, when its value is updated
- Nor working in angular 1.6.4 HOT 2
- Popup closes when changing marker icon
- ui-leaflet analog for bindLabel functionality? HOT 1
- Could anyone propagate this commit to the 2.0.x tag version?
- MBTiles
- Disable auto center adjust after change marker coordinates programmatically
- Is this project still active ?
- Issue with Clickable Marker Content
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui-leaflet.