Leaflet Test

by peterjames

HTML

<html>

   <head>


     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
     <!-- Make sure you put this AFTER Leaflet's CSS -->
     <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

   <body>
     <div id="map"></div>
   </body>
   </head>

 </html>

CSS

#map { height: 400px; }

JavaScript

var isPoppedUp = false;
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map);
var marker = new L.marker([51.505, -0.09], {
  draggable: true,
  autoPan: false,
});
marker.on('mousemouse', function() {
  //	console.log('mousemouse'); 
});
marker.on('mousedown', function() {
	if(isPoppedUp) {
  	event.stopPropagation();
    event.preventDefault();
    this.dragging.disable();
  }
	console.log('mousedown', 'isPoppedUp = ', isPoppedUp);
});
marker.on('mouseup', function() {
	if(isPoppedUp) {
  	//	isPoppedUp = false;			//	try commenting this in and out
    //	this.dragging.enable();	//	try commenting this in and out
  }
	console.log('mousedown', 'isPoppedUp = ', isPoppedUp);
});
marker.on('dragstart', function() {
	console.log('dragstart', 'isPoppedUp = ', isPoppedUp);
});
marker.on('drag', function() {
  //	console.log('drag'); 
});
marker.on('dragend', function() {
	console.log('dragend', 'isPoppedUp = ', isPoppedUp);
  var content_string = '<div id="test_div">Click anywhere on the map to close the popup<br/>Click on the marker and drag it ... the popup remains up<br/>Drag the map, the popup remains up.<br/>Once the popup has been closed, the marker can be moved again<br/>Clicking on the marker also closes the popup</div>';
  this.bindPopup(content_string, {
    minWidth: 350,
    closeButton: false
  }).on('popupopen', function(e) {
    isPoppedUp = true;
    console.log('popup open', 'isPoppedUp = ', isPoppedUp)
  }).openPopup().on('popupclose', function(e) {
    console.log('popup close', 'isPoppedUp = ', isPoppedUp);
    isPoppedUp = false;			//	try commenting this in and out
    this.dragging.enable();	//	try commenting this in and out
  });;
});
map.addLayer(marker);