JSFiddle - React, Tailwind, and code Playground

by eid

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<div id="map" ></div>
	<div id="legend"></div>
	<div id="bLeftPanel"></div>
	<div id="bRightPanel">
		<div id = "actionDiv" style = "margin: 2em">
		Action: 
		<select id = "action" >
			<option value="rectangle">create rectangle</option>
			<option value="nothing">do nothing</option>
		</select>
		</div>
	</div>

CSS

#map {
			width: 95%; 
			height: 95%; 
			position: fixed
		}
		#legend {
			width: 20em;
			height: 100%;
			background-color: white;
			z-index: 200;
			position: absolute;
			right: 0;
		}
		#bLeftPanel{
			height: 5em;
			width: 100%;
			background-color: red;
			z-index: 200;
			position: absolute;
			bottom:0
		}
		#bRightPanel{
			height: 5em;
			width: 20em;
			background-color: blue;
			z-index: 300;
			position: absolute;
			bottom:0;
			right: 0;

		}

JavaScript

var map;
var popup

var infoMarkers = [];
var resizeMarkers = [];
var moveMarkers = [];
var rectangles = [];
var creatingRectangle = false;
/* 
var moveMarkerStyle = {"opacity": 0.5, "draggable" : true}
 
$( document ).ready(function() {
	generateMap()
	setSquareAction()
})

function generateMap(){
	console.log("generating map")
	map = L.map('map').setView([51.505, -0.09], 13);
	
	L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
					'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
					'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'examples.map-i86knfo3'
	}).addTo(map);

}	

 var resizeIcon = L.icon({
	iconUrl: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQkX_n7r9bKw37lJOudLMcm22LobJgto4c2DS3JenpITj57fJIE66VcBw',
	iconSize:     [50, 50],
}); */


$( document ).ready(function() {
	map = L.map('map').setView([51.505, -0.09], 6);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		maxZoom: 18
	}).addTo(map);
	map.on('click', doRectangle);

})

var queryR = L.Rectangle.extend({
    bounds : [],
	centralMarker : '',
	originalCenter: '',
	infoMarker: '',
	resizeMarker: '',
	id:0,
	infoContent: "",
    
	createInfoContent: function(){
		var content = "<div class = 'infoPopup' id = '" + this.id + "'>"
			content +=
			content += "<p><select class = 'addLinkSelect' " + this.id + ">"
			content += "</select><button class= 'addLink'>add link</button></p>"
			content += "<p><button class = 'delete'>delete</button></p>"
			content += "</div>"
		this.infoContent = content
	},

    calculateCenterLL: function(){
        var lats = [this.bounds["_southWest"]["lat"], this.bounds["_northEast"]["lat"]]
        var lons = [this.bounds["_southWest"]["lng"], this.bounds["_northEast"]["lng"]]
        var WBound = Math.min.apply(Math, lons);
        var EBound = Math.max.apply(Math,...