JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
<script src="http://02d0c8c.netsolhost.com/dev/js/LCB_Census_Towns.js"></script>
<body onload="init()">Synchronize Leaflet LayerControl with Legend
    <div id="map"></div>
</body>

CSS

#map {
			width: 750px;
			height: 580px;
		}
		.info {
    		padding: 6px 8px;
    		font: 14px/16px Verdana, Geneva, sans-serif;
    		background: white;
    		background: rgba(255,255,255,0.8);
    		box-shadow: 0 0 15px rgba(0,0,0,0.2);
    		border-radius: 5px;
		}
		.info h4 {
    		font-family: Verdana, Geneva, sans-serif;
    		margin: 0 0 5px;
    		color: #065581;
		}
		.legend {
    		line-height: 18px;
    		color: #555;
		}
		.legend i {
    		width: 18px;
    		height: 18px;
    		float: left;
    		margin-right: 8px;
    		opacity: 0.7;
		}

JavaScript

var map, populationLegend, populationChangeLegend, populationstatsLegend, debugvar, populationLegend_active,populationChangeLegend_active,populationstatsLegend_active;

 function init() {
     
     
     
     map = L.map('map').setView([44.3, -73.1], 8);
		var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/d2a498d874144e7dae5e7ab4807f3032/{styleId}/256/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
			key: 'BC9A493B41014CAABB98F0471D759707',
			styleId: 22677
		}).addTo(map);

		// control that shows state info on hover
		var info = L.control({position: 'bottomleft'});

		info.onAdd = function (map) {
    		this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    		this.update();
    		return this._div;
		};

		// method that we will use to update the control based on feature 			properties passed
		info.update = function (props) {
    		this._div.innerHTML = '<h4>Lake Champlain Basin Population</h4>' +  (props ?
        '<b>Town: ' + props.NAME10 + '</b><br />Population (US: 2010, QC: 2011):<strong> ' + props.POP2010 + '</strong><br />Population Density:<strong> ' + props.POP_DEN_10 + '</strong><br />Population change (US: 1970-2010,<br />QC: 2001-2011): <strong>' + props.CHNG_COMB + '%</strong><br /><br />2000 Population: ' + props.POP2000 + '<br />1990 Population: ' + props.POP1990 + '<br />1980 Population: ' + props.POP1980 + '<br />1970 Population: ' + props.POP1970 
        : '<b>Hover over a town</b>');
		};

		info.addTo(map);

		//STYLES FOR POPULATION MAP
		
		// get color for Population Map depending on population value
		function getColor2(d) {
			return d > 15000  ? '#006D2C' :
			       d > 10000  ? '#31A354' :
			       d > 5000  ? '#74C476' :
			       d > 2500   ? '#A1D99B' :
			       d > 0   ? '#C7E9C0' :
			                  '#1C9099';
		}

		function style2(feature) {
			return {
				weight: 2,
				opacity: 1,
				color:...