Exposing the map object to the controller's scope about angular-leaflet-directive HOT 7 CLOSED

Hi @grantlucas, you're right, I was thinking too accessing the leaflet map object outside of the library in some way. If the developer needs access to it knowing the pros and cons.

The unit tests are already accessing the object via a "testing" property which allows querying the leaflet map object for checking purposes. Maybe we can use some technique like that and unify this access.

For example, an attribute like this:

<leaflet center="center" leafletMap="leafletMap"></leaflet>

This could give us access to the leafletmap object on a variable "leafleatMap" of the angular scope. What do you think? It will be easy to implement and wouldn't break anything.

from angular-leaflet-directive.

Hi all,

I also was thinking in it. I'm facing some features for my applications that need deeper interaction with Leaflet.

What I don't know are the possible side effects of calling some Leaflet functions directly, my few knowledge of Angular and Leaflet stoped me to try it. For example if you call fitBounds, the center of the map will change, if Leaflet do not fire a moveend the center model will not be updated. If you later modify the zoom.... what will happen?

Probably the best way to check it is doing it, so I agree in creating a leafletMap attribute in the directive, and also extend it to other features.

from angular-leaflet-directive.

@tombatossals Yeah leafletMap on the scope would work for sure! I forgot that the testing is there and could be used as an example of how to make this happen. Before posting this issue originally, I had attempted to do what you described but couldn't get it working. Following what testing does makes sense

@JaumeFigueras I think adding a listener to the map for moveend would cover a lot of the cases where we need to update data. On move end we can update the current center, zoom level etc which would then be reflected in the scope.

One concern with that method though is that we'd have to be careful that the watcher on center/zoom etc doesn't then fire again since we're only updating the center property for consistency and not to move the map. I could see it potentially happening like so:

• Controller calls fitBounds on map
• Map recenters itself
• Directive catches the moveend event and updates $scope.center and anything else
• Stuff we don't want to happen after this point
  • Directive sees that center changed and then tries to center the map on the new location
    • I don't think it will visually do that much to the map if it's re-processed again but it'd be nice to avoid the duplication
    • Not 100% sure if this would then fire off a moveend event starting this all over again.

from angular-leaflet-directive.

Hi, I'm on it. I have created the "leafletMap" property which exposes the map object, and I have created an example demo with a call of map.fitBounds(...) outside the directive like @JaumeFigueras said. The center parameter seems to update fine, so it seems it's working like expected.

You can see the demo on the last commit on the file: examples/access-leaflet-object-example.html

I think this solves what we needed, tell me if something is missing.

from angular-leaflet-directive.

👍 Working great so far!! Thanks a ton @tombatossals. This is a huge feature for the stuff I'm working on.

Will be playing with it over the next few days, will let you know if I run into any bugs.

from angular-leaflet-directive.

hi @tombatossals, I seem to be running in to an issue with this. The error I seem to be getting is (from the most recent example):

Object # has no method 'fitBounds'

It seemed to accept an id parameter in the function, so I tried passing an id to it as well but it still doesn't seem to work. Am I missing something?

from angular-leaflet-directive.

Yes, that demo was an early use of the leafletData.getMap() object, now its solved. Basically, now the getMap() call is a promise, so we must wait until it's resolved:

leafletData.getMap().then(function(map) {
    map.fitBounds([ [40.712, -74.227], [40.774, -74.125] ]);
});

from angular-leaflet-directive.