JSFiddle - React, Tailwind, and code Playground

by Dwi Adi Laksono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

// center of the map
var center = [-33.8650, 151.2094];

// Create the map
var map = L.map('map').setView(center, 10);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

// add a marker in the given location
var marker=L.marker(center).addTo(map);

 var makeDraggable=function (popup){
      var pos = map.latLngToLayerPoint(popup.getLatLng());
      L.DomUtil.setPosition(popup._wrapper.parentNode, pos);
      var draggable = new L.Draggable(popup._container, popup._wrapper);
      draggable.enable();
      
      draggable.on('dragend', function() {
        var pos = map.layerPointToLatLng(this._newPos);
        popup.setLatLng(pos);
      });
    }
    

marker.bindPopup('hello world');

 marker.on('click',function(event){
                  
                    var popup=event.target.getPopup();
                        
                    makeDraggable(popup);    
                })