JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Leaflet.draw drawing and editing tools</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.draw.js"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px; border: 1px solid #ccc"></div>
<button id="changeColor">Rectangle -> Blue</button>
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
map = new L.Map('map', {layers: [osm], center: new L.LatLng(51.509, -0.08), zoom: 14 });
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var polyLayers = [];
var polygon1 = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
polyLayers.push(polygon1)
var polygon2 = L.polygon([
[51.512642, -0.099993],
[51.520387, -0.087633],
[51.509116, -0.082483]
]);
polyLayers.push(polygon2)
// Add the layers to the drawnItems feature group
for(layer of polyLayers) {
drawnItems.addLayer(layer);
}
// Set the title to show on the polygon button
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';
var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: {
metric: true
},
polygon: {
allowIntersection: false,
showArea: true,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
}
},
circle: {
shapeOptions: {
color: '#662d91'
}
},
marker: false
},
edit: {
featureGroup: drawnItems,
remove:...