JSFiddle - React, Tailwind, and code Playground

by pkeller3

HTML

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

CSS

#map {
    height: 400px;
}
button {
    margin-top:5px;
}

JavaScript

let map;
let circleCoords = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
];
let myCircle;

function initMap() {
  // set up the map
  map = new L.Map('map');

  // create the tile layer with correct attribution
  const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  const osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
  const osm = new L.TileLayer(osmUrl, {
    minZoom: 8,
    maxZoom: 15,
    attribution: osmAttrib
  });

  // start the map 
  map.setView(new L.LatLng(51.503, -0.06), 13);
  map.addLayer(osm);

  addMarker();
  createCircles();
}

initMap();

function addMarker() {
  L.marker([51.503, -0.06], {
      draggable: true,
      autoPan: true
    })
    .addTo(map).on('move', masterClick);
}

function masterClick(e) {
  var d = e.latlng.distanceTo(myCircle.getLatLng());
  var isInside = d < myCircle.getRadius();
  myCircle.setStyle({
    fillColor: isInside ? "green" : "#f03"
  });
}

function createCircles() {
  circleCoords.forEach(circ => {
    const ll = L.latLng(circ[0], circ[1]);
    let curCirc = L.circle(ll, {
      radius: 100
    }).addTo(map);
    curCirc.on('mouseover', (evt) => {
      myCircle = evt.target;
    })
  })
}