JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css">
<div id="map"></div>

CSS

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

JavaScript

var geojson = [
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.03238901390978,38.913188059745586]
    },
    "properties": {
      "title": "Mapbox DC",
      "description": "1714 14th St NW, Washington DC",
      "marker-color": "#fc4353",
      "marker-size": "large",
      "marker-symbol": "monument"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-122.414, 37.776]
    },
    "properties": {
      "title": "Mapbox SF",
      "description": "155 9th St, San Francisco",
      "marker-color": "#fc4353",
      "marker-size": "small",
      "marker-symbol": "bicycle"
    }
  }
];

L.mapbox.map('map', 'examples.map-9ijuk24y')
  .setView([41.8819, -87.6278], 12)
  .featureLayer.setGeoJSON(geojson);