fix

Author: trivisonno

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+*.qmd

index.html

@@ -67,8 +67,6 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
 
 <div id='map'></div>
 
-<script type="text/javascript" src="js/fbc.js"></script>
-<script type="text/javascript" src="js/fbc-large-zones.js"></script>
 <script type="text/javascript" src="js/permitted-use-table-by-zone.js"></script>
 
 <script type="text/javascript">
@@ -78,9 +76,6 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
 				keyboard: false
 			})
 
-		
-		
-
     const colors = {
         'C3': {'color': 'f1dbda', 'name': 'C3 Community 3'}, 
         'C4': {'color': 'c4a4a6', 'name': 'C4 Community 4'},
@@ -104,41 +99,17 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
         'UX4': {'color': 'afbcc2', 'name': 'UX4 Urban Flex 4'},
         'UX5': {'color': '6f809a', 'name': 'UX5 Urban Flex 5'}
     }
-	const map = L.map('map').setView([41.496273, -81.633495], 13);
+	const map = L.map('map').setView([41.495721047150596, -81.67991638183595], 13);
 
 	const tiles = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.{ext}', {
-	minZoom: 0,
-	maxZoom: 20,
-	ext: 'png'}).addTo(map);
-
-	// control that shows state info on hover
-	const info = L.control();
-
-	info.onAdd = function (map) {
-		this._div = L.DomUtil.create('div', 'info');
-		this.update();
-		return this._div;
-	};
-
-	info.update = function (props) {
-		const contents = props ? `<b>Parcel PIN: ${props.parcelpin}</b><br />Zoning District: ${colors[props.fbc_zoning]['name']}` : 'Hover over a parcel';
-		// this._div.innerHTML = `<h4>Cleveland's Form-Based Zoning Code</h4>${contents}`;
-	};
-
-	// info.addTo(map);
-
+		minZoom: 0,
+		maxZoom: 20,
+		ext: 'png'}
+	).addTo(map);
 
 	// get color depending on population density value
 	function getColor(d) {
-        // console.log(d)
         return '#'+colors[d]['color'];
-		return d > 1000 ? '#800026' :
-			d > 500  ? '#BD0026' :
-			d > 200  ? '#E31A1C' :
-			d > 100  ? '#FC4E2A' :
-			d > 50   ? '#FD8D3C' :
-			d > 20   ? '#FEB24C' :
-			d > 10   ? '#FED976' : '#FFEDA0';
 	}
 
 	function style(feature) {
@@ -174,13 +145,11 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
 		});
 
 		layer.bringToFront();
-
-		// info.update(layer.feature.properties);
 	}
 
 	/* load parcels in the FBC areas */
 	var geojson;
-	fetch('js/fbc-parcels.geojson')  // Replace with the path to your GeoJSON file
+	fetch('js/fbc-parcels.geojson')
 		.then(response => {
 			if (!response.ok) {
 				throw new Error("Network response was not ok");
@@ -194,24 +163,34 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
 			}).addTo(map);
 			map.fitBounds(geojson.getBounds());
 		});
-		
-	
 
-	// add zone labels
-	const geojsonZones = L.geoJson(zones, {
-		style: styleZones,
-		interactive: false,
-		onEachFeature: function (feature, layer) {
-			var centroid = turf.centroid(feature);
-			var latLng = L.latLng(centroid.geometry.coordinates[1], centroid.geometry.coordinates[0]);
-			var tooltip = L.tooltip({
-			permanent: true,
-			direction: 'center',
-			className: 'geojson-label'
-			}).setContent(feature.properties.fbc_zoning).setLatLng(latLng);
-			layer.bindTooltip(tooltip);
-		}	
-	}).addTo(map);
+	var geojsonZones;
+	fetch('js/fbc-large-zones.geojson')
+		.then(response => {
+			if (!response.ok) {
+				throw new Error("Network response was not ok");
+			}
+			return response.json();
+		})
+		.then(data => {
+			geojsonZones = L.geoJson(data, {
+				style: styleZones,
+				interactive: false,
+				onEachFeature: function (feature, layer) {
+					var centroid = turf.centroid(feature);
+					var latLng = L.latLng(centroid.geometry.coordinates[1], centroid.geometry.coordinates[0]);
+					var tooltip = L.tooltip({
+						permanent: true,
+						direction: 'center',
+						className: 'geojson-label'
+					}).setContent(feature.properties.fbc_zoning).setLatLng(latLng);
+					layer.bindTooltip(tooltip);
+				}	
+			}).addTo(map);
+			map.fire('zoomend');
+		});
+
+
 
 	function resetHighlight(e) {
 		geojson.resetStyle(e.target);
@@ -254,67 +233,7 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
 			mouseout: resetHighlight,
 			click: openThePopup
 		});
-		
-			// popup_data = '<h2>Parcel '+feature.properties.parcelpin+' <a target="_blank" href="http://neocando.case.edu/cando/propLaunch.jsp?type=aud&parcel='+feature.properties.parcelpin+'"><i class="fa-solid fa-link"></i></a></h2><h3>Zoning: '+colors[feature.properties.fbc_zoning]['name']+'</h3><div style="height:100px;overflow:hidden;overflow-y:scroll;"><b>Property Uses:</b><br><table class="table table-striped">';
-
-			// for (const [key, value] of Object.entries(permitted_uses_by_zone[feature.properties.fbc_zoning])) {
-			// 	if (value == 'P') {
-			// 		text_value = '<i class="fa-regular fa-circle-check"></i></td><td>OK'
-			// 	} else if (value == 'C') {
-			// 		text_value = '<i class="fa-solid fa-triangle-exclamation"></i></td><td>Conditional, CPC approval req.'
-			// 	} else if (value == 'P*') {
-			// 		text_value = '<i class="fa-regular fa-circle-check"></i></td><td>OK, w/rules'
-			// 	} else if (value == 'C*') {
-			// 		text_value = '<i class="fa-solid fa-triangle-exclamation"></i></td><td>Conditional, CPC approval req. & w/rules'
-			// 	} else if (value == 'NP') {
-			// 		text_value = '<i class="fa-solid fa-square-xmark"></i></td><td>Variance req.'
-			// 	}
-			// 	popup_data += `<td>${key}</td><td> ${text_value}</td>`;
-			// }
-			// popup_data += "</table>";
-			// popup_data += '<img width=200 src="imgs/'+feature.properties.fbc_zoning + '-SITE.jpg"><br><img width=200 src="imgs/'+feature.properties.fbc_zoning + '-BUILDING.jpg"></div>';
-			
-			// layer.bindPopup(popup_data, {
-			// 	maxWidth : 560
-			// });
-
-			
-
-			
-		
 	}
-
-	
-
-	const legend = L.control({position: 'bottomright'});
-
-	legend.onAdd = function (map) {
-
-		const div = L.DomUtil.create('div', 'info legend');
-		const grades = [0, 10, 20, 50, 100, 200, 500, 1000];
-		const labels = [];
-        const zones = ['C3', 'C4', 'CV', 'CX3', 'CX4']
-        
-		let from, to;
-
-		// for (let i = 0; i < zones.length; i++) {
-		// 	// from = grades[i];
-		// 	// to = grades[i + 1];
-
-		// 	labels.push(`<i style="background:#${colors[zones[i]]}"></i> ${zones[i]}`);
-		// }
-
-        for (const [key, value] of Object.entries(colors)) {
-            labels.push(`<i style="background:#${value['color']}"></i> ${value['name']}`);
-        }
-
-		div.innerHTML = labels.join('<br>');
-		return div;
-	};
-
-	// legend.addTo(map);
-
-
 	// Minimum zoom level for labels to be visible
     var minLabelZoom = 16;
 
@@ -335,8 +254,5 @@ <h4 class="modal-title" id="exampleModalLabel"></h4>
     map.fire('zoomend');
 
 </script>
-
-
-
 </body>
-</html>
+</html>