aug 5 eve

egorkaway · Aug 5, 2024 · e70602a · e70602a
1 parent 72b856e
commit e70602a
Show file tree

Hide file tree

Showing 12 changed files with 11,656 additions and 11,555 deletions.
diff --git a/export/h3_level_7.geojson b/export/h3_level_7.geojson
diff --git a/http/bucket.html b/http/bucket.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>H3 Weather Visualization - Level 7</title>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    #map {
+      height: 100vh;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+  <script>
+    var map = L.map('map').setView([41.1579, -8.6291], 10);  // Centered on Porto
+
+    // Add the Light basemap directly without a selector
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+      subdomains: 'abcd',
+      maxZoom: 19
+    }).addTo(map);
+
+    var geojsonLayer = null;
+
+    function getColor(temperature) {
+      const maxTemp = 40;
+      const minTemp = -40;
+      const tempRange = maxTemp - minTemp;
+      const percentage = (temperature - minTemp) / tempRange;
+      const hue = (1 - percentage) * 360; // From blue to red
+      return `hsl(${hue}, 100%, 50%)`;
+    }
+
+    function loadGeoJSON() {
+      var geojsonFile = '/h3_level_7.geojson'; // Fetch GeoJSON from this URL
+
+      console.log(`Fetching GeoJSON data from: ${geojsonFile}`);
+
+      fetch(geojsonFile)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then(data => {
+          if (geojsonLayer) {
+            map.removeLayer(geojsonLayer);
+          }
+
+          geojsonLayer = L.geoJSON(data, {
+            style: function (feature) {
+              var temperature = feature.properties.temperature;
+              var fillColor = getColor(temperature);
+
+              return {
+                color: "none",
+                fillColor: fillColor,
+                fillOpacity: 0.4
+              };
+            },
+            onEachFeature: function (feature, layer) {
+              var temperature = feature.properties.temperature;
+              var fontSize = '10px';
+
+              var label = L.divIcon({
+                className: 'temp-label',
+                html: `<div style="font-size: ${fontSize};">${Math.round(temperature)}°C</div>`
+              });
+
+              var coords = feature.geometry.coordinates[0];
+              var latlngs = coords.map(function(c) { return [c[1], c[0]]; });
+              var polygon = L.polygon(latlngs);
+              var center = polygon.getBounds().getCenter();
+
+              L.marker(center, { icon: label }).addTo(map);
+            }
+          }).addTo(map);
+        })
+        .catch(error => {
+          console.error('Error fetching the GeoJSON data:', error);
+        });
+    }
+
+    // Load the GeoJSON data
+    loadGeoJSON();
+  </script>
+</body>
+</html>