JSFiddle - React, Tailwind, and code Playground

by Jason Bellis

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.16.0/mapbox-gl-draw.js"></script>
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.16.0/mapbox-gl-draw.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css">
<body>
<div id='map'></div>
</body>

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoic3Rvb2t5IiwiYSI6ImNpZWxncnU5MDAwYTNzZWt1N2VoNHBiajYifQ.PPBpAP3rWcAAnMiAu1iJLg';

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 12.5,
    center: [-77.01866, 38.888],
    style: 'mapbox://styles/mapbox/streets-v10',
    hash: true
});
var Draw = new MapboxDraw();

map.addControl(Draw)


var poly1 = turf.polygon([[-77.040937, 38.888811], [-77.0407405, 38.8894235], [-77.04821451, 38.8896149], [-77.4816534,38.8890002], [-77.040937, 38.888811]]);
//var poly2 = turf.polygon[]

var feature = Draw.add(poly1);

Draw.select(feature);
//Draw.add(poly2);