JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>   
   

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

CSS

html, body, #map {height:100%;width:100%;padding:0px;margin:0px;}
.leaflet-popup { width: 201px!important;}

JavaScript

var lati = '41.49512'; // 41.49512, 2.36385
var logi = '2.36385';

var map = L.map('map').setView([lati, logi], 18);

L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
		subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);

//var marker = L.marker([lati, logi]).addTo(map);

var CircleMJ1 = new L.CircleMarker([lati, logi],{
    radius: 6,
    stroke: true,
    color: "#000000",
    weight: 2,
    opacity: 1,
    fill: true,
    fillColor: "#FFFF00",
    fillOpacity: 1,
    draggable: true,
    interactive: true, 
    dragEnabled:true,
    clickable: true,
    }).addTo(map);
    
var circle = L.circle([lati, logi], {
    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');
       })

var myMarker = L.marker([lati, logi], {draggable: true}).addTo(map);
  //  myMarker.addTo(map);

  circle.on('drag', function(e) {
    
    var coord = e.latlng.toString().split(',');
    var lat = coord[0].split('(');
    var lng = coord[1].split(')');
    
    circle.bindPopup("<b>Lat: </b>" + lat[1]+"<br><b>Long: </b>" +lng[0]+
      "<br><b>Coords:</b> "+ e.latlng.lat.toFixed(5)+","+e.latlng.lng.toFixed(5)).openPopup();
  });
  
  
  map.on('click', function(e) {

  var Add40m = ((41/6378137) * (180/Math.PI));
  var Add80m = (((81-41)/6378137) * (180/Math.PI));
  var LocBuCo = new L.latLng (0,0);

  var Circle40m = new L.circle (e.latlng,{                  
    radius: 40,
          stroke: true,
          color: "#000000",
          weight: 1,
          opacity: 1,
          fill: true,
          fillColor: "#ffff00",
          fillOpacity: 0.2,
    interactive: false,
    clickable: false,
    }).addTo(map);
  
var Circle80m = new L.circle (e.latlng,{         ...