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/src.js

@@ -21,10 +21,17 @@ 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]
 });
 
+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()
@@ -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")
                     });
             });
             
+        });
+});