angular-ui / ui-leaflet

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

ui-leaflet analog for bindLabel functionality? #359

Closed CodeWarrior-Hawaii closed 6 years ago

CodeWarrior-Hawaii commented 6 years ago

I am porting a map project over to ui-leaflet from "vanilla" leaflet. I have come too far to turn back now. I cannot for the life of me figure out how one is supposed to modify marker labels.

In this case, I am trying to change the marker labels so that they are mouseOver popups with custom styling: OLD CODE https://pastebin.com/1jCWzPND

The above code is switching on a string type name for the marker items to determine what styling is going to go on them.

NEW CODE Init Map https://pastebin.com/T6vXRgRj

Get Points https://pastebin.com/T3KN9qTf

In this new project using ui-leaflet, I am getting json data from a database and setting the title, lat lng and so forth, as well as the group (by name).

How do I set the label in the way that the bindLabel call above did?

CodeWarrior-Hawaii commented 6 years ago

I have worked around this in the following way:

leafletData.getMap().then(function(map){ map.on("layeradd", function(layer){ if(layer.layer.dragging){//Its a marker layer.layer.bindTooltip(layer.layer.options.PointName,{ direction: 'bottom', offset: L.point(0, 15) }) } }); });

This gets the Leaflet map object, then iterates through the layers (this includes L.Markers which are derived from L.Layer). For each Marker (by checking the existence of the "dragging" property, I call bindTooltip, give it the text and options.