Hugging Face's logo

Spaces:
Nymbo
/
bigmap
Running

App Files Community
bigmap
File size: 5,884 Bytes 
0a07e46
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<!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); // Centered on California
        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';
        }

        // Mock data for California demonstration
        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; // Break the loop
                }
            });

            if (!found) {
                alert("Location not found. Please try another search.");
            }
        }

        // Add California state outline
        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>