Improve label rendering on maps

map-generator/circle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z"/>
+</svg>

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\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                function addToBounds(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                var labelFeatures = [];\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                    if (featureCollection.features[0].geometry.type == \"Polygon\") {\r\n                        featureCollection.features[0].geometry.coordinates[0].forEach(coordinate => {\r\n                            addToBounds(coordinate);\r\n                        });\r\n                    }\r\n                    if (featureCollection.features[0].geometry.type == \"MultiPolygon\") {\r\n                        featureCollection.features[0].geometry.coordinates.forEach(polygon => {\r\n                            polygon[0].forEach(coordinate => {\r\n                                addToBounds(coordinate);\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                    var centrePoint;\r\n                    if (featureCollection.features[0].geometry.type == \"Polygon\") {\r\n                        centrePoint = (0,polylabel__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(featureCollection.features[0].geometry.coordinates, 0.000001);\r\n                    }\r\n                    if (featureCollection.features[0].geometry.type == \"MultiPolygon\") {\r\n                        // TODO: Find the biggest polygon in the multipolygon and use that to find the centre point \r\n                        // instead of just picking the 
Line truncated
+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/cm03vw57q00fd01pn93wf2j7p',\r\n    center: [145.00724,-37.79011]\r\n});\r\n\r\nmap.on('load', () => {\r\n    // Load an image from an external URL.\r\n    map.loadImage('circle.png', (error, image) => {\r\n        if (error) throw error;\r\n\r\n        map.addImage('blue-circle', image);\r\n\r\n        fetch(\"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                        function addToBounds(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                        var labelFeatures = [];\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                            if (featureCollection.features[0].geometry.type == \"Polygon\") {\r\n                                featureCollection.features[0].geometry.coordinates[0].forEach(coordinate => {\r\n                                    addToBounds(coordinate);\r\n                                });\r\n                            }\r\n                            if (featureCollection.features[0].geometry.type == \"MultiPolygon\") {\r\n                                featureCollection.features[0].geometry.coordinates.forEach(polygon => {\r\n                                    polygon[0].forEach(coordinate => {\r\n                                        addToBounds(coordinate);\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':Line truncated
 
 /***/ }),
 

map-generator/src.js

@@ -21,11 +21,18 @@ mapboxgl.accessToken = 'pk.eyJ1IjoibWF0dHl3YXkiLCJhIjoiY2x6eG9vMzZyMHY2cDJqb3M1O
 const map = new mapboxgl.Map({
     container: 'map',
     zoom: 10,
-    style: 'mapbox://styles/mattyway/clzy2ozzf004k01pn840h9xdb',
+    style: 'mapbox://styles/mattyway/cm03vw57q00fd01pn93wf2j7p',
     center: [145.00724,-37.79011]
 });
 
-fetch("wards_withboundaries.json")
+map.on('load', () => {
+    // Load an image from an external URL.
+    map.loadImage('circle.png', (error, image) => {
+        if (error) throw error;
+
+        map.addImage('blue-circle', image);
+
+        fetch("wards_withboundaries.json")
             .then(response => {
                 response.json()
                     .then((wardData) => {
@@ -162,12 +169,13 @@ fetch("wards_withboundaries.json")
                             'source': 'labels',
                             'layout': {
                                 'text-field': ['get', 'description'],
-                        'text-variable-anchor': ['center', 'top', 'bottom'],
+                                'text-variable-anchor': ['top', 'left', 'bottom', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
-                        'text-radial-offset': 0.5,
+                                'text-radial-offset': 1,
                                 'text-padding': 0,
                                 'text-justify': 'auto',
                                 'text-allow-overlap': false,
                                 'text-ignore-placement': false,
+                                'icon-image': 'blue-circle'
                             }
                         });
 
@@ -184,3 +192,5 @@ fetch("wards_withboundaries.json")
                     });
             });
             
+        });
+});