Nymbo/bigmap
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>California Social Vulnerability Index Map</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css" />9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" />10 <style>11 body { margin: 0; padding: 0; }12 #map { height: 100vh; }13 #search { 14 position: absolute; 15 top: 10px; 16 left: 50px; 17 z-index: 1000; 18 background: white; 19 padding: 10px; 20 border-radius: 5px;21 }22 #legend {23 position: absolute;24 bottom: 30px;25 right: 10px;26 z-index: 1000;27 background: white;28 padding: 10px;29 border-radius: 5px;30 }31 .legend-color {32 width: 20px;33 height: 20px;34 display: inline-block;35 margin-right: 5px;36 }37 </style>38</head>39<body>40 <div id="search">41 <input type="text" id="location-input" placeholder="Enter ZIP code or City">42 <button onclick="searchLocation()">Search</button>43 </div>44 <div id="map"></div>45 <div id="legend">46 <h4>SVI Score</h4>47 <div><span class="legend-color" style="background-color: #FFEDA0;"></span> 0.0 - 0.2</div>48 <div><span class="legend-color" style="background-color: #FC4E2A;"></span> 0.2 - 0.4</div>49 <div><span class="legend-color" style="background-color: #E31A1C;"></span> 0.4 - 0.6</div>50 <div><span class="legend-color" style="background-color: #BD0026;"></span> 0.6 - 0.8</div>51 <div><span class="legend-color" style="background-color: #800026;"></span> 0.8 - 1.0</div>52 </div>53 54 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>55 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"></script>56 <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>57 <script>58 var map = L.map('map').setView([36.7783, -119.4179], 6); // Centered on California59 var markers = L.markerClusterGroup();60 61 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {62 maxZoom: 19,63 attribution: '© OpenStreetMap contributors'64 }).addTo(map);65 66 function getColor(svi) {67 return svi > 0.8 ? '#800026' :68 svi > 0.6 ? '#BD0026' :69 svi > 0.4 ? '#E31A1C' :70 svi > 0.2 ? '#FC4E2A' :71 '#FFEDA0';72 }73 74 // Mock data for California demonstration75 var mockData = `ZIP,City,State,Latitude,Longitude,SVI7690210,Beverly Hills,CA,34.0901,-118.4065,0.27790001,Los Angeles,CA,33.9731,-118.2479,0.87894102,San Francisco,CA,37.7795,-122.4194,0.67995814,Sacramento,CA,38.5816,-121.4944,0.58092101,San Diego,CA,32.7157,-117.1611,0.48193721,Fresno,CA,36.7378,-119.7871,0.78295350,Modesto,CA,37.6391,-120.9969,0.58393301,Bakersfield,CA,35.3733,-119.0187,0.68495050,Santa Clara,CA,37.3541,-121.9552,0.38592507,Riverside,CA,33.9806,-117.3755,0.5`;86 87 Papa.parse(mockData, {88 header: true,89 complete: function(results) {90 results.data.forEach(function(row) {91 if (row.Latitude && row.Longitude) {92 var marker = L.circleMarker([row.Latitude, row.Longitude], {93 radius: 8,94 fillColor: getColor(parseFloat(row.SVI)),95 color: "#000",96 weight: 1,97 opacity: 1,98 fillOpacity: 0.899 });100 101 marker.bindPopup(`102 <strong>${row.City}, ${row.State}</strong><br>103 ZIP: ${row.ZIP}<br>104 SVI Score: ${parseFloat(row.SVI).toFixed(2)}105 `);106 107 markers.addLayer(marker);108 }109 });110 111 map.addLayer(markers);112 }113 });114 115 function searchLocation() {116 var location = document.getElementById('location-input').value.toUpperCase();117 var found = false;118 119 markers.eachLayer(function(layer) {120 var popupContent = layer.getPopup().getContent();121 if (popupContent.toUpperCase().includes(location)) {122 map.setView(layer.getLatLng(), 10);123 layer.openPopup();124 found = true;125 return false; // Break the loop126 }127 });128 129 if (!found) {130 alert("Location not found. Please try another search.");131 }132 }133 134 // Add California state outline135 fetch('https://eric.clst.org/assets/wiki/uploads/Stuff/gz_2010_us_040_00_500k.json')136 .then(response => response.json())137 .then(statesData => {138 L.geoJSON(statesData, {139 style: {140 color: "#000",141 weight: 2,142 fillOpacity: 0,143 },144 filter: function(feature) {145 return feature.properties.NAME === "California";146 }147 }).addTo(map);148 });149 </script>150</body>151</html>