JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

JavaScript

<!DOCTYPE html>
<html>

<head>
  <!-- Leaflet assets -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

  <!-- Leaflet.StyledLayerControl assets -->
  <link rel="stylesheet" href="https://davicustodio.github.io/Leaflet.StyledLayerControl/css/styledLayerControl.css" />
  <script src="https://davicustodio.github.io/Leaflet.StyledLayerControl/src/styledLayerControl.js"></script>

  <!-- Leaflet.markercluster assets -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>

  <!-- Leaflet.markercluster.layersupport assets -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.layersupport-src.js"></script>

  <style>
    #map {
      height: 700px;
      border: 1px solid black;
    }
  </style>
</head>

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

  <script>
    var base = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });

    var zoomLevel = 13;
    var setLat = 35.593464;
    var setLong = -82.551934;

    var map = L.map('map', {
      center: [setLat, setLong],
      zoom: zoomLevel
    });
    map.addLayer(base);


    var mondayFood = [{
      "name": "Storm Rhum Bar & Bistrot",
      "deal": "$10 burger, fries, and a beer or glass of wine",
      "address": "",
      "website": "",
      "lat":...