JSFiddle - React, Tailwind, and code Playground

by Pro777

HTML

<script src="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css">
<script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<script src="api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js"></script>
<link rel="stylesheet" href="api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css">
<div id="map"></div>

CSS

#map {
    height: 340px;
}

JavaScript

var geometry = {
    "type": "Polygon",
    "coordinates": [
        [
            [-92.5691236230992, 40.9180322047359],
            [-92.5691236230992, 41.1418003561412],
            [-92.3493970606285, 41.1418003561412],
            [-92.3493970606285, 40.9180322047359],
            [-92.5691236230992, 40.9180322047359]
        ]
    ]
};

var mmp_polygon = geometry;
geometry.crs = {
    "type": "name",
    "properties": {
        "name": "EPSG:4326"
    }
};

var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
    .setView([41.9022517010637, -93.7140816297676], 8);

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

var drawControl = new L.Control.Draw({
    draw: {
        marker: false,
        rectangle: false,
        polyline: false,
        circle: false
    },
    edit: {
        featureGroup: featureGroup
    }
}).addTo(map);


var line_points = mmp_polygon.coordinates[0];

// Mapbox wants lat and long swapped
line_points.forEach(function (entry) {
    entry.reverse();
});


// Define polyline options
// http://leafletjs.com/reference.html#polyline
var polyline_options = {
    color: '#000'
};

// Defining a polygon here instead of a polyline will connect the
// endpoints and fill the path.
// http://leafletjs.com/reference.html#polygon
var polygon = L.polygon(line_points, polyline_options).addTo(featureGroup);

bounds = featureGroup.getBounds();
console.log("bounds");
console.log(JSON.stringify(bounds));
map.fitBounds(bounds, {
    padding: [50, 50]
});