From c853b356e057f90f0957f4a9354cafb2fe4b6993 Mon Sep 17 00:00:00 2001 From: Daniel Aschwanden Date: Tue, 20 Feb 2024 06:15:04 +0100 Subject: [PATCH] feat(map): add first version of LayerController --- .../components/map/EnrichedLayerFeatures.tsx | 21 +- ui/src/views/map/Map.tsx | 242 ++---------------- ui/src/views/map/controls/DrawControl.tsx | 5 +- ui/src/views/map/controls/LayerControl.scss | 43 +++- ui/src/views/map/controls/LayerControl.tsx | 47 +++- ui/src/views/map/style.ts | 139 +--------- 6 files changed, 120 insertions(+), 377 deletions(-) diff --git a/ui/src/components/map/EnrichedLayerFeatures.tsx b/ui/src/components/map/EnrichedLayerFeatures.tsx index f8ba788a..30d450f0 100644 --- a/ui/src/components/map/EnrichedLayerFeatures.tsx +++ b/ui/src/components/map/EnrichedLayerFeatures.tsx @@ -102,14 +102,17 @@ const EnrichLineStringMap: { [key: string]: EnrichLineConfig } = { }, } - - const EnrichedSymbolSource = (props: EnrichedFeaturesProps) => { + const { id, featureCollection } = props; let enrichedFC: FeatureCollection = { "type": "FeatureCollection", "features": [] }; - enrichedFC.features = Object.assign([], props.featureCollection.features.filter(f => f.properties?.deletedAt === null).filter(f => f.id !== props.selectedFeature).flatMap(f => enrichFeature(f))) - - return - f.properties?.deletedAt === null) + .filter(f => f.id !== props.selectedFeature) + .flatMap(f => enrichFeature(f)) + ) + + return + { } interface EnrichedFeaturesProps { + id: string; featureCollection: FeatureCollection; - selectedFeature?: string | number | undefined + selectedFeature?: string | number | undefined; } const MemoEnrichedFeaturesSource = memo(EnrichedFeaturesSource); export { - MemoEnrichedFeaturesSource as EnrichedFeaturesSource + MemoEnrichedFeaturesSource as EnrichedFeaturesSource, + EnrichedSymbolSource } export default memo(EnrichedFeaturesSource); \ No newline at end of file diff --git a/ui/src/views/map/Map.tsx b/ui/src/views/map/Map.tsx index 01f3bb4e..b19ca1b5 100644 --- a/ui/src/views/map/Map.tsx +++ b/ui/src/views/map/Map.tsx @@ -4,11 +4,11 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw'; import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css"; import DefaultMaker from 'assets/marker.svg'; import { AllIcons, LinePatterns, ZonePatterns } from 'components/BabsIcons'; -import EnrichedLayerFeatures from 'components/map/EnrichedLayerFeatures'; +import EnrichedLayerFeatures, { EnrichedSymbolSource } from 'components/map/EnrichedLayerFeatures'; import { Feature, FeatureCollection } from 'geojson'; import maplibregl from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; -import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'; +import { Dispatch, SetStateAction, memo, useCallback, useEffect, useRef, useState } from 'react'; import { FullscreenControl, Map, MapProvider, MapRef, NavigationControl, ScaleControl, Source, useMap } from 'react-map-gl/maplibre'; import { useParams } from 'react-router-dom'; import Notification from 'utils/Notification'; @@ -17,7 +17,7 @@ import { BabsIconController } from './controls/BabsIconController'; import DrawControl from './controls/DrawControl'; import ExportControl from './controls/ExportControl'; import { StyleController, selectedStyle } from './controls/StyleController'; -import { drawStyle } from './style'; +import { displayStyle, drawStyle } from './style'; import { AddFeatureToLayer, DeleteFeature, GetLayers, ModifyFeature } from './graphql'; import { AddFeatureVars, DeleteFeatureVars, GetLayersData, GetLayersVars, Layer, ModifyFeatureVars } from 'types/layer'; import { } from 'utils'; @@ -25,7 +25,8 @@ import { CleanFeature, FilterActiveFeatures, LayerToFeatureCollection } from './ import { first } from 'lodash'; import { activeLayerVar } from 'cache'; import bbox from "@turf/bbox"; - +import LayerControl from './controls/LayerControl'; +import { Layer as MapLayer } from 'react-map-gl'; const modes = { ...MapboxDraw.modes, @@ -54,8 +55,7 @@ function MapView() { customIcon.src = icon.src; }); mapRef && mapRef.current && mapRef.current.on('styleimagemissing', function (e) { - const id = e.id; // id of the missing image - console.log("missing image", id); + const id = e.id; Object.values(Object.assign({}, AllIcons, LinePatterns, ZonePatterns)).filter(icon => id === icon.name).forEach(icon => { let customIcon = new Image(icon.size, icon.size); customIcon.src = icon.src; @@ -93,7 +93,6 @@ function MapView() { {/* Layersprovider and Draw */} - {/* */} @@ -103,7 +102,7 @@ function MapView() { function Layers() { const { incidentId } = useParams(); - const { data } = useQuery(GetLayers, { + const { data, loading } = useQuery(GetLayers, { variables: { incidentId: incidentId || "" }, pollInterval: 1000, fetchPolicy: "cache-first", @@ -112,21 +111,22 @@ function Layers() { // setting active to first layer if none is active if (data && data.layers?.length > 0 && data?.layers.filter(l => l.isActive).length === 0) { let firstLayer = first(data.layers)?.id - console.log("setting active layer", firstLayer) activeLayerVar(firstLayer) } return ( <> + {loading || !data ? <> : } + {/* Active Layer */} - l.isActive))} /> + l.isActive))} /> {/* Inactive Layers */} !l.isActive) || []} /> ) } - +const MemoActiveLayer = memo(ActiveLayer); function ActiveLayer(props: { layer: Layer | undefined }) { const { layer } = props; const [initialized, setInitalized] = useState(false); @@ -146,16 +146,13 @@ function ActiveLayer(props: { layer: Layer | undefined }) { }); const onCreate = useCallback((e: any) => { - console.log("[onCreate]", e) const createdFeatures: Feature[] = e.features; createdFeatures.forEach(f => { if (layer?.id === undefined) { - console.log("undefined layer, discarding edit") return; } let feature = CleanFeature(f) - console.log("adding feature", feature) addFeature({ variables: { layerId: layer.id, geometry: feature.geometry, id: feature.id, properties: feature.properties } }) }) setSelectedFeature(first(createdFeatures)?.id) @@ -166,13 +163,11 @@ function ActiveLayer(props: { layer: Layer | undefined }) { setSelectedFeature(undefined); updatedFeatures.forEach(f => { let feature = CleanFeature(f) - console.log("modifying", feature) modifyFeature({ variables: { id: feature.id, geometry: feature.geometry, properties: feature.properties } }) }); }, [modifyFeature, setSelectedFeature]); const onDelete = useCallback((e: any) => { - console.log("[onDelete]", e); const deletedFeatures: Feature[] = e.features; deletedFeatures.forEach(f => { let feature = CleanFeature(f); @@ -184,18 +179,14 @@ function ActiveLayer(props: { layer: Layer | undefined }) { useEffect(() => { let fc = FilterActiveFeatures(featureCollection); - console.log("effect", map) if (initialized) { - console.log("already initialized") return } // only run this for the initialization as we don't want to continously // change the map viewport on new features if (map !== undefined && fc.features.length > 0) { let bboxArray = bbox(fc); - - console.log("setting map bounding box for features", bboxArray); - map && map.fitBounds( + map.fitBounds( [[bboxArray[0], bboxArray[1]], [bboxArray[2], bboxArray[3]]], { animate: true, @@ -208,13 +199,14 @@ function ActiveLayer(props: { layer: Layer | undefined }) { return ( <> - - + + {layer && layer.id ? : <>} f.id === selectedFeature).shift()} onUpdate={onUpdate} /> ) } +const MemoDraw = memo(Draw); function Draw(props: { onCreate: (e: any) => void, @@ -228,7 +220,6 @@ function Draw(props: const { onCreate, onUpdate, onDelete, setSelectedFeature, featuresCollection } = props; const onSelectionChange = useCallback((e: any) => { - console.log("[onSelectionChange]", e) const features: Feature[] = e.features; if (features?.length > 0) { const feature = first(features); @@ -236,23 +227,23 @@ function Draw(props: } else { setSelectedFeature(undefined); - draw && draw.changeMode("static") && console.log("changed mode to static"); + draw && draw.changeMode("static"); } }, [draw, setSelectedFeature]); const onCreateCallback = useCallback((e: any) => { onCreate(e); - draw && draw.changeMode("static") && console.log("changed mode to static"); + draw && draw.changeMode("static"); }, [draw, onCreate]); const onUpdateCallback = useCallback((e: any) => { onUpdate(e); - draw && draw.changeMode("static") && console.log("changed mode to static"); + draw && draw.changeMode("static"); }, [draw, onUpdate]); const onDeleteCallback = useCallback((e: any) => { onDelete(e); - draw && draw.changeMode("static") && console.log("changed mode to static"); + draw && draw.changeMode("static"); }, [draw, onDelete]); useEffect(() => { @@ -308,199 +299,16 @@ function InactiveLayer(props: { featureCollection: FeatureCollection, id: string return ( <> - - + + + { + displayStyle.map(s => ) + } + ) } - -// function MapComponent() { -// const [features, setFeatures] = useState(featureCollection([])); - - -// const onCreate = useCallback((e: any) => { -// setFeatures(curFeatureCollection => { -// const newFeatureCollection = { ...curFeatureCollection }; -// const createdFeatures: Feature[] = e.features; -// createdFeatures.forEach(f => { -// if (f.properties) { -// f.properties['createdAt'] = new Date(); -// newFeatureCollection.features.push(f); -// } -// }) -// newFeatureCollection.features = unionBy(newFeatureCollection.features, curFeatureCollection.features, 'id'); -// return newFeatureCollection; -// }); -// }, [setFeatures]); - -// const onUpdate = useCallback((e: any) => { -// console.log("[onUpdate]", e) - -// setFeatures(curFeatureCollection => { -// // an update creates a deleted feature with the old properties and adds a new one with the new properties -// const newFeatureCollection = { ...curFeatureCollection }; -// newFeatureCollection.features = [] - -// const updatedFeatures: Feature[] = e.features; -// const modifiedFeatures: Feature[] = []; -// updatedFeatures.forEach(f => { -// if (f.properties) { - -// // fetch the old element -// let cur: Feature | undefined = curFeatureCollection.features.find(c => c.id === f.id) -// // make sure the old element is not identical to the current -// if (cur && isEqual(cur, f) && isEqual(cur?.properties, f?.properties)) { -// return; -// } - -// // if we found the old one and it got changed, close it -// if (cur && cur.properties) { -// cur.properties['deletedAt'] = new Date(); -// modifiedFeatures.push(cur); -// } - -// // generate a new ID and -// f.id = hat(); -// f.properties['createdAt'] = new Date(); -// f.properties['achestorID'] = cur?.id; -// modifiedFeatures.push(f); -// } -// }); -// newFeatureCollection.features = [...curFeatureCollection.features, ...modifiedFeatures]; - -// return newFeatureCollection; -// }); -// setSelectedFeature(undefined); -// draw?.changeMode("simple_select") -// }, [setFeatures, setSelectedFeature, draw]); - -// const onDelete = useCallback((e: any) => { -// console.log("[onDelete]", e); - -// setFeatures(curFeatureCollection => { -// const newFeatureCollection = { ...curFeatureCollection }; -// const deletedFeatures: Feature[] = e.features; -// deletedFeatures.forEach(f => { -// if (f.properties) { -// // fetch the old element and close it -// let cur: Feature | undefined = curFeatureCollection.features.find(c => c.id === f.id) -// if (cur && cur.properties) { -// cur.properties['deletedAt'] = new Date(); -// newFeatureCollection.features.push(f); -// } -// } -// }); -// newFeatureCollection.features = unionBy(newFeatureCollection.features, curFeatureCollection.features, 'id'); - -// return newFeatureCollection; -// }); -// setSelectedFeature(undefined); -// draw?.changeMode("simple_select") -// }, [setFeatures, setSelectedFeature, draw]); - -// const onSelectionChange = useCallback((e: { features: Feature[]; }) => { -// console.log("[onSelectionChange]", e) -// const features: Feature[] = e.features; -// if (features.length >= 1) { -// const feature = features[0]; -// // always work on the parent feature -// if (feature.properties?.parent) { -// setSelectedFeature(feature.properties.parent); -// draw?.changeMode('simple_select', { featureIds: [feature.properties.parent] }) -// return -// } -// setSelectedFeature(feature.id); -// } -// else { -// setSelectedFeature(undefined); -// draw?.changeMode("simple_select") -// } -// }, [setSelectedFeature, draw]); - - -// useEffect(() => { - -// isMapLoaded && draw && draw.set(filteredFC); -// console.log("update map", filteredFC) -// }, [features, isMapLoaded, draw]); - -// return ( -// <> -//

Lage

-// -//

Das Lagebild wird nicht mit dem Server synchronisiert, aber lokal gespeichert.

-// -//
-// -// setViewState(e.viewState)} -// mapStyle={mapStyle.uri} -// > -// -// -// {/* -// -// */} -// -// {/* */} -// f.id === selectedFeature).shift()} onUpdate={onUpdate} /> -// - - -// {/* { onMapLoad(); return true } } }} />*/} -// -// -// -// {/* f.id === selectedFeature).shift()}> -// f.id === selectedFeature).shift()} /> -// */} -// -// -//
-// -// ); -// } - const MemoMap = MapView; export { MemoMap as Map }; diff --git a/ui/src/views/map/controls/DrawControl.tsx b/ui/src/views/map/controls/DrawControl.tsx index c3cad4d7..b2887f64 100644 --- a/ui/src/views/map/controls/DrawControl.tsx +++ b/ui/src/views/map/controls/DrawControl.tsx @@ -19,7 +19,7 @@ function DrawControl(props: DrawControlProps) { const { setDraw: setDrawInParent } = props; useEffect(() => { - if (draw) setDrawInParent(draw) + setDrawInParent(draw) }, [draw, setDrawInParent]) useControl( @@ -34,8 +34,9 @@ function DrawControl(props: DrawControlProps) { map.on("draw.delete", (e) => props.onDelete(e)); map.on("draw.selectionchange", (e) => props.onSelectionChange(e)) - const draw = new MapboxDraw(props); + let draw = new MapboxDraw(props); setDraw(draw); + return draw; }, ({ map }) => { diff --git a/ui/src/views/map/controls/LayerControl.scss b/ui/src/views/map/controls/LayerControl.scss index 7d033dde..ad288976 100644 --- a/ui/src/views/map/controls/LayerControl.scss +++ b/ui/src/views/map/controls/LayerControl.scss @@ -1,10 +1,37 @@ -.Layer-Control { - .radio { - // display: block; - - // &+.radio { - // margin-left: 0; - // margin-top: .5em; - // } +.maplibregl-layer-list { + background: none; + border: none; + cursor: pointer; + display: block; + font-size: 11px; + padding: 5px; + text-align: right; + // width: 100%; + height: auto; + block-size: fit-content; + width: fit-content; + margin-right: 50px; + + button.active { + font-weight: bold; + } + + button:hover { + font-weight: bold; + color: black; + } + + button:focus { + font-weight: bold; + color: black; + } + + button { + // border-top: 1px solid #ddd; + // padding: 5px; + text-align: right; + border: none; + block-size: fit-content; + width: 100%; } } \ No newline at end of file diff --git a/ui/src/views/map/controls/LayerControl.tsx b/ui/src/views/map/controls/LayerControl.tsx index b6b9ee79..71a5f711 100644 --- a/ui/src/views/map/controls/LayerControl.tsx +++ b/ui/src/views/map/controls/LayerControl.tsx @@ -1,19 +1,50 @@ import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import 'maplibre-gl/dist/maplibre-gl.css'; -import React from "react"; +import React, { useCallback, useEffect, useState } from "react"; import "./LayerControl.scss"; +import { Layer } from 'types/layer'; +import { activeLayerVar } from 'cache'; +import classNames from 'classnames'; +import { useReactiveVar } from '@apollo/client'; -import { } from 'components/BabsIcons'; +function LayerPanel(props: { layers: Layer[] }) { + const [active, setActive] = useState(false); + const activeLayer = useReactiveVar(activeLayerVar); -function LayerPanel() { - // const [active, setActive] = useState() - // const [visble, setVisible] = useState() + const [activeLayerState, setActiveLayerState] = useState(activeLayer); + + const { layers } = props; + + const btnClass = classNames({ + 'maplibregl-ctrl-icon': true, + 'active': active, + 'is-hidden': active, + }); + + const switcherClass = classNames({ + 'maplibregl-layer-list': true, + 'maplibregl-ctrl-icon': true, + 'is-hidden': !active, + 'mr-50': true, + }) + + const onClick = useCallback((l: Layer) => { + setActive(false); + setActiveLayerState(l.id); + }, [setActive]); + + useEffect(() => { + activeLayerVar(activeLayerState); + }, [activeLayerState]) return ( -
-
- +
+
+ +
+ {layers.map((l) => { return })} +
); diff --git a/ui/src/views/map/style.ts b/ui/src/views/map/style.ts index 2d4f0914..6ba12f57 100644 --- a/ui/src/views/map/style.ts +++ b/ui/src/views/map/style.ts @@ -1,5 +1,6 @@ +import { LayerProps } from "react-map-gl"; -export const drawStyle = [ +export const drawStyle: LayerProps[] = [ { 'id': 'gl-draw-polygon-no-fill-pattern', 'type': 'fill', @@ -427,32 +428,27 @@ export const drawStyle = [ } ]; -export const displayStyle = [ - +export const displayStyle: LayerProps[] = [ { 'id': 'gl-polygon-special-fill-pattern', 'type': 'fill', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'Polygon'], ['has', 'zoneType'], ['in', 'zoneType', 'Brandzone', 'Zerstoerung'], - ['!=', 'mode', 'static'] ], 'paint': { 'fill-pattern': ['match', ['get', 'zoneType'], 'Brandzone', 'PatternBrandzone', 'Zerstoerung', 'PatternZerstoert', 'PatternBrandzone'], - 'fill-antialias': 'true', + 'fill-antialias': true, 'fill-opacity': 1 } }, { - 'id': 'gl-polygon-fill-inactive', + 'id': 'gl-polygon-fill', 'type': 'fill', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'Polygon'], ['!in', 'zoneType', 'Brandzone', 'Zerstoerung', 'Schadengebiet', 'Einsatzraum'], - ['!=', 'mode', 'static'] ], 'paint': { 'fill-color': ['coalesce', ['get', 'color'], '#000000'], @@ -460,34 +456,11 @@ export const displayStyle = [ 'fill-opacity': 0.5 } }, - { - 'id': 'gl-polygon-fill-active', - 'type': 'fill', - 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']], - 'paint': { - 'fill-color': '#fbb03b', - 'fill-outline-color': '#fbb03b', - 'fill-opacity': 0.3 - } - }, - { - 'id': 'gl-polygon-midpoint', - 'type': 'circle', - 'filter': ['all', - ['==', '$type', 'Point'], - ['==', 'meta', 'midpoint']], - 'paint': { - 'circle-radius': 4, - 'circle-color': '#fbb03b' - } - }, { 'id': 'gl-polygon-stroke-inactive', 'type': 'line', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'Polygon'], - ['!=', 'mode', 'static'] ], 'layout': { 'line-cap': 'round', @@ -498,28 +471,12 @@ export const displayStyle = [ 'line-width': 2 } }, - { - 'id': 'gl-polygon-stroke-active', - 'type': 'line', - 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']], - 'layout': { - 'line-cap': 'round', - 'line-join': 'round' - }, - 'paint': { - 'line-color': '#fbb03b', - 'line-dasharray': [0.2, 2], - 'line-width': 2 - } - }, { 'id': 'gl-line-inactive', 'type': 'line', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], ['!has', 'lineType'], - ['!=', 'mode', 'static'] ], 'layout': { 'line-cap': 'round', @@ -535,10 +492,8 @@ export const displayStyle = [ 'id': 'gl-line-inactive-normalLine', 'type': 'line', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], ['in', 'lineType', '', 'normal'], - ['!=', 'mode', 'static'] ], 'layout': { 'line-cap': 'round', @@ -554,10 +509,8 @@ export const displayStyle = [ 'id': 'gl-line-inactive-pattern', 'type': 'line', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], ['in', 'lineType', 'unpassierbar', 'beabsichtigteErkundung', 'durchgeführteErkundung', 'Rutschgebiet', 'RutschgebietGespiegelt', 'rettungsAchse'], - ['!=', 'mode', 'static'] ], 'layout': { 'line-cap': 'round', @@ -573,10 +526,8 @@ export const displayStyle = [ 'id': 'gl-line-inactive-solidlines', 'type': 'line', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], ['in', 'lineType', 'schwerBegehbar', 'durchgeführteVerschiebung', 'durchgeführterEinsatz'], - ['!=', 'mode', 'static'] ], 'layout': { 'line-cap': 'round', @@ -592,10 +543,8 @@ export const displayStyle = [ 'id': 'gl-line-inactive-dashlines', 'type': 'line', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], ['in', 'lineType', 'begehbar', 'beabsichtigteVerschiebung', 'beabsichtigterEinsatz'], - ['!=', 'mode', 'static'] ], 'layout': { 'line-cap': 'round', @@ -611,12 +560,9 @@ export const displayStyle = [ 'id': 'gl-line-symbol', 'type': 'symbol', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], - ['==', 'meta', 'feature'], ['has', 'icon'], ['!has', 'iconRotation'], - ['!=', 'mode', 'static'] ], 'layout': { 'icon-image': ["get", "icon"], @@ -628,12 +574,9 @@ export const displayStyle = [ 'id': 'gl-line-symbol-active', 'type': 'symbol', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'LineString'], - ['==', 'meta', 'feature'], ['has', 'iconRotation'], ['has', 'icon'], - ['!=', 'mode', 'static'] ], 'layout': { 'icon-image': ["get", "icon"], @@ -644,55 +587,11 @@ export const displayStyle = [ 'icon-rotate': ['coalesce', ["get", "iconRotation"], 0], } }, - { - 'id': 'gl-line-active', - 'type': 'line', - 'filter': ['all', - ['==', '$type', 'LineString'], - ['==', 'active', 'true'] - ], - 'layout': { - 'line-cap': 'round', - 'line-join': 'round' - }, - 'paint': { - 'line-color': '#fbb03b', - 'line-dasharray': [0.2, 2], - 'line-width': 2 - } - }, - { - 'id': 'gl-polygon-and-line-vertex-stroke-inactive', - 'type': 'circle', - 'filter': ['all', - ['==', 'meta', 'vertex'], - ['==', '$type', 'Point'], - ['!=', 'mode', 'static'] - ], - 'paint': { - 'circle-radius': 5, - 'circle-color': '#fff' - } - }, - { - 'id': 'gl-polygon-and-line-vertex-inactive', - 'type': 'circle', - 'filter': ['all', - ['==', 'meta', 'vertex'], - ['==', '$type', 'Point'], - ['!=', 'mode', 'static'] - ], - 'paint': { - 'circle-radius': 3, - 'circle-color': '#fbb03b' - } - }, { 'id': 'gl-point-icon', 'type': 'symbol', 'filter': ['all', ['==', '$type', 'Point'], - ['==', 'meta', 'feature'], ['has', 'icon'], ['!has', 'iconRotation'], ], @@ -708,7 +607,6 @@ export const displayStyle = [ 'type': 'symbol', 'filter': ['all', ['==', '$type', 'Point'], - ['==', 'meta', 'feature'], ['has', 'icon'], ['has', 'iconRotation'], ], @@ -725,12 +623,10 @@ export const displayStyle = [ 'id': 'gl-text-special-placement-points-center', 'type': 'symbol', 'filter': ['all', - ['==', 'meta', 'feature'], ['==', '$type', 'Point'], ['has', 'name'], ['has', 'icon'], ['in', 'icon', 'EingesperrteAbgeschnittene', 'Obdachlose'], - ['!=', 'mode', 'static'] ], 'layout': { 'text-field': ["coalesce", ["get", "name"], ""], @@ -748,12 +644,10 @@ export const displayStyle = [ 'id': 'gl-text-special-placement-points-right', 'type': 'symbol', 'filter': ['all', - ['==', 'meta', 'feature'], ['==', '$type', 'Point'], ['has', 'name'], ['has', 'icon'], ['in', 'icon', 'Tote', 'Vermisste', 'Verletzte'], - ['!=', 'mode', 'static'] ], 'layout': { 'text-field': ["coalesce", ["get", "name"], ""], @@ -771,11 +665,9 @@ export const displayStyle = [ 'id': 'gl-text-name-point', 'type': 'symbol', 'filter': ['all', - ['==', 'meta', 'feature'], ['has', 'name'], ['!in', 'icon', 'EingesperrteAbgeschnittene', 'Obdachlose', 'Tote', 'Vermisste', 'Verletzte'], ['==', '$type', 'Point'], - ['!=', 'mode', 'static'] ], 'layout': { 'text-field': ["coalesce", ["get", "name"], ""], @@ -793,10 +685,8 @@ export const displayStyle = [ 'id': 'gl-text-name-Polygon', 'type': 'symbol', 'filter': ['all', - ['==', 'meta', 'feature'], ['has', 'name'], ['==', '$type', 'Polygon'], - ['!=', 'mode', 'static'] ], 'layout': { 'text-field': ["coalesce", ["get", "name"], ""], @@ -816,10 +706,8 @@ export const displayStyle = [ 'id': 'gl-text-name-LineString', 'type': 'symbol', 'filter': ['all', - ['==', 'meta', 'feature'], ['has', 'name'], ['==', '$type', 'LineString'], - ['!=', 'mode', 'static'] ], 'layout': { 'text-field': ["coalesce", ["get", "name"], ""], @@ -839,9 +727,7 @@ export const displayStyle = [ 'id': 'gl-point-inactive', 'type': 'circle', 'filter': ['all', - ['==', 'active', 'false'], ['==', '$type', 'Point'], - ['==', 'meta', 'feature'], ['!has', 'icon'], ['!=', 'mode', 'static'] ], @@ -855,28 +741,13 @@ export const displayStyle = [ 'type': 'circle', 'filter': ['all', ['==', '$type', 'Point'], - ['==', 'active', 'true'], ['!has', 'icon'], - ['!=', 'meta', 'midpoint'] ], 'paint': { 'circle-radius': 7, 'circle-color': '#fff' } }, - { - 'id': 'gl-point-active', - 'type': 'circle', - 'filter': ['all', - ['==', '$type', 'Point'], - ['!=', 'meta', 'midpoint'], - ['!has', 'icon'], - ['==', 'active', 'true']], - 'paint': { - 'circle-radius': 5, - 'circle-color': '#fbb03b' - } - } ];