Leaflet Image Markers – Dragging and Dropping Images into Leaflet Map

html5iconleaflet

I am using Leaflet. I need to make custom, draggable, resizable icons for the map, using custom images that are set inside a sidebar as such:

<div id="mySidebar" class="sidebar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="dropdown">Actions
            <div class="dropdown-content">
                <img src="Symboles\Actions\Actions Défensives\def_lig.png" alt="def lig" title="def lig" class="dragger"><p>Défense en ligne</p></img>
                <img src="Symboles\Actions\Actions Défensives\def_lig_pre.png" alt="def lig pre" title="def lig pre" class="dragger"><p>Défense en ligne prévue</p></img>
                <img src="Symboles\Actions\Actions Défensives\def_prm.png" alt="def prm" title="def prm" class="dragger"><p>Défense périmétrique</p></img>
                <img src="Symboles\Actions\Actions Défensives\def_prm_pre.png" alt="def prm pre" title="def prm pre" class="dragger"><p>Défense périmétrique prévue</p></img>
                <img src="Symboles\Actions\Actions offensives\act_loc_inde.png" alt="act loc inde" title="act loc inde" class="dragger"><p>Action localisée indépendante</p></img>
                <img src="Symboles\Actions\Actions offensives\act_noria.png" alt="act noria" title="act noria" class="dragger"><p>Action en Noria</p></img>
                <img src="Symboles\Actions\Actions offensives\act_smlt_cct.png" alt="act smlt cct" title="act smlt cct" class="dragger"><p>Action simultanée et concertée</p></img>
            </div>
        </div>
</div>

I know I have to use L.icons But I have no idea on how to do it with my sidebar, since it'll have about 100 images.

Best Answer

Using the HTML Drag and Drop API you can drag an image from the sidebar and drop it onto the map. For this you will have to bind two listener functions to the map container:

mapdiv = document.getElementById("map")

mapdiv.ondragover = function (e) {
  e.preventDefault()
  e.dataTransfer.dropEffect = "move"
}

mapdiv.ondrop = function (e) {
  e.preventDefault()
  imagePath = e.dataTransfer.getData("text/plain")
  coordinates = map.containerPointToLatLng(L.point([e.clientX,e.clientY]))
  L.marker(coordinates,{icon: L.icon({iconUrl: imagePath}),
                        draggable: true})
    .addTo(map)
}

https://jsfiddle.net/430oz1pj/197/

ondragover has to exist, but we just define the default behaviour. ondrop is the important part for your question. Luckily the drop event comes with some coordinates (clientX,clientY) that we can pass on to the Leaflet map to create a marker.

Note that this only works correctly if the whole map is visible in the viewport (browser window).

PS.: Markers don't change their size when you zoom the map. That's why I suggested an imageOverlay in the comments. Unfortunately these aren't draggable by default, but you can workaround it by binding them to draggable polygons as described in this gis.se answer.

Related Question