| <!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> |
