Auto fit map to boundaries

map-generator/dist/main.js

@@ -16,7 +16,7 @@
   \****************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var polylabel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! polylabel */ \"./node_modules/polylabel/polylabel.js\");\n\r\n\r\nfunction normaliseCouncilName(str) {\r\n    const regex = /(.*?)(?:(?: Rural)?(?: City| Shire) Council)/g;\r\n    const matches = str.matchAll(regex);\r\n\r\n    // If we get a match, convert to slug format\r\n    for (const match of matches) {\r\n        return match[1].toLowerCase().replace(\" \", \"-\");\r\n    }\r\n\r\n    // If we didn't find any matches, try convert input to slug format\r\n    return str.toLowerCase().replace(\" \", \"-\");\r\n};\r\n\r\nconst searchParams = new URLSearchParams(window.location.search);\r\nconst councilName = normaliseCouncilName(searchParams.get(\"council\"));\r\nconsole.log(councilName);\r\n\r\nmapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1ODZnNjF4cyJ9.IX8CfYQZUaQhSjWgMXmsEA';\r\nconst map = new mapboxgl.Map({\r\n    container: 'map',\r\n    zoom: 10,\r\n    style: 'mapbox://styles/mattyway/clzy2ozzf004k01pn840h9xdb',\r\n    center: [145.00724,-37.79011]\r\n});\r\n\r\nmap.addControl(new mapboxgl.NavigationControl());\r\n\r\nfetch(\"wards_withboundaries.json\")\r\n    .then(response => {\r\n        response.json()\r\n            .then((wardData) => {\r\n                const filteredWardData = wardData.filter((ward) => normaliseCouncilName(ward.parentElectorateName) == councilName);\r\n\r\n                filteredWardData.forEach(wardData => {\r\n                    const featureCollection = {\r\n                        'type': 'FeatureCollection',\r\n                        'features': [\r\n                            {\r\n                                'type': 'Feature',\r\n                                'geometry': JSON.parse(wardData.boundaryJson)\r\n                            }\r\n                        ]\r\n                    };\r\n\r\n                    // Add data\r\n                    map.addSource(\"data_\"+wardData.electorateId, {\r\n                        'type': 'geojson',\r\n                        'data': featureCollection\r\n                    });\r\n\r\n                    // Add a line along the data\r\n                    map.addLayer({\r\n                        'id': \"outline_\"+wardData.electorateId,\r\n                        'type': 'line',\r\n                        'source': \"data_\"+wardData.electorateId,\r\n                        'layout': {},\r\n                        'paint': {\r\n                            'line-color': '#0899fe',\r\n                            'line-width': 3\r\n                        }\r\n                    });\r\n\r\n                    const centrePoint = (0,polylabel__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(featureCollection.features[0].geometry.coordinates, 0.000001);\r\n\r\n                    map.addSource('center_'+wardData.electorateId, {\r\n                        'type': 'geojson',\r\n                        'data': {\r\n                            'type': 'FeatureCollection',\r\n                            'features': [\r\n                                {\r\n                                    'type': 'Feature',\r\n                                    'properties': {\r\n                                        'description': wardData.electorateName\r\n                                    },\r\n                                    'geometry': {\r\n                                        'type': 'Point',\r\n                                        'coordinates': centrePoint\r\n                                    }\r\n                                }\r\n                            ]\r\n                        }\r\n                    });\r\n\r\n                    map.addLayer({\r\n                        'id': 'label_'+wardData.electorateId,\r\n                        'type': 'symbol',\r\n                        'source': 'center_'+wardData.electorateId,\r\n                        'layout': {\r\n                            'text-field': ['get', 'description'],\r\n                            'text-variable-anchor': ['center', 'top', 'bottom'],\r\n                            'text-justify': 'auto',\r\n                            'text-allow-overlap': true\r\n                        }\r\n                    });\r\n\r\n                });\r\n\r\n            }).catch(err => {\r\n                console.log(err);\r\n            });\r\n    })\r\n    \r\n\n\n//# sourceURL=webpack:///./src.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var polylabel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! polylabel */ \"./node_modules/polylabel/polylabel.js\");\n\r\n\r\nfunction normaliseCouncilName(str) {\r\n    const regex = /(.*?)(?:(?: Rural)?(?: City| Shire) Council)/g;\r\n    const matches = str.matchAll(regex);\r\n\r\n    // If we get a match, convert to slug format\r\n    for (const match of matches) {\r\n        return match[1].toLowerCase().replace(\" \", \"-\");\r\n    }\r\n\r\n    // If we didn't find any matches, try convert input to slug format\r\n    return str.toLowerCase().replace(\" \", \"-\");\r\n};\r\n\r\nconst searchParams = new URLSearchParams(window.location.search);\r\nconst councilName = normaliseCouncilName(searchParams.get(\"council\"));\r\nconsole.log(councilName);\r\n\r\nmapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1ODZnNjF4cyJ9.IX8CfYQZUaQhSjWgMXmsEA';\r\nconst map = new mapboxgl.Map({\r\n    container: 'map',\r\n    zoom: 10,\r\n    style: 'mapbox://styles/mattyway/clzy2ozzf004k01pn840h9xdb',\r\n    center: [145.00724,-37.79011]\r\n});\r\n\r\nmap.addControl(new mapboxgl.NavigationControl());\r\n\r\nfetch(\"wards_withboundaries.json\")\r\n    .then(response => {\r\n        response.json()\r\n            .then((wardData) => {\r\n                const filteredWardData = wardData.filter((ward) => normaliseCouncilName(ward.parentElectorateName) == councilName);\r\n\r\n                var bounds = {\r\n                    \"west\": undefined,\r\n                    \"south\": undefined,\r\n                    \"east\": undefined,\r\n                    \"north\": undefined\r\n                }\r\n\r\n                filteredWardData.forEach(wardData => {\r\n                    const featureCollection = {\r\n                        'type': 'FeatureCollection',\r\n                        'features': [\r\n                            {\r\n                                'type': 'Feature',\r\n                                'geometry': JSON.parse(wardData.boundaryJson)\r\n                            }\r\n                        ]\r\n                    };\r\n\r\n                    featureCollection.features[0].geometry.coordinates[0].forEach(coordinate => {\r\n                        if (bounds.west == undefined || coordinate[0] < bounds.west) {\r\n                            bounds.west = coordinate[0];\r\n                        }\r\n\r\n                        if (bounds.south == undefined || coordinate[1] < bounds.south) {\r\n                            bounds.south = coordinate[1];\r\n                        }\r\n\r\n                        if (bounds.east == undefined || coordinate[0] > bounds.east) {\r\n                            bounds.east = coordinate[0];\r\n                        }\r\n\r\n                        if (bounds.north == undefined || coordinate[1] > bounds.north) {\r\n                            bounds.north = coordinate[1];\r\n                        }\r\n                    });\r\n\r\n                    // Add data\r\n                    map.addSource(\"data_\"+wardData.electorateId, {\r\n                        'type': 'geojson',\r\n                        'data': featureCollection\r\n                    });\r\n\r\n                    // Add a line along the data\r\n                    map.addLayer({\r\n                        'id': \"outline_\"+wardData.electorateId,\r\n                        'type': 'line',\r\n                        'source': \"data_\"+wardData.electorateId,\r\n                        'layout': {},\r\n                        'paint': {\r\n                            'line-color': '#0899fe',\r\n                            'line-width': 3\r\n                        }\r\n                    });\r\n\r\n                    const centrePoint = (0,polylabel__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(featureCollection.features[0].geometry.coordinates, 0.000001);\r\n\r\n                    map.addSource('center_'+wardData.electorateId, {\r\n                        'type': 'geojson',\r\n                        'data': {\r\n                            'type': 'FeatureCollection',\r\n                            'features': [\r\n                                {\r\n                                    'type': 'Feature',\r\n                                    'properties': {\r\n                                        'description': wardData.electorateName\r\n                                    },\r\n                                    'geometry': {\r\n                                        'type': 'Point',\r\n                                        'coordinates': centrePoint\r\n                                    }\r\n                                }\r\n                            ]\r\n                        }\r\n                    });\r\n\r\n                    map.addLayer({\r\n                        'id': 'label_'+wardData.electorateId,\r\n                        'type': 'syLine truncated
 
 /***/ }),
 

map-generator/src.js

@@ -33,6 +33,13 @@ 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
+                }
+
                 filteredWardData.forEach(wardData => {
                     const featureCollection = {
                         'type': 'FeatureCollection',
@@ -44,6 +51,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',
@@ -94,7 +119,14 @@ fetch("wards_withboundaries.json")
                             'text-allow-overlap': true
                         }
                     });
+                });
 
+                map.fitBounds([
+                    [bounds.west, bounds.south],
+                    [bounds.east, bounds.north]
+                ], {
+                    padding: 25,
+                    animate: false
                 });
 
             }).catch(err => {