JSFiddle - React, Tailwind, and code Playground

by Thibault Coupin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css">
<script src="https://gitcdn.xyz/repo/tcoupin/leaflet-paintpolygon/master/dist/Leaflet.PaintPolygon.js"></script>
<div id="map">

</div>

CSS

#map {
  height: 400px;
  width: 600px;
}

JavaScript

var map = L.map('map').setView([43.605413, 3.879568], 10);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 20,
	ext: 'png'
}).addTo(map);

var style = { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }
 var paintpolygonControl = L.control.paintPolygon({drawOptions: style}).addTo(map);