Leaflet Add Marker with Popup on DblClick

Showing Leaflet functionality of adding a marker and binding a popup on dblclick.

by Alex Azuero

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  width: 100%;
  height: 100%;
}

JavaScript

//Create OpenStreetMap Leaflet Tile Layer
var OpenStreetMap = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
//Create Leaflet Map
var map = L.map('map', {
  center: [34.0, -111.8],
  zoom: 6,
  attributionControl: true,
  layers: [OpenStreetMap]
});

//Create GeoJSON layer for user generated data
var drawnItems = new L.geoJson();
//Add GeoJSON layer to map
map.addLayer(drawnItems);


//Leaflet Draw Event
map.on('dblclick', function (e) {
			var marker = L.marker(e.latlng).addTo(map);
			var markerpopup = L.popup({
			});
			//Set popup lat lng where clicked
        pop= e.latlng
    		markerpopup.setLatLng(e.latlng);
        //console.log(e.layer._latlng);
			//Set popup content
    		markerpopup.setContent(pop);     
			//Bind marker popup
			marker.bindPopup(markerpopup);
      //Add marker to geojson layer
			drawnItems.addLayer(marker);
		});