1 files changed, 23 insertions, 5 deletions
diff --git a/modern/src/map/GeofenceEditMap.js b/modern/src/map/GeofenceEditMap.js
index 291cab7..fe84338 100644
--- a/modern/src/map/GeofenceEditMap.js
+++ b/modern/src/map/GeofenceEditMap.js
@@ -1,5 +1,6 @@
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import theme from '@mapbox/mapbox-gl-draw/src/lib/theme';
 import { useEffect } from 'react';
 
 import { map } from './Map';
@@ -14,6 +15,21 @@ const draw = new MapboxDraw({
     polygon: true,
     trash: true,
   },
+  userProperties: true,
+  styles: [...theme, {
+    'id': 'gl-draw-title',
+    'type': 'symbol',
+    'filter': ['all'],
+    'layout': {
+      'text-field': '{user_name}',
+      'text-font': ['Roboto Regular'],
+      'text-size': 12,
+    },
+    'paint': {
+      'text-halo-color': 'white',
+      'text-halo-width': 1,
+    },
+  }],
 });
 
 const GeofenceEditMap = () => {
@@ -34,11 +50,6 @@ const GeofenceEditMap = () => {
 
     map.addControl(draw, 'top-left');
 
-    draw.deleteAll();
-    for (const geofence of geofences) {
-      draw.add(geofenceToFeature(geofence));
-    }
-
     map.on('draw.create', async event => {
       const feature = event.features[0];
       const newItem = { name: '', area: geometryToArea(feature.geometry) };
@@ -81,6 +92,13 @@ const GeofenceEditMap = () => {
     return () => map.removeControl(draw);
   }, []);
 
+  useEffect(() => {
+    draw.deleteAll();
+    for (const geofence of geofences) {
+      draw.add(geofenceToFeature(geofence));
+    }
+  }, [geofences]);
+
   return null;
 }