0

I'm trying to add plain text as an overlay to my leaflet map with custom tiles. I don't want them bound to a marker on popup or as a mouse hover. Is there a way to add text to the locations of a map that would change size dynamically based on the zoom level?

please advise as the I'm not seeing anything in the Leaflet API...

1 Answer 1

0

You can use the L.DivIcon for this. API here. This lets you represent an icon with ANY HTML that you define.

var myIcon = L.divIcon({className: 'my-div-icon', html: '<b>Hello!</b>});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

Obviously, where the HTML is inserted, you can use any HTML you want.

Will this work for you? You mention you don't want to use a marker, but is there a specific reason why a DivIcon wouldn't work?

3
  • I have tried it to implement exactly what the API has for it's example and I get the following chrome error when Inspecting the Element: uncaught typeError: Cannot call method 'createIcon' of undefined Nov 5, 2013 at 19:59
  • What I want is to treat text like a route/poly-line to associate it with grid locations so that I can see a label for a particular region that is in view on my custom tile Nov 5, 2013 at 20:01
  • If you want to treat text like a route/line, then yeah, DivIcon will only get you a point, and you won't be able to snap it to a line. This plugin however might help: github.com/makinacorpus/Leaflet.TextPath It lets you write text along a polyline, and the text will wrap around the line.
    – Patrick D
    Nov 6, 2013 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.