search

angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
315 stars 137 forks source link

How to have two identical maps #275

Open rawbeans opened 8 years ago

rawbeans commented 8 years ago

I would like to have two maps that mirror each other. I have many calls to getMap() in my controller. One way I could do this is by setting ids for the two maps, but this would require many duplicate calls to getMap in the controller.

Any thoughts on how to accomplish this?

nmccready commented 8 years ago

Is this on the same DOM or in different browsers? If I were to mirror I would use the same html and js and use websockets to keep them mirrored. Then it is less complicated on the frontend.

rawbeans commented 8 years ago

Same DOM, although they wont be displayed to the user at the same time. I have two tabs in my application. One displays the map fullscreen, the other is only part of the page.

nmccready commented 8 years ago

Hmm, well again you could just use the same controller and have them sync with websockets or pump the same promises to them.

rawbeans commented 8 years ago

Ok. Lets forget about mirroring for now. I just want the maps to load up the same.

Right now I have two instances of a single controller, each with a leaflet map. How can I pass in the map id set in the leaflet markup so that the controller instance knows which map to get?

I could set a scope variable from the html but that in generally not advised, and seems repetitive here. Also this variable does not get set right away if you use ng-init.

Basically I need a way to know in the controller scope which map belongs to that scope.

MichaelMarkieta commented 8 years ago

What do you need to sync between the two maps?