JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 400px;
    width: 600px;
}

JavaScript

var map = L.map('map').setView([44.635, 22.653], 11);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var circle = L.circle([44.635, 22.653], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 40,
    draggable: true
}).addTo(map);

    circle.on({
          mousedown: function () {
            map.on('mousemove', function (e) {
              circle.setLatLng(e.latlng);
            });
          }
       }); 
       map.on('mouseup',function(e){
         map.removeEventListener('mousemove');
       })