JSFiddle - React, Tailwind, and code Playground

by pertrai1

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>
<style>
#mapid {
  height: 400px;
}
</style>
<div id="mapid"></div>

JavaScript

// Create the map and set the view and some properties
var myMap = L.map('mapid').setView([-38.3, -8], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  // maxZoom: 5,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(myMap);

var dataset = {
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3613558,
          -8.8044875
        ]
      },
      "properties": {
        "Ordem": "193",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Petrolândia",
        "Estado": "PE",
        "Nome da Comunidade": "Agrovila 4"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3445892,
          -8.7940031
        ]
      },
      "properties": {
        "Ordem": "194",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Petrolândia / Floresta",
        "Estado": "PE",
        "Nome da Comunidade": "Agrovila 5"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -37.8521847,
          -8.6774657
        ]
      },
      "properties": {
        "Ordem": "195",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Inajá/Ibimirim",
        "Estado": "PE",
        "Nome da Comunidade": "Indígena Kambiwá - Baxa da Alexandra"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -37.9229577,
          -8.645232
        ]
      },
      "properties": {
        "Ordem":...