mehak-sachdeva · November 21, 2022 22:28
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet Layers Control Example</title>
 	<meta charset="utf-8" />

 	<meta name="viewport" content="width=device-width, initial-scale=1.0">

 	<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
 	<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
 	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 	<style>
 		#map {
 			width: 1420px;
 			height: 760px;
 			align: center;
 		}

 		.info {
 			padding: 16px 10px;
 			font: 14px/16px Arial, Helvetica, 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 {
 			margin: 0 0 5px;
 			color: 'white';
 		}

 		.legend {
 			text-align: left;
 			line-height: 18px;
 			color: #555;
 		}
 		.legend i {
 			width: 18px;
 			height: 18px;
 			float: left;
 			margin-right: 8px;
 			opacity: 0.7;
 		}
 		button {
  	position:absolute;
  	top:410px;
 		}

 	</style>
 </head>
 <body>
 	<div id="map"></div>

 	<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
 	<script type="text/javascript">
 		var prim_res="https://raw.githubusercontent.com/mehak-sachdeva/state_voter_files/main/state_voter_files.geojson";

 		var map = L.map('map').setView([39.0119, -98.4842], 5);
 	
 		L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
 		}).addTo(map);

 		var info = L.control();

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

 		info.update = function(props) {
 			this._div.innerHTML = '<h4>US Voter Registration Data Availability 2016</h4>' +  '<br />' + (props ?
            '<b>Name of State: ' + props.NAME + '</b><br /></br />' +
            '<b>Number of voting precincts: ' + props.precincts_number + '</b><br /></br />' +
 							'<b>Price of voter registration files: $' + props.price + '</b><br /><br />' +
                            '<b>Party preference available? ' +props.preference + '</b><br />'
 				: 'Hover over a state');
 		};

 		info.addTo(map);


 		// get color depending on Bernie Sanders vote fractions value
 		function getColor(b, h) {
 			return b <=37000 & b>25000 ? '#49006a' :
                   b <=25000 & b>20000 ? '#7a0177' :
 			       b <=20000 & b>15000 ? '#ae017e' :
 						 b <= 15000 & b>5200 ? '#dd3497':
 						 b <=5200 & b>1200 ? '#f768a1':
 						 b <=1200 &  b>500 ? '#fa9fb5':
 						 b <= 500 & b>0 ? '#fcc5c0':
 			       			'#fde0dd' ;
 		}

 		function style(feature) {
 			return {
 				weight: 0.6,
 				opacity: 1,
 				color: 'white',
 				dashArray: '2',
 				fillOpacity: 0.6,
 				fillColor: getColor(feature.properties.price)
 			};
 		}


 		function highlightFeature(e) {
 			console.log('highlightFeature was entered');
 			var layer = e.target;

 			layer.setStyle({
 				weight: 2,
 				color: 'grey',
 				dashArray: '',
 				fillOpacity: 0.7
 			});

 			if (!L.Browser.ie && !L.Browser.opera) {
 				layer.bringToFront();
 			}

 			info.update(layer.feature.properties);
 		}

 		var geojson;

 		function resetHighlight(e) {
 			geojson.resetStyle(e.target);
 			info.update();
 		}

 		function zoomToFeature(e) {
 			console.log('zoomToFeature was triggered');
 			map.fitBounds(e.target.getBounds());
 			console.log(e);

 		}

 		function onEachFeature(feature, layer) {
 			console.log('onEachFeature was entered');
 			layer.on({
 				mouseover: highlightFeature,
 				mouseout: resetHighlight,
 				click: zoomToFeature
 			});
 		}

 		$.getJSON ("https://raw.githubusercontent.com/mehak-sachdeva/state_voter_files/main/state_voter_files.geojson", function(data) {
 			console.log('geojson retrieved');
 			geojson = L.geoJson(data, {
 				style: style,
 				onEachFeature: onEachFeature
 			}).addTo(map);
 		});


 		var legend = L.control({position: 'bottomright'});

 		legend.onAdd = function (map) {

 			var div = L.DomUtil.create('div', 'info legend'),
 				grades = [37000.0,25000,20000,15000.0,5200.0,1200.0,500.0,0.0],
 				labels = ['<strong>Price estimate for voter files</strong>'],
 				from, to;
 			var x=30000;

 			for (var i = 0; i < grades.length; i++) {
 				from = grades[i];
 				to = grades[i + 1];

 				labels.push(
 					'<i style="background:' + getColor(from,to-1) + '"></i> ' +
 					from + (to ? '&ndash;' + to : '+'));
 					x-=0.14;
 			}

 			div.innerHTML = labels.join('<br>');
 			return div;
 		};

 		legend.addTo(map);

 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet Layers Control Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
	<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

	<style>
	#map {
	width: 1420px;
	height: 760px;
	align: center;
	}

	.info {
	padding: 16px 10px;
	font: 14px/16px Arial, Helvetica, 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 {
	margin: 0 0 5px;
	color: 'white';
	}

	.legend {
	text-align: left;
	line-height: 18px;
	color: #555;
	}
	.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
	}
	button {
	position:absolute;
	top:410px;
	}

	</style>
	</head>
	<body>
	<div id="map"></div>

	<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
	<script type="text/javascript">
	var prim_res="https://raw.githubusercontent.com/mehak-sachdeva/state_voter_files/main/state_voter_files.geojson";

	var map = L.map('map').setView([39.0119, -98.4842], 5);

	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attributions">CARTO</a>'
	}).addTo(map);

	var info = L.control();

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

	info.update = function(props) {
	this._div.innerHTML = '<h4>US Voter Registration Data Availability 2016</h4>' + '<br />' + (props ?
	'<b>Name of State: ' + props.NAME + '</b><br /></br />' +
	'<b>Number of voting precincts: ' + props.precincts_number + '</b><br /></br />' +
	'<b>Price of voter registration files: $' + props.price + '</b><br /><br />' +
	'<b>Party preference available? ' +props.preference + '</b><br />'
	: 'Hover over a state');
	};

	info.addTo(map);


	// get color depending on Bernie Sanders vote fractions value
	function getColor(b, h) {
	return b <=37000 & b>25000 ? '#49006a' :
	b <=25000 & b>20000 ? '#7a0177' :
	b <=20000 & b>15000 ? '#ae017e' :
	b <= 15000 & b>5200 ? '#dd3497':
	b <=5200 & b>1200 ? '#f768a1':
	b <=1200 & b>500 ? '#fa9fb5':
	b <= 500 & b>0 ? '#fcc5c0':
	'#fde0dd' ;
	}

	function style(feature) {
	return {
	weight: 0.6,
	opacity: 1,
	color: 'white',
	dashArray: '2',
	fillOpacity: 0.6,
	fillColor: getColor(feature.properties.price)
	};
	}


	function highlightFeature(e) {
	console.log('highlightFeature was entered');
	var layer = e.target;

	layer.setStyle({
	weight: 2,
	color: 'grey',
	dashArray: '',
	fillOpacity: 0.7
	});

	if (!L.Browser.ie && !L.Browser.opera) {
	layer.bringToFront();
	}

	info.update(layer.feature.properties);
	}

	var geojson;

	function resetHighlight(e) {
	geojson.resetStyle(e.target);
	info.update();
	}

	function zoomToFeature(e) {
	console.log('zoomToFeature was triggered');
	map.fitBounds(e.target.getBounds());
	console.log(e);

	}

	function onEachFeature(feature, layer) {
	console.log('onEachFeature was entered');
	layer.on({
	mouseover: highlightFeature,
	mouseout: resetHighlight,
	click: zoomToFeature
	});
	}

	$.getJSON ("https://raw.githubusercontent.com/mehak-sachdeva/state_voter_files/main/state_voter_files.geojson", function(data) {
	console.log('geojson retrieved');
	geojson = L.geoJson(data, {
	style: style,
	onEachFeature: onEachFeature
	}).addTo(map);
	});


	var legend = L.control({position: 'bottomright'});

	legend.onAdd = function (map) {

	var div = L.DomUtil.create('div', 'info legend'),
	grades = [37000.0,25000,20000,15000.0,5200.0,1200.0,500.0,0.0],
	labels = ['<strong>Price estimate for voter files</strong>'],
	from, to;
	var x=30000;

	for (var i = 0; i < grades.length; i++) {
	from = grades[i];
	to = grades[i + 1];

	labels.push(
	'<i style="background:' + getColor(from,to-1) + '"></i> ' +
	from + (to ? '–' + to : '+'));
	x-=0.14;
	}

	div.innerHTML = labels.join('<br>');
	return div;
	};

	legend.addTo(map);

	</script>
	</body>
	</html>