JSFiddle - React, Tailwind, and code Playground

by manusvs650

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.css">
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.3/mapbox.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js"></script>
<div id='map'></div>

CSS

body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([51.505, -0.09], 13);

var featureGroup = L.featureGroup().addTo(map);

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -0.11509895324707031,
              51.49982034350772
            ],
            [
              -0.11509895324707031,
              51.50500286265417
            ],
            [
              -0.1041126251220703,
              51.50500286265417
            ],
            [
              -0.1041126251220703,
              51.49982034350772
            ],
            [
              -0.11509895324707031,
              51.49982034350772
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.09698867797851562,
          51.502171249972655
        ]
      }
    }
  ]
}


L.geoJson(geojson, {
  style: function (feature) {
    return {color: feature.properties.color};
  },
  onEachFeature: function (feature, layer) {
    layer.bindPopup("hello");
  }
}).addTo(featureGroup);


  var drawControl = new L.Control.Draw({
    edit: {
      featureGroup: featureGroup
    }
  }).addTo(map);