LeafletJS how to display HTML Elements/DIV/Input Box/Button on specific position using LongLat

I'd like to ask about if it is possible or how do I add a "HTML Element" on spefic location on the map using Long Lat?

My goal is to add a Label and Text Input or a Text and Button pair sort of thing of specific position on the map.

Like for example:

Displaying a html + css control that displays a name and hobby:

Like this

Given the longitude and latitude place it on the map.

Is there a way doing this? How to do this? Then maybe add something like a alert when clicking it.

Answers 1

  • I can think about one way. I've used the L.divIcon for the same purpose. Here is a part of my code :

    var yourPoint = L.divIcon({
      className: 'map-marker-yourClassHere',
      iconSize: null,
      iconAnchor:   [17, 35],
      html:'<div class="text-marker">'+ txt +'</div>'
    L.marker(latlng, {icon: yourPoint}).addTo(map);

    You can simply put everything you want into this html option.

Related Articles