Show geofences layers

1 files changed, 35 insertions, 6 deletions

diff --git a/modern/src/map/GeofenceMap.js b/modern/src/map/GeofenceMap.js
index 965efaa..53d951d 100644
--- a/modern/src/map/GeofenceMap.js
+++ b/modern/src/map/GeofenceMap.js
@@ -26,18 +26,47 @@ const GeofenceMap = () => {
       }
     });
     map.addLayer({
-      'id': id,
+      'source': id,
+      'id': 'geofences-fill',
       'type': 'fill',
+      'filter': [
+         'all',
+         ['==', '$type', 'Polygon'],
+      ],
+      'paint': {
+         'fill-color':'#3bb2d0',
+         'fill-outline-color':'#3bb2d0',
+         'fill-opacity':0.1,
+      },
+    });
+    map.addLayer({
       'source': id,
-      'layout': {},
+      'id': 'geofences-line',
+      'type': 'line',
       'paint': {
-      'fill-color': '#088',
-      'fill-opacity': 0.8
-      }
+         'line-color': '#3bb2d0',
+         'line-width': 2,
+      },
+    });
+    map.addLayer({
+      'source': id,
+      'id': 'geofences-title',
+      'type': 'symbol',
+      'layout': {
+        'text-field': '{name}',
+        'text-font': ['Roboto Regular'],
+        'text-size': 12,
+      },
+      'paint': {
+        'text-halo-color': 'white',
+        'text-halo-width': 1,
+      },
     });
 
     return () => {
-      map.removeLayer(id);
+      map.removeLayer('geofences-fill');
+      map.removeLayer('geofences-line');
+      map.removeLayer('geofences-title');
       map.removeSource(id);
     };
   }, []);