JSFiddle - React, Tailwind, and code Playground

by crashvector

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Sample Locations</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />

    <script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>

    <script type='text/javascript' src='https://unpkg.com/[email protected]/dist/leaflet.markercluster.js'></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js" integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ==" crossorigin=""></script>
    <!-- Leaflet.FeatureGroup.SubGroup assets -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.featuregroup.subgroup.js"></script>

  <body>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }

      #basemaps-wrapper {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 400;
        background: white;
        padding: 10px;
      }

      #basemaps {
        margin-bottom: 5px;
      }

    </style>

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

    <div id="basemaps-wrapper" class="leaflet-bar">
     ...

JavaScript

datajson = [{
    "Sample Name": "7411-2",
    "Date": "2017-09-05",
    "Lattitude": "40.3126",
    "Longitude": "-94.0277",
    "Location Description": "Lake 1",
    "Classification": "Unknown",
    "Empty": "1"
  },
  {
    "Sample Name": "7411-1",
    "Date": "2017-09-05",
    "Lattitude": "40.5999",
    "Longitude": "-93.7661",
    "Location Description": "Lake 2",
    "Classification": "Source",
    "Empty": "1"
  },
  {
    "Sample Name": "7406-3",
    "Date": "2017-07-31",
    "Lattitude": "39.4076",
    "Longitude": "-94.5555",
    "Location Description": "Lake 3",
    "Classification": "Background",
    "Empty": "1"
  },
  {
    "Sample Name": "7406-3",
    "Date": "2017-07-31",
    "Lattitude": "39.4076",
    "Longitude": "-94.5555",
    "Location Description": "Lake 3",
    "Classification": "Background",
    "Empty": "1"
  },
  {
    "Sample Name": "7411-2",
    "Date": "2017-09-05",
    "Lattitude": "41.3126",
    "Longitude": "-93.0277",
    "Location Description": "Lake 1",
    "Classification": "Blank",
    "Empty": "1"
  },
  {
    "Sample Name": "7411-1",
    "Date": "2017-09-05",
    "Lattitude": "39.5999",
    "Longitude": "-93.7661",
    "Location Description": "Lake 2",
    "Classification": "Source",
    "Empty": "1"
  },
  {
    "Sample Name": "7406-3",
    "Date": "2017-07-31",
    "Lattitude": "40.4076",
    "Longitude": "-92.5555",
    "Location Description": "Lake 3",
    "Classification": "Background",
    "Empty": "1"
  },
  {
    "Sample Name": "7406-3",
    "Date": "2017-07-31",
    "Lattitude": "39.3076",
    "Longitude": "-94.9955",
    "Location Description": "Lake 3",
    "Classification": "Background",
    "Empty": "1"
  },
  {
    "Sample Name": "7411-2",
    "Date": "2017-09-05",
    "Lattitude": "40.9926",
    "Longitude": "-91.0277",
    "Location Description": "Lake 1",
    "Classification": "Blank",
    "Empty": "1"
  },
  {
    "Sample Name": "7411-1",
    "Date": "2017-09-05",
    "Lattitude": "40.7299",
   ...