JSFiddle - React, Tailwind, and code Playground

by cantdutchthis

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  

<div id="map" class="leaflet-container leaflet-fade-anim" tabindex="0" style="position: relative;">

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>

CSS

body{
  margin: 0px;
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 600px;
}

svg {
  position: relative;
}

path {
  fill: brown;
  fill-opacity: .7;
  stroke: #fff;
  stroke-width: 6.5px;
}

path:hover {
  fill: brown;
  fill-opacity: .7;
}

JavaScript

var map = new L.Map("map", {center: [37.8, -96.9], zoom: 2})
    .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));

  window.myLayer = L.geoJson().addTo(map);
  
    map.on("mousemove", function(d){ 
        Object.keys(myLayer._layers).map(function(d){ myLayer.removeLayer( myLayer._layers[d] ) })

        var plotCoords = [];

        // green is the coordinate array for the landmass 
        var green = [ 
            [-46.76373672, 82.62796021],
                [-43.40642548, 83.22515869],
                [-39.89751434, 83.18018341],
                [-38.62212372, 83.54904938],
                [-35.08784866, 83.64512634],
                [-27.10043716, 83.51966095],
                [-20.84537506, 82.7266922],
                [-22.69181633, 82.34165192],
                [-26.51750374, 82.2976532],
                [-31.89998817, 82.19999695],
                [-31.39644814, 82.02153778],
                [-27.85665703, 82.13178253],
                [-24.84445381, 81.78697205],
                [-22.90326881, 82.09317017],
                [-22.07174301, 81.73448944],
                [-23.16959381, 81.15270996],
                [-20.62362289, 81.52462006],
                [-15.76816654, 81.9124527],
                [-12.77017975, 81.71884918],
                [-12.20854855, 81.29154205],
                [-16.28531837, 80.58003998],
                [-16.84998131, 80.34999847],
                [-20.04622841, 80.17707825],
                [-17.73034286, 80.12911987],
                [-18.89998817, 79.40000153],
                [-19.70498276, 78.75128174],
                [-19.67351532, 77.63858795],
                [-18.47282791, 76.98564911],
                [-20.03500748, 76.94434357],
                [-21.67941666, 76.62795258],
                [-19.83405113, 76.0980835],
                [-19.59894562, 75.24838257],
                [-20.66815376, 75.15585327],
                [-19.3727951, 74.29560852],
                [-21.59419632,...