|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>California Social Vulnerability Index Map</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" /> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css" /> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" /> |
|
<style> |
|
body { margin: 0; padding: 0; } |
|
#map { height: 100vh; } |
|
#search { |
|
position: absolute; |
|
top: 10px; |
|
left: 50px; |
|
z-index: 1000; |
|
background: white; |
|
padding: 10px; |
|
border-radius: 5px; |
|
} |
|
#legend { |
|
position: absolute; |
|
bottom: 30px; |
|
right: 10px; |
|
z-index: 1000; |
|
background: white; |
|
padding: 10px; |
|
border-radius: 5px; |
|
} |
|
.legend-color { |
|
width: 20px; |
|
height: 20px; |
|
display: inline-block; |
|
margin-right: 5px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="search"> |
|
<input type="text" id="location-input" placeholder="Enter ZIP code or City"> |
|
<button onclick="searchLocation()">Search</button> |
|
</div> |
|
<div id="map"></div> |
|
<div id="legend"> |
|
<h4>SVI Score</h4> |
|
<div><span class="legend-color" style="background-color: #FFEDA0;"></span> 0.0 - 0.2</div> |
|
<div><span class="legend-color" style="background-color: #FC4E2A;"></span> 0.2 - 0.4</div> |
|
<div><span class="legend-color" style="background-color: #E31A1C;"></span> 0.4 - 0.6</div> |
|
<div><span class="legend-color" style="background-color: #BD0026;"></span> 0.6 - 0.8</div> |
|
<div><span class="legend-color" style="background-color: #800026;"></span> 0.8 - 1.0</div> |
|
</div> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> |
|
<script> |
|
var map = L.map('map').setView([36.7783, -119.4179], 6); |
|
var markers = L.markerClusterGroup(); |
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
maxZoom: 19, |
|
attribution: '© OpenStreetMap contributors' |
|
}).addTo(map); |
|
|
|
function getColor(svi) { |
|
return svi > 0.8 ? '#800026' : |
|
svi > 0.6 ? '#BD0026' : |
|
svi > 0.4 ? '#E31A1C' : |
|
svi > 0.2 ? '#FC4E2A' : |
|
'#FFEDA0'; |
|
} |
|
|
|
|
|
var mockData = `ZIP,City,State,Latitude,Longitude,SVI |
|
90210,Beverly Hills,CA,34.0901,-118.4065,0.2 |
|
90001,Los Angeles,CA,33.9731,-118.2479,0.8 |
|
94102,San Francisco,CA,37.7795,-122.4194,0.6 |
|
95814,Sacramento,CA,38.5816,-121.4944,0.5 |
|
92101,San Diego,CA,32.7157,-117.1611,0.4 |
|
93721,Fresno,CA,36.7378,-119.7871,0.7 |
|
95350,Modesto,CA,37.6391,-120.9969,0.5 |
|
93301,Bakersfield,CA,35.3733,-119.0187,0.6 |
|
95050,Santa Clara,CA,37.3541,-121.9552,0.3 |
|
92507,Riverside,CA,33.9806,-117.3755,0.5`; |
|
|
|
Papa.parse(mockData, { |
|
header: true, |
|
complete: function(results) { |
|
results.data.forEach(function(row) { |
|
if (row.Latitude && row.Longitude) { |
|
var marker = L.circleMarker([row.Latitude, row.Longitude], { |
|
radius: 8, |
|
fillColor: getColor(parseFloat(row.SVI)), |
|
color: "#000", |
|
weight: 1, |
|
opacity: 1, |
|
fillOpacity: 0.8 |
|
}); |
|
|
|
marker.bindPopup(` |
|
<strong>${row.City}, ${row.State}</strong><br> |
|
ZIP: ${row.ZIP}<br> |
|
SVI Score: ${parseFloat(row.SVI).toFixed(2)} |
|
`); |
|
|
|
markers.addLayer(marker); |
|
} |
|
}); |
|
|
|
map.addLayer(markers); |
|
} |
|
}); |
|
|
|
function searchLocation() { |
|
var location = document.getElementById('location-input').value.toUpperCase(); |
|
var found = false; |
|
|
|
markers.eachLayer(function(layer) { |
|
var popupContent = layer.getPopup().getContent(); |
|
if (popupContent.toUpperCase().includes(location)) { |
|
map.setView(layer.getLatLng(), 10); |
|
layer.openPopup(); |
|
found = true; |
|
return false; |
|
} |
|
}); |
|
|
|
if (!found) { |
|
alert("Location not found. Please try another search."); |
|
} |
|
} |
|
|
|
|
|
fetch('https://eric.clst.org/assets/wiki/uploads/Stuff/gz_2010_us_040_00_500k.json') |
|
.then(response => response.json()) |
|
.then(statesData => { |
|
L.geoJSON(statesData, { |
|
style: { |
|
color: "#000", |
|
weight: 2, |
|
fillOpacity: 0, |
|
}, |
|
filter: function(feature) { |
|
return feature.properties.NAME === "California"; |
|
} |
|
}).addTo(map); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
