Hugging Face's logo

Spaces:
Nymbo
/
bigmap
Running

App Files Community
awacke1 commited on
Commit
0a07e46
•
1 Parent(s): 4ae456d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +151 -19
index.html CHANGED
@@ -1,19 +1,151 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 California
59
+ 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 demonstration
75
+ var mockData = `ZIP,City,State,Latitude,Longitude,SVI
76
+ 90210,Beverly Hills,CA,34.0901,-118.4065,0.2
77
+ 90001,Los Angeles,CA,33.9731,-118.2479,0.8
78
+ 94102,San Francisco,CA,37.7795,-122.4194,0.6
79
+ 95814,Sacramento,CA,38.5816,-121.4944,0.5
80
+ 92101,San Diego,CA,32.7157,-117.1611,0.4
81
+ 93721,Fresno,CA,36.7378,-119.7871,0.7
82
+ 95350,Modesto,CA,37.6391,-120.9969,0.5
83
+ 93301,Bakersfield,CA,35.3733,-119.0187,0.6
84
+ 95050,Santa Clara,CA,37.3541,-121.9552,0.3
85
+ 92507,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.8
99
+ });
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 loop
126
+ }
127
+ });
128
+
129
+ if (!found) {
130
+ alert("Location not found. Please try another search.");
131
+ }
132
+ }
133
+
134
+ // Add California state outline
135
+ 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>