Update map-generator readme

map-generator/readme.md

@@ -1,9 +1,13 @@
 # Map Generator
 
-This project is displays a map showing the boundaries of wards within a single local government area. Each ward is labelled.
+This project 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.
+To allow the page to download the `wards_withboundaries.json` file, the page needs to be accessed via a `http://` URL (and not a `file:///` URL). One easy way to do this is with the web server built into Python, it can be started by running `python3 -m http.server` in this folder.
+
+To tell the page which council to load, add a query parameter to the URL eg. `?council=brimbank` or `?council=Melbourne%20City%20Council`
+
+To automatically 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.

map-generator/src.js

@@ -21,6 +21,7 @@ mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1O
 const map = new mapboxgl.Map({
     container: 'map',
     zoom: 10,
+    style: 'mapbox://styles/mattyway/clzy2ozzf004k01pn840h9xdb',
     center: [145.00724,-37.79011]
 });
 
@@ -32,6 +33,15 @@ fetch("wards_withboundaries.json")
             .then((wardData) => {
                 const filteredWardData = wardData.filter((ward) => normaliseCouncilName(ward.parentElectorateName) == councilName);
 
+                var bounds = {
+                    "west": undefined,
+                    "south": undefined,
+                    "east": undefined,
+                    "north": undefined
+                }
+
+                var labelFeatures = [];
+
                 filteredWardData.forEach(wardData => {
                     const featureCollection = {
                         'type': 'FeatureCollection',
@@ -43,6 +53,24 @@ fetch("wards_withboundaries.json")
                         ]
                     };
 
+                    featureCollection.features[0].geometry.coordinates[0].forEach(coordinate => {
+                        if (bounds.west == undefined || coordinate[0] < bounds.west) {
+                            bounds.west = coordinate[0];
+                        }
+
+                        if (bounds.south == undefined || coordinate[1] < bounds.south) {
+                            bounds.south = coordinate[1];
+                        }
+
+                        if (bounds.east == undefined || coordinate[0] > bounds.east) {
+                            bounds.east = coordinate[0];
+                        }
+
+                        if (bounds.north == undefined || coordinate[1] > bounds.north) {
+                            bounds.north = coordinate[1];
+                        }
+                    });
+
                     // Add data
                     map.addSource("data_"+wardData.electorateId, {
                         'type': 'geojson',
@@ -63,50 +91,73 @@ fetch("wards_withboundaries.json")
 
                     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
-                                    }
-                                }
-                            ]
+                    if (wardData.electorateName.includes(' ')) {
+                        // Breaking long names into newlines looks better
+                        const parts = wardData.electorateName.split(' ');
+                        // Special case if a ward starts with "St" (like "St Albans East")
+                        // Join the first two parts
+                        if (parts[0] == "St") {
+                            parts[0] = parts[0] + ' ' + parts[1];
+                            parts.splice(1, 1);
                         }
-                    });
+                        const wardNameNewLines = parts.join('\n');
+                        labelFeatures.push({
+                            'type': 'Feature',
+                            'properties': {
+                                'description': wardNameNewLines
+                            },
+                            'geometry': {
+                                'type': 'Point',
+                                'coordinates': centrePoint
+                            }
+                        });
+                    } else {
+                        labelFeatures.push({
+                            '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
-                        }
-                    });
+                map.addSource('labels', {
+                    'type': 'geojson',
+                    'data': {
+                        'type': 'FeatureCollection',
+                        'features': labelFeatures
+                    }
+                });
 
+                map.addLayer({
+                    'id': 'labels',
+                    'type': 'symbol',
+                    'source': 'labels',
+                    'layout': {
+                        'text-field': ['get', 'description'],
+                        'text-variable-anchor': ['center', 'top', 'bottom'],
+                        'text-radial-offset': 0.5,
+                        'text-padding': 0,
+                        'text-justify': 'auto',
+                        'text-allow-overlap': false,
+                        'text-ignore-placement': false,
+                    }
+                });
+
+                map.fitBounds([
+                    [bounds.west, bounds.south],
+                    [bounds.east, bounds.north]
+                ], {
+                    padding: 25,
+                    animate: false
                 });
 
             }).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);
-});
+    });
+