diff options
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/MainPage.js | 2 | ||||
-rw-r--r-- | modern/src/map/GeofenceMap.js | 41 |
2 files changed, 37 insertions, 6 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index de486b2..adb86b2 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 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); }; }, []); |