Initial council ward map renderer

2024-08-17 17:28:41 +10:00
parent 2ab9306fff
commit 56f0f73278
8 changed files with 279 additions and 0 deletions
--- a/map-generator/.gitignore
+++ b/map-generator/.gitignore
@@ -0,0 +1 @@
+node_modules
--- a/map-generator/dist/main.js
+++ b/map-generator/dist/main.js
--- a/map-generator/index.html
+++ b/map-generator/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Council Wards 2024</title>
+<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+<link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet">
+<script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>
+<style>
+body { margin: 0; padding: 0; }
+#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+</style>
+</head>
+<body>
+<div id="map"></div>
+
+<script src="dist/main.js"></script>
+
+</body>
+</html>
--- a/map-generator/package-lock.json
+++ b/map-generator/package-lock.json
@@ -0,0 +1,25 @@
+{
+  "name": "map-generator",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "polylabel": "^2.0.1"
+      }
+    },
+    "node_modules/polylabel": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/polylabel/-/polylabel-2.0.1.tgz",
+      "integrity": "sha512-B6Yu+Bdl/8SGtjVhyUfZzD3DwciCS9SPVtHiNdt8idHHatvTHp5Ss8XGDRmQFtfF1ZQnfK+Cj5dXdpkUXBbXgA==",
+      "dependencies": {
+        "tinyqueue": "^3.0.0"
+      }
+    },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
+    }
+  }
+}
--- a/map-generator/package.json
+++ b/map-generator/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "polylabel": "^2.0.1"
+  }
+}
--- a/map-generator/readme.md
+++ b/map-generator/readme.md
@@ -0,0 +1,9 @@
+# Map Generator
+
+This project is displays a map showing the boundaries of wards within a single local government area. Each ward is labelled.
+
+The data for this comes from the VEC Map API: https://maps.vec.vic.gov.au/api/electorates/4/withboundaries
+
+To compile the `src.js` file after every edit, run `webpack-cli --mode development --watch` in this folder.
+
+Changes to `dist/main.js` should be committed so that other users don't need to install node.
--- a/map-generator/src.js
+++ b/map-generator/src.js
@@ -0,0 +1,112 @@
+import polylabel from 'polylabel';
+
+function normaliseCouncilName(str) {
+    const regex = /(.*?)(?:(?: Rural)?(?: City| Shire) Council)/g;
+    const matches = str.matchAll(regex);
+
+    // If we get a match, convert to slug format
+    for (const match of matches) {
+        return match[1].toLowerCase().replace(" ", "-");
+    }
+
+    // If we didn't find any matches, try convert input to slug format
+    return str.toLowerCase().replace(" ", "-");
+};
+
+const searchParams = new URLSearchParams(window.location.search);
+const councilName = normaliseCouncilName(searchParams.get("council"));
+console.log(councilName);
+
+mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1ODZnNjF4cyJ9.IX8CfYQZUaQhSjWgMXmsEA';
+const map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 10,
+    center: [145.00724,-37.79011]
+});
+
+map.addControl(new mapboxgl.NavigationControl());
+
+fetch("wards_withboundaries.json")
+    .then(response => {
+        response.json()
+            .then((wardData) => {
+                const filteredWardData = wardData.filter((ward) => normaliseCouncilName(ward.parentElectorateName) == councilName);
+
+                filteredWardData.forEach(wardData => {
+                    const featureCollection = {
+                        'type': 'FeatureCollection',
+                        'features': [
+                            {
+                                'type': 'Feature',
+                                'geometry': JSON.parse(wardData.boundaryJson)
+                            }
+                        ]
+                    };
+
+                    // Add data
+                    map.addSource("data_"+wardData.electorateId, {
+                        'type': 'geojson',
+                        'data': featureCollection
+                    });
+
+                    // Add a line along the data
+                    map.addLayer({
+                        'id': "outline_"+wardData.electorateId,
+                        'type': 'line',
+                        'source': "data_"+wardData.electorateId,
+                        'layout': {},
+                        'paint': {
+                            'line-color': '#0899fe',
+                            'line-width': 3
+                        }
+                    });
+
+                    const centrePoint = polylabel(featureCollection.features[0].geometry.coordinates, 0.000001);
+
+                    map.addSource('center_'+wardData.electorateId, {
+                        'type': 'geojson',
+                        'data': {
+                            'type': 'FeatureCollection',
+                            'features': [
+                                {
+                                    'type': 'Feature',
+                                    'properties': {
+                                        'description': wardData.electorateName
+                                    },
+                                    'geometry': {
+                                        'type': 'Point',
+                                        'coordinates': centrePoint
+                                    }
+                                }
+                            ]
+                        }
+                    });
+
+                    map.addLayer({
+                        'id': 'label_'+wardData.electorateId,
+                        'type': 'symbol',
+                        'source': 'center_'+wardData.electorateId,
+                        'layout': {
+                            'text-field': ['get', 'description'],
+                            'text-variable-anchor': ['center', 'top', 'bottom'],
+                            'text-justify': 'auto',
+                            'text-allow-overlap': true
+                        }
+                    });
+
+                });
+
+            }).catch(err => {
+                console.log(err);
+            });
+    })
+    
+
+
+map.on('style.load', () => {
+    map.setConfigProperty('basemap', 'showPlaceLabels', false);
+    map.setConfigProperty('basemap', 'showPointOfInterestLabels', false);
+    map.setConfigProperty('basemap', 'showRoadLabels', false);
+    map.setConfigProperty('basemap', 'showTransitLabels', false);
+    map.setConfigProperty('basemap', 'show3dObjects', false);
+});
--- a/map-generator/wards_withboundaries.json
+++ b/map-generator/wards_withboundaries.json