JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css">
<b>GeoJSON Haiti</b>
<div id="mymap" style="width:450px;height:430px;"></div>
<p>
  <cite><a href="https://courses.p2pu.org/en/groups/online-maps-with-leaflet/content/geojson-in-leafletjs/">GeoJSON in Leaflet.js</a></cite>
</p>

CSS

html,
body {
  width: 100%;
  height: 100%, margin: 0;
  padding: 0;
}

#mymap {
  width: 100%;
  height: 100%;
}

JavaScript

// create a map
map = new L.Map('mymap');

// create the OpenStreetMap layer
osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png";
osmCopyright = "Map data &copy; 2012 OpenStreetMap contributors";
osmLayer = new L.TileLayer(osmTile, {
  maxZoom: 18,
  attribution: osmCopyright
});
map.addLayer(osmLayer);

// set the map's starting view
map.setView(new L.LatLng(19.5, -73), 7);

// include GeoJSON inside this JavaScript
var haiti = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Haiti"
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-73.189791, 19.915684],
          [-72.579673, 19.871501],
          [-71.712361, 19.714456],
          [-71.624873, 19.169838],
          [-71.701303, 18.785417],
          [-71.945112, 18.6169],
          [-71.687738, 18.31666],
          [-71.708305, 18.044997],
          [-72.372476, 18.214961],
          [-72.844411, 18.145611],
          [-73.454555, 18.217906],
          [-73.922433, 18.030993],
          [-74.458034, 18.34255],
          [-74.369925, 18.664908],
          [-73.449542, 18.526053],
          [-72.694937, 18.445799],
          [-72.334882, 18.668422],
          [-72.79165, 19.101625],
          [-72.784105, 19.483591],
          [-73.415022, 19.639551],
          [-73.189791, 19.915684]
        ]
      ]
    },
    "id": "HTI"
  }]
};

L.geoJson(haiti, {
  style: function(feature) {
    return {
      opacity: 0,
      fillOpacity: 0.5,
      fillColor: "#0f0"
    };
  },
  onEachFeature: function(feature, layer) {
    layer.bindPopup("Hello " + feature.properties.name);
  }
}).addTo(map);