JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/examples/sample-geojson.js" type="text/javascript"></script>
    <script src="http://leafletjs.com/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([42.9925, -7.547], 16);

var sector1 = {"type": "FeatureCollection", "features": [{ "type": "Feature", "id": 8, 
"properties": { "style": {weight:2,color:"#f00",opacity:0.2,fillColor:"#88f",fillOpacity:0.5}, 
"SEC": "This is sector 1"},
"geometry":{"type":"Polygon","coordinates":[[[-7.550598,42.991604],[-7.549692,42.991823],[-7.549548,42.991958],[-7.549413,42.992311],[-7.548882,42.992356],[-7.548688,42.992495],[-7.548561,42.991993],[-7.550413,42.991451],[-7.550598,42.991604]]]} } ]}; 

var sector2 = {"type": "FeatureCollection", "features": [{ "type": "Feature", "id": 9, 
"properties": { "style": {weight:2,color:"#f00",opacity:0.2,fillColor:"#88f",fillOpacity:0.5}, 
"SEC": "This is sector 2"},
"geometry":{"type":"Polygon","coordinates":[[[-7.550413,42.991451],[-7.548346,42.992047],[-7.548259,42.991535],[-7.548290,42.991207],[-7.549082,42.991176],[-7.549890,42.991169],[-7.550413,42.991451]]]} } ]};

var sector3 = {"type": "FeatureCollection", "features": [{ "type": "Feature", "id": 3, 
"properties": { "style": {weight:2,color:"#f00",opacity:0.2,fillColor:"#88f",fillOpacity:0.5}, 
"SEC": "This is sector 3"},
"geometry":{"type":"Polygon","coordinates":[[[-7.545718,42.994741],[-7.544462,42.992503],[-7.544543,42.992517],[-7.545511,42.992671],[-7.545718,42.994741]]]} } ]};
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: '',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);

        function onEachFeature(feature, layer) {
            var popupContent = 'Feature id: ' + feature.id;
            layer.bindPopup(popupContent);
        }

        L.geoJson([sector1],{
            style: function (feature) {
               ...

CSS

</style>
<!-- access to the HEAD element -->
    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css" /><![endif]-->
<style>