Show geofences layers

2 files changed, 37 insertions, 6 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index de486b2f..adb86b25 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -9,6 +9,7 @@ import MainToolbar from './MainToolbar';
 import Map from './map/Map';
 import PositionsMap from './map/PositionsMap';
 import SelectedDeviceMap from './map/SelectedDeviceMap';
+import GeofenceMap from './map/GeofenceMap';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -56,6 +57,7 @@ const MainPage = ({ width }) => {
         <div className={classes.mapContainer}>
           <ContainerDimensions>
             <Map>
+              <GeofenceMap />
               <PositionsMap />
               <SelectedDeviceMap />
             </Map>
diff --git a/modern/src/map/GeofenceMap.js b/modern/src/map/GeofenceMap.js
index 965efaa5..53d951d2 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);
     };
   }, []);