JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<div id="mapid"></div>

CSS

body {
  padding: 0;
  margin: 0;
}

#mapid {
  height: 100vh;
  width: 100vw; 
}

JavaScript

var map = L.map('mapid', {center:[50.88676,-114.0937], selectArea: true, maxZoom: 24, zoom: 17, zoomControl: false, attributionControl: false});

var buildingGeoJSON =  {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "PERIMETER": "292.88 m", "ENCLOSED_AREA": "0.00532 sq km", "LENGTH": "78.053 m", "WIDTH": "68.386 m" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -114.097821, 50.887203 ], [ -114.096849, 50.887203 ], [ -114.096849, 50.886501 ], [ -114.097821, 50.886501 ], [ -114.097821, 50.887203 ] ] ] } },
{ "type": "Feature", "properties": { "PERIMETER": "244.23 m", "ENCLOSED_AREA": "0.003714 sq km", "LENGTH": "61.15 m", "WIDTH": "60.963 m" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -114.096535, 50.886900 ], [ -114.095666, 50.886900 ], [ -114.095666, 50.886352 ], [ -114.096535, 50.886352 ], [ -114.096535, 50.886900 ] ] ] } },
{ "type": "Feature", "properties": { "PERIMETER": "276.78 m", "ENCLOSED_AREA": "0.003515 sq km", "LENGTH": "104.68 m", "WIDTH": "33.707 m" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -114.095332, 50.887485 ], [ -114.094853, 50.887485 ], [ -114.094853, 50.886544 ], [ -114.095332, 50.886544 ], [ -114.095332, 50.887485 ] ] ] } },
{ "type": "Feature", "properties": { "PERIMETER": "139.02 m", "ENCLOSED_AREA": "0.000322 sq km", "LENGTH": "64.496 m", "WIDTH": "5.012 m" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -114.096268, 50.888200 ], [ -114.096197, 50.888200 ], [ -114.096197, 50.887620 ], [ -114.096268, 50.887620 ], [ -114.096268, 50.888200 ] ] ] } },
{ "type": "Feature", "properties": { "PERIMETER": "92.836 m", "ENCLOSED_AREA": "0.0001819 sq km", "LENGTH": "42.079 m", "WIDTH": "4.339 m" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -114.095766, 50.888029 ], [ -114.095168, 50.888029 ], [ -114.095168, 50.887990 ], [ -114.095766, 50.887990 ], [ -114.095766, 50.888029 ] ] ] } },
{ "type": "Feature", "properties": { "PERIMETER": "141.48 m",...