boundaries

Andrewwango · Jun 24, 2024 · 193d06c · 193d06c
1 parent 6f01a76
commit 193d06c
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 5 deletions.
diff --git a/docs/boundaries/filter_geojson.ipynb b/docs/boundaries/filter_geojson.ipynb
@@ -0,0 +1,47 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import geopandas as gpd\n",
+    "\n",
+    "LADS = [\n",
+    "    \"Bedford\", \n",
+    "    \"Central Bedfordshire\"\n",
+    "]\n",
+    "\n",
+    "gdf = gpd.read_file('lad.json')\n",
+    "\n",
+    "filtered_gdf = gdf[gdf['LAD13NM'].isin(LADS)]\n",
+    "\n",
+    "merged_gdf = gpd.GeoDataFrame(geometry=[filtered_gdf.unary_union], crs=gdf.crs)\n",
+    "\n",
+    "merged_gdf.to_file('lad_filtered.geojson', driver='GeoJSON')"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.5"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/docs/boundaries/lad_filtered.geojson b/docs/boundaries/lad_filtered.geojson
diff --git a/docs/index.html b/docs/index.html
@@ -14,7 +14,7 @@
 </head>
 <body onload="onStartup()">
 
-<header class="p-2 text-bg-light">
+<header id="nav-header" class="p-2 text-bg-light">
     <div class="container">
         <div class="d-flex align-items-center justify-content-start">
             <a href="/" class="d-flex align-items-center mb-0 text-white text-decoration-none">
@@ -34,7 +34,7 @@
 
 <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/leaflet.snogylop.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 
 <script src="script.js"></script>

diff --git a/docs/script.js b/docs/script.js
@@ -5,17 +5,26 @@ let map = L.map( 'map', {
     zoom: 12
 });
 
+// Leaflet map
 L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', { //{s}.tile.openstreetmap.org
     attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright/" target="_blank">OpenStreetMap</a>',
 }).addTo(map);
 
+// Plot paths
 async function populateMap(clean_edge_list_json_file) {
     try {
         const response = await fetch(clean_edge_list_json_file);
         const data = await response.json();
 
         data.edge_list.forEach(edge => {
-            L.polyline(edge.geometry, { color: edge.color }).addTo(map);
+            let polyline = L.polyline(edge.geometry, { color: edge.color }).addTo(map);
+            polyline.on('mouseover', function (e) {
+                this.setStyle({weight: 8});
+            });
+
+            polyline.on('mouseout', function (e) {
+                this.setStyle({weight: 3});
+            });
         });
     } catch (error) {
         console.error('Error:', error);
@@ -25,4 +34,34 @@ async function populateMap(clean_edge_list_json_file) {
 
 function onStartup() {
     populateMap('../output/Beds_EO.json');
-}
+}
+
+// Legend
+let legend = L.control({ position: 'topright' });
+
+legend.onAdd = function (map) {
+  let div = L.DomUtil.create('div', 'legend');
+  div.innerHTML += '<i style="background: black"></i> Public Right of Way<br>';
+  div.innerHTML += '<i style="background: magenta"></i> Active non-PRoW<br>';
+  div.innerHTML += '<i style="background: red"></i> Highly active non-PRoW<br>';
+  return div;
+};
+
+legend.addTo(map);
+
+// Boundaries
+fetch('boundaries/lad_filtered.geojson')
+    .then(response => response.json())
+    .then(data => {
+        L.geoJSON(data, {
+            invert: true,
+            renderer: L.svg({ padding: 1 }),
+            style: {
+                color: "blue",      // Boundary color
+                weight: 2,          // Boundary weight
+                fillColor: "black", // Fill color
+                fillOpacity: 0.1    // Fill opacity
+            }
+        }).addTo(map);
+    })
+    .catch(error => console.error('Error loading the GeoJSON file:', error));
diff --git a/docs/styles.css b/docs/styles.css
@@ -23,4 +23,19 @@ z-index: 100;
     z-index: 1000;
     top: 50%;
     left: 0px;
- }
+ }
+
+ .legend {
+    background: white;
+    line-height: 1.5em;
+    padding: 10px;
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+  .legend i {
+    width: 18px;
+    height: 18px;
+    float: left;
+    margin-right: 8px;
+    opacity: 0.7;
+  }