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='map0' class='map'></div>
<div id='map1' class='map'></div>

CSS

.map {
    height: 400px;
    border: 2px solid red;
}
button {
    margin-top:5px;
}

JavaScript

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

function initMap() {
  const myArray = ['first', 'second'];
  myArray.forEach((element, index) => {
    // set up the map
    const map = new L.Map('map' + index, {zoomControl: false});

    // 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);
    myMaps.push(map);
    addMarker(element, map);
    createCircles(map);
  })
}

initMap();

function addMarker(element, map) {
  let mark = L.marker([51.503, -0.06], {
      draggable: true,
      autoPan: true
    });
    mark.bindPopup(element).openPopup();
    mark.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(map) {
  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;
    })
  })
}