Looking for some clarification on the best way to use this directive about angular-leaflet-directive HOT 8 CLOSED

Hi, let me answer some of your questions:

• Actually the directive listens to "drag" events of the map or the markers, and to the "zoom" event of the map, so you could interact with these values easily from the angular scope variables.
• You can access the center of the map from the scope, you would define the "center property" of the scope when you initialize the directive, and this property will be updated auto-magically with every drag of the map.
• The directive lacks much of the leaflet api core functions, but on its current state you can make some usefull actions with it, and it's a good starting point to extend it with your own needs. And of course, you're welcome to make pull requests with the modifications you consider interesting.

from angular-leaflet-directive.

Thanks! This is becoming much more clear. I have it sorted out where I can get the current center and I understand the whole data binding between I think.

• For events, how would I watch for the changing of the center of the map or change in zoom level? Or in the future, a click event on a marker?
• Am I correct in understanding that there is no event for when a marker is clicked?
  • If there is no click event on the marker, is there a good example in the directive already that I could base this addition off of?
  • If I wanted to add some more Leaflet core events, for example zoomstart and zoomend, is there a proper way to do that? Is it angular $broadcast/$emit?

Just trying to get a handle on the way to do things so I don't waste too much time implementing incorrectly.

Thanks for the help

from angular-leaflet-directive.

hrm, that's actually a good question :)

All these events can always be emitted by using broadcast on rootScope. However, depending on how you are going to interact with the events, data binding between directive and controller scope might be enough. In fact, I think it's better to use data binding, i.e. catch leaflet events inside the directive and change bound data. Currently, no events is broadcasted to the rootScope, but some of them (marker click including) are caught inside the directive.

So could you give an example of your use case?

from angular-leaflet-directive.

Sure. Here's an overview of one of my desired interactions.

• Have leaflet map
• Have button outside of directive which adds marker to the map at current center
  • This I have mostly figured out
• User then as the ability to edit this marker by dragging it and changing some data. When a marker is clicked or on dragend, I need to present the user with a form allowing them to edit some metadata on that marker.
  • Each marker will have a "title" and "description"

Another scenario where watching for dragstart would be useful is if I have a form showing, or something else, from the scenario above, I may want to hide the form when interaction with the map starts again. This doesn't really have to do with data binding so it wouldn't make sense to add it to some or of data. Instead it would make sense to just listen for the event.

from angular-leaflet-directive.

yep, for the adding marker feature, you can reference the path-example.html

as for your use case, I agree that it's more handy to have the directive broadcast events. Would you like to help implement this in the directive? If so, feel free to let us know if you need any help.

from angular-leaflet-directive.

Ah sounds good. Yeah I'm more than happy to implement some events.

Thanks for the help and clarifications!

from angular-leaflet-directive.

Back from a bit of a vacation and am going to get down to working on events broadcasting soon. I've done some tests and familiarized myself with the directive and how/where events are caught/broadcasted.

For consistency, would it make sense to try to broadcast all map events and all marker events?

This would be many more events than I, personally, would need to deal with but it might make sense to do as many as possible so that down the line, there aren't questions like "Why is event X broadcasted and Y isn't??". It shouldn't be too difficult to get this set up, I just want to make sure that what I'm adding to this directive makes sense.

My plan for each event would be to catch it, and then broadcast on $rootScope passing along the original Leaflet event information and any other relevant information incase the listener needs it. For example, the marker click event would pass not only the Leaflet event but also the property name (scope_watch_name) of the marker so that it could be modified if necessary from the original markers object.

For consistency I'd name each event broadcasted as "leafletDirective{kind}{eventName}". So a marker click event name would be leafletDirectiveMarkerClick and map click would be leafletDirectiveMapClick.

from angular-leaflet-directive.

Also, for clarification does setupEvents() already cover this for the map? I just noticed this function. Would it make sense for something similar for markers?

With what's there now with setupEvents(), how are events used from a controller level?

from angular-leaflet-directive.