@abi-software/flatmap-viewer 2.5.10 → 2.6.0

package/README.rst

@@ -38,7 +38,7 @@ The map server endpoint is specified as ``MAP_ENDPOINT`` in ``src/main.js``. It
 Package Installation
 ====================
 
-* ``npm install @abi-software/flatmap-viewer@2.5.10``
+* ``npm install @abi-software/flatmap-viewer@2.6.0``
 
 Documentation
 -------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.5.10",
+  "version": "2.6.0",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.10.4",
-    "@deck.gl/core": "^8.9.33",
-    "@deck.gl/layers": "^8.9.33",
-    "@deck.gl/mapbox": "^8.9.33",
+    "@deck.gl/core": "^8.9.35",
+    "@deck.gl/layers": "^8.9.35",
+    "@deck.gl/mapbox": "^8.9.35",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
@@ -31,6 +31,7 @@
     "@turf/projection": "^6.5.0",
     "bezier-js": "^6.1.0",
     "colord": "^2.9.3",
+    "core-js-pure": "^3.36.1",
     "html-es6cape": "^2.0.2",
     "maplibre-gl": ">=3.6.0",
     "mathjax-full": "^3.2.2",

package/src/controls/annotation.js

@@ -264,14 +264,14 @@ export class AnnotationDrawControl
         }
     }
     
-    clearFeature()
-    //============
+    clearFeatures()
+    //=============
     {
         this.__draw.deleteAll()
     }
 
-    trashFeature()
-    //============
+    removeFeature()
+    //=============
     {
         this.__draw.trash()
     }

package/src/flatmap-viewer.js

@@ -436,6 +436,21 @@ class FlatMap
         return this.__uuid;
     }
 
+    /**
+     * The map's URL on the map server.
+     *
+     * @type string
+     */
+    get url()
+    //========
+    {
+        let url = this.makeServerUrl('')
+        if (url.endsWith('/')) {
+            return url.substring(0, url.length - 1)
+        }
+        return url
+    }
+
     /**
      * The map's ``index.json`` as returned from the map server.
      *
@@ -1122,18 +1137,18 @@ class FlatMap
     //======================
     {
         if (this._userInteractions) {
-            this._userInteractions.clearAnnotationFeature()
+            this._userInteractions.clearAnnotationFeatures()
         }
     }
 
     /**
-     * Fire trash to enter `updated` or `deleted` feature event.
+     * Delete the selected drawn feature
      */
-    trashAnnotationFeature()
-    //======================
+    removeAnnotationFeature()
+    //=======================
     {
         if (this._userInteractions) {
-            this._userInteractions.trashAnnotationFeature()
+            this._userInteractions.removeAnnotationFeature()
         }
     }
 

package/src/interactions.js

@@ -36,7 +36,6 @@ import polylabel from 'polylabel';
 import {LayerManager} from './layers';
 import {PATHWAYS_LAYER, PathManager} from './pathways';
 import {VECTOR_TILES_SOURCE} from './layers/styling';
-import {Paths3DLayer} from './layers/paths3d'
 import {SystemsManager} from './systems';
 
 import {displayedProperties, InfoControl} from './controls/info';
@@ -132,7 +131,6 @@ export class UserInteractions
 {
     #annotationDrawControl = null
     #minimap = null
-    #paths3dLayer = null
 
     constructor(flatmap)
     {
@@ -166,9 +164,7 @@ export class UserInteractions
 
         flatmap.setInitialPosition();
 
-        // Add and manage our layers
-
-        this._layerManager = new LayerManager(flatmap);
+        // Track enabled features
 
         this.__featureEnabledCount = new Map(Array.from(this._flatmap.annotations.keys()).map(k => [+k, 0]));
 
@@ -180,9 +176,16 @@ export class UserInteractions
         this.__pathManager = new PathManager(flatmap, this, featuresEnabled);
 
         // The path types in this map
+
         const mapPathTypes = this.__pathManager.pathTypes();
 
+        // Add and manage our layers. NB. this needs to after we have a
+        // path manager but before path enabled state is set.
+
+        this._layerManager = new LayerManager(flatmap, this);
+
         // Set initial enabled state of paths
+
         for (const path of mapPathTypes) {
             this.__pathManager.enablePathsByType(path.type, path.enabled, true);
         }
@@ -216,9 +219,6 @@ export class UserInteractions
             this._map.addControl(new NavigationControl(flatmap), position);
         }
 
-        // Support 3D path view
-        this.#paths3dLayer = new Paths3DLayer(flatmap, this)
-
         // Add various controls when running standalone
         if (flatmap.options.standalone) {
             // Add a control to search annotations if option set
@@ -300,7 +300,8 @@ export class UserInteractions
         return {
             center: this._map.getCenter().toArray(),
             zoom: this._map.getZoom(),
-            layers: this.layers
+            bearing: this._map.getBearing(),
+            pitch: this._map.getPitch()
         };
     }
 
@@ -308,14 +309,11 @@ export class UserInteractions
     //=============
     {
         // Restore the map to a saved state
-        const options = {};
-        if ('center' in state) {
-            options['center'] = state.center;
-        }
-        if ('zoom' in state) {
-            options['zoom'] = state.zoom;
-            if ('center' in state) {
-                options['around'] = state.center;
+
+        const options = Object.assign({}, state)
+        if ('zoom' in options) {
+            if ('center' in options) {
+                options['around'] = options.center;
             } else {
                 options['around'] = [0, 0];
             }
@@ -365,19 +363,19 @@ export class UserInteractions
         }
     }
 
-    clearAnnotationFeature()
-    //======================
+    clearAnnotationFeatures()
+    //=======================
     {
         if (this.#annotationDrawControl) {
-            this.#annotationDrawControl.clearFeature()
+            this.#annotationDrawControl.clearFeatures()
         }
     }
 
-    trashAnnotationFeature()
-    //======================
+    removeAnnotationFeature()
+    //=======================
     {
         if (this.#annotationDrawControl) {
-            this.#annotationDrawControl.trashFeature()
+            this.#annotationDrawControl.removeFeature()
         }
     }
 
@@ -437,9 +435,6 @@ export class UserInteractions
     //================
     {
         this._layerManager.setPaint(options)
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setPaint(options)
-        }
     }
 
     setPaint(options)
@@ -464,9 +459,7 @@ export class UserInteractions
     enable3dPaths(enable=true)
     //========================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.enable(enable)
-        }
+        this._layerManager.set3dMode(enable)
     }
 
     getSystems()
@@ -508,18 +501,14 @@ export class UserInteractions
     //===============================
     {
         this._map.removeFeatureState(feature, key)
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.removeFeatureState(feature.id, key)
-        }
+        this._layerManager.removeFeatureState(feature, key)
     }
 
     #setFeatureState(feature, state)
     //==============================
     {
         this._map.setFeatureState(feature, state)
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setFeatureState(feature.id, state)
-        }
+        this._layerManager.setFeatureState(feature, state)
     }
 
     enableMapFeature(feature, enable=true)
@@ -992,13 +981,7 @@ export class UserInteractions
     #renderedFeatures(point)
     //======================
     {
-        let features = []
-        if (this.#paths3dLayer) {
-            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
-        }
-        if (features.length === 0) {
-            features = this._map.queryRenderedFeatures(point)
-        }
+        const features = this._layerManager.featuresAtPoint(point)
         return features.filter(feature => this.__featureEnabled(feature));
     }
 

package/src/layers/filter.js

@@ -0,0 +1,310 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2024 David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+import Set from 'core-js-pure/actual/set'
+
+//==============================================================================
+
+export class PropertiesFilter
+{
+    #filter
+
+    constructor(filter=true)
+    //======================
+    {
+        if (filter.constructor !== Object) {    // We allow boolean values
+            this.#filter = filter
+        } else {
+            this.#filter = Object.assign({}, filter)
+        }
+    }
+
+    clear()
+    //=====
+    {
+        if (this.#filter !== true) {
+            this.#filter = true
+        }
+    }
+
+    expand(filter)
+    //============
+    {
+        if (this.#filter === false) {
+            this.#filter = filter
+        } else if (this.#filter !== true) {
+            const copiedFilter = Object.assign({}, filter)
+            this.#filter = { "OR": [this.#filter, copiedFilter] }
+        }
+    }
+
+    invert()
+    //======
+    {
+        if (this.#filter === false) {
+            this.#filter = true
+        } else if (this.#filter === true) {
+            this.#filter = false
+        } else {
+            const copiedFilter = Object.assign({}, filter)
+            this.#filter = { "NOT": copiedFilter }
+        }
+    }
+
+    getFilter()
+    //=========
+    {
+        return this.#filter
+    }
+
+    makeStyleFilter()
+    //===============
+    {
+        return this.#makeStyleFilter(this.#filter)
+    }
+
+    match(properties)
+    //===============
+    {
+        return this.#match(properties, this.#filter)
+    }
+
+    narrow(filter)
+    //============
+    {
+        if (this.#filter === true) {
+            this.#filter = filter
+        } else if (this.#filter !== false) {
+            const copiedFilter = Object.assign({}, filter)
+            this.#filter = { "AND": [this.#filter, copiedFilter] }
+        }
+    }
+
+    setFilter(filter)
+    //===============
+    {
+        if (filter.constructor !== Object) {
+            this.#filter = filter
+        } else {
+            this.#filter = Object.assign({}, filter)
+        }
+    }
+
+    #makeStyleFilter(filter)
+    //======================
+    {
+        if (filter.constructor !== Object) {
+            return !!filter
+        }
+        const styleFilter = []
+        for (const [key, expr] of Object.entries(filter)) {
+            if (key === 'AND' || key === 'OR') {
+                if (Array.isArray(expr) && expr.length >= 2) {
+                    styleFilter.push((key === 'AND') ? 'all' : 'any',
+                                      ...expr.map(e => this.#makeStyleFilter(e)))
+                } else {
+                    console.warn(`makeFilter: Invalid ${key} operands: ${expr}`)
+                }
+            } else if (key === 'HAS') {
+                styleFilter.push('has', expr)
+            } else if (key === 'NOT') {
+                const filterExpr = this.#makeStyleFilter(expr)
+                if (Array.isArray(filterExpr)) {
+                    if (filterExpr.length === 2 && ['has', '!has'].includes(filterExpr[0])) {
+                        if (filterExpr[0] === 'has') {
+                            styleFilter.push('!has', filterExpr[1])
+                        } else {
+                            styleFilter.push('has', filterExpr[1])
+                        }
+                    } else if (filterExpr.length === 3 && ['==', '!='].includes(filterExpr[0])) {
+                        if (filterExpr[0] === '==') {
+                            styleFilter.push('!=', filterExpr[1], filterExpr[2])
+                        } else {
+                            styleFilter.push('==', filterExpr[1], filterExpr[2])
+                        }
+                    } else {
+                        styleFilter.push('!', filterExpr)
+                    }
+                } else {
+                    styleFilter.push(!filterExpr)
+                }
+            } else {
+                if (Array.isArray(expr)) {
+                    styleFilter.push('any', ...expr.map(e => ['==', key, e]))
+                } else {
+                    styleFilter.push('==', key, expr)
+                }
+            }
+        }
+        return styleFilter
+    }
+
+    #match(properties, filter)
+    //========================
+    {
+        if (filter.constructor !== Object) {
+            return !!filter
+        }
+        for (const [key, expr] of Object.entries(filter)) {
+            let matched = true
+            if (key === 'AND' || key === 'OR') {
+                if (Array.isArray(expr) && expr.length >= 2) {
+                    const matches = expr.map(e => this.#match(properties, e))
+                    matched = (key === 'AND') ? matches.reduce((result, match) => result && match, true)
+                                              : matches.reduce((result, match) => result || match, false)
+                } else {
+                    console.warn(`makeFilter: Invalid ${key} operands: ${expr}`)
+                }
+            } else if (key === 'HAS') {
+                matched = (expr in properties)
+            } else if (key === 'NOT') {
+                matched = !this.#match(properties, expr)
+            } else if (key in properties) {
+                const value = properties[key]
+                if (Array.isArray(value)) {
+                    if (Array.isArray(expr)) {
+                        matched = !(new Set(value).isDisjointFrom(new Set(expr)))
+                    } else {
+                        matched = value.includes(expr)
+                    }
+                } else if (Array.isArray(expr)) {
+                    matched = expr.includes(value)
+                } else {
+                    matched = (value === expr)
+                }
+            }
+            if (!matched) {
+                return false
+            }
+        }
+        return true
+    }
+}
+
+//==============================================================================
+
+const testProperties = {
+    prop: 1,
+    prop1: 5,
+    prop2: 11,
+}
+
+function testFilter(filter)
+//=========================
+{
+    const featureFilter = new PropertiesFilter(filter)
+    console.log(filter, '--->', featureFilter.makeStyleFilter(), featureFilter.match(testProperties))
+}
+
+function testFilters()
+//====================
+{
+    /*
+        { HAS: 'prop' } ---> [ 'has', 'prop' ]
+        { prop: 1 } ---> [ '==', 'prop', 1 ]
+        { NOT: { prop: 1 } } ---> [ '!=', 'prop', 1 ]
+        { NOT: { prop: [ 1, 2 ] } } ---> [ '!', [ 'any', [ '==', 'prop', 1 ], [ '==', 'prop', 2 ] ] ]
+        { OR: [ { prop1: 10 }, { prop2: 11 } ] } ---> [ 'any', [ '==', 'prop1', 10 ], [ '==', 'prop2', 11 ] ]
+        { AND: [ { prop1: 10 }, { prop2: 11 } ] } ---> [ 'all', [ '==', 'prop1', 10 ], [ '==', 'prop2', 11 ] ]
+        { OR: [ { AND: [Array] }, { AND: [Array] } ] } ---> [
+          'any',
+          [ 'all', [ '!=', 'prop1', 10 ], [ '==', 'prop2', 11 ] ],
+          [ 'all', [ '==', 'prop3', 10 ], [ '==', 'prop4', 11 ] ]
+        ]
+        { NOT: { OR: [ [Object], [Object] ] } } ---> [
+          '!',
+          [ 'any', [ 'all', [Array], [Array] ], [ 'all', [Array], [Array] ] ]
+        ]
+    */
+
+    console.log('test properties', testProperties)
+
+    testFilter({
+        "HAS": "prop"
+    })
+
+    testFilter({
+        "prop": 1
+    })
+
+    testFilter({
+        "NOT": {
+            "prop": 1
+        }
+    })
+
+    testFilter({
+        "prop": [1, 2]
+    })
+
+    testFilter({
+        "NOT": {
+            "prop": [1, 2]
+        }
+    })
+
+    testFilter({
+        "OR": [
+            {"prop1": 10},
+            {"prop2": 11}
+        ]
+    })
+
+    testFilter({
+        "AND": [
+            {"prop1": 10},
+            {"prop2": 11}
+        ]
+    })
+
+    testFilter({
+        "OR": [{
+            "AND": [
+                { "NOT": {"prop1": 10}},
+                {"prop2": 11}
+            ]}, {
+            "AND": [
+                {"prop3": 10},
+                {"prop4": 11}
+            ]}
+        ]
+    })
+
+    testFilter({
+        "NOT": {
+            "OR": [{
+                "AND": [
+                    {"prop1": 10},
+                    {"prop2": 11}
+                ]}, {
+                "AND": [
+                    {"prop3": 10},
+                    {"prop4": 11}
+                ]}
+            ]
+        }
+    })
+}
+
+//==============================================================================
+
+//testFilters()
+
+//==============================================================================

package/src/layers/index.js

@@ -27,6 +27,9 @@ import * as utils from '../utils.js';
 
 import * as style from './styling.js';
 
+import {Paths3DLayer} from './paths3d'
+import {PropertiesFilter} from './filter'
+
 const FEATURES_LAYER = 'features';
 const RASTER_LAYERS_NAME = 'Background image layer';
 const RASTER_LAYERS_ID = 'background-image-layer';
@@ -64,6 +67,12 @@ class MapStylingLayers
         return this.__active;
     }
 
+    get map()
+    //=======
+    {
+        return this.__map
+    }
+
     addLayer(styleLayer, options)
     //===========================
     {
@@ -106,6 +115,8 @@ class MapStylingLayers
 
 class MapFeatureLayers extends MapStylingLayers
 {
+    #pathLayers = []
+
     constructor(flatmap, layer, options)
     {
         super(flatmap, layer, options);
@@ -137,35 +148,46 @@ class MapFeatureLayers extends MapStylingLayers
         this.setPaint(this.__layerOptions);
     }
 
-    __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER)
-    //=====================================================
+    __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER, path2dLayer=false)
+    //========================================================================
     {
         const styleLayer = new styleClass(`${this.__id}_${sourceLayer}`,
-                                          this.vectorSourceId(sourceLayer));
-        this.addLayer(styleLayer, this.__layerOptions);
+                                          this.vectorSourceId(sourceLayer))
+        this.addLayer(styleLayer, this.__layerOptions)
+        if (path2dLayer) {
+            this.#pathLayers.push(styleLayer)
+        }
     }
 
     __addPathwayStyleLayers()
     //=======================
     {
-        const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER);
+        const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER)
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
                 .includes(pathwaysVectorSource)) {
-            this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.AnnotatedPathLayer, PATHWAYS_LAYER, true)
 
-            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.CentrelineEdgeLayer, PATHWAYS_LAYER)
+            this.__addStyleLayer(style.CentrelineTrackLayer, PATHWAYS_LAYER)
 
-            this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER, true)
 
-            this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER, true)
 
-            this.__addStyleLayer(style.PathHighlightLayer, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.PathDashHighlightLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathHighlightLayer, PATHWAYS_LAYER, true)
+            this.__addStyleLayer(style.PathDashHighlightLayer, PATHWAYS_LAYER, true)
+        }
+    }
+
+    enablePaths2dLayer(visible)
+    //=========================
+    {
+        for (const layer of this.#pathLayers) {
+            this.map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none')
         }
     }
 
@@ -243,11 +265,14 @@ class MapRasterLayers extends MapStylingLayers
 
 export class LayerManager
 {
-    constructor(flatmap)
+    #featureLayers = new Map()
+    #paths3dLayer = null
+    #rasterLayer = null
+
+    constructor(flatmap, ui)
     {
         this.__flatmap = flatmap;
         this.__map = flatmap.map;
-        this.__mapLayers = new Map;
         this.__layerOptions = utils.setDefaults(flatmap.options.layerOptions, {
             colour: true,
             outline: true,
@@ -266,28 +291,37 @@ export class LayerManager
 
             // Image layers are below all feature layers
             const bodyLayer = flatmap.layers[0];
-            const rasterLayers = new MapRasterLayers(this.__flatmap,
+            this.#rasterLayer = new MapRasterLayers(this.__flatmap,
                                                      this.__layerOptions,
                                                      bodyLayer.id);  // body layer if not FC??
             for (const layer of flatmap.layers) {
-                rasterLayers.addLayer(layer);
+                this.#rasterLayer.addLayer(layer);
             }
-            this.__mapLayers.set(RASTER_LAYERS_ID, rasterLayers);
         } else {
             this.__layerOptions.activeRasterLayer = false;
         }
         for (const layer of flatmap.layers) {
-            this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
-                                                                layer,
-                                                                this.__layerOptions));
+            this.#featureLayers.set(layer.id, new MapFeatureLayers(this.__flatmap,
+                                                                   layer,
+                                                                   this.__layerOptions));
         }
+
+        // Support 3D path view
+        this.#paths3dLayer = new Paths3DLayer(flatmap, ui)
     }
 
     get layers()
     //==========
     {
-        const layers = [];
-        for (const mapLayer of this.__mapLayers.values()) {
+        const layers = []
+        if (this.#rasterLayer) {
+            layers.push({
+                id: this.#rasterLayer.id,
+                description: this.#rasterLayer.description,
+                enabled: this.#rasterLayer.active
+            })
+        }
+        for (const mapLayer of this.#featureLayers.values()) {
             layers.push({
                 id: mapLayer.id,
                 description: mapLayer.description,
@@ -306,26 +340,63 @@ export class LayerManager
     activate(layerId, enable=true)
     //============================
     {
-        const layer = this.__mapLayers.get(layerId);
-        if (layer !== undefined) {
-            layer.activate(enable);
-            if (layer.id === RASTER_LAYERS_ID) {
-                this.__layerOptions.activeRasterLayer = enable;
-                for (const mapLayer of this.__mapLayers.values()) {
-                    if (mapLayer.id !== RASTER_LAYERS_ID) {
-                        mapLayer.setPaint(this.__layerOptions);
-                    }
+        if (layerId === RASTER_LAYERS_ID) {
+            if (this.#rasterLayer) {
+                this.#rasterLayer.activate(enable)
+                this.__layerOptions.activeRasterLayer = enable
+                for (const mapLayer of this.#featureLayers.values()) {
+                    mapLayer.setPaint(this.__layerOptions)
                 }
             }
+        } else {
+            const layer = this.#featureLayers.get(layerId)
+            if (layer) {
+                layer.activate(enable)
+            }
+        }
+    }
+
+    featuresAtPoint(point)
+    //====================
+    {
+        let features = []
+        if (this.#paths3dLayer) {
+            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
+        }
+        if (features.length === 0) {
+            features = this.__map.queryRenderedFeatures(point)
+        }
+        return features
+    }
+
+    removeFeatureState(feature, key)
+    //==============================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.removeFeatureState(feature.id, key)
+        }
+    }
+
+    setFeatureState(feature, state)
+    //=============================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setFeatureState(feature.id, state)
         }
     }
 
     setPaint(options={})
     //==================
     {
-        this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
-        for (const mapLayer of this.__mapLayers.values()) {
-            mapLayer.setPaint(this.__layerOptions);
+        this.__layerOptions = utils.setDefaults(options, this.__layerOptions)
+        if (this.#rasterLayer) {
+            this.#rasterLayer.setPaint(this.__layerOptions)
+        }
+        for (const mapLayer of this.#featureLayers.values()) {
+            mapLayer.setPaint(this.__layerOptions)
+        }
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.setPaint(options)
         }
     }
 
@@ -333,9 +404,32 @@ export class LayerManager
     //===================
     {
         this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
-        for (const mapLayer of this.__mapLayers.values()) {
+        for (const mapLayer of this.#featureLayers.values()) {
             mapLayer.setFilter(this.__layerOptions);
         }
+        if (this.#paths3dLayer) {
+            const sckanState = options.sckan || 'valid'
+            const sckanFilter = (sckanState == 'none') ? {NOT: {HAS: 'sckan'}} :
+                                (sckanState == 'valid') ? {sckan: true} :
+                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :
+                                true
+            const featureFilter = new PropertiesFilter(sckanFilter)
+            if ('taxons' in options) {
+                featureFilter.narrow({taxons: options.taxons})
+            }
+            this.#paths3dLayer.setFilter(featureFilter)
+        }
+    }
+
+    set3dMode(enable=true)
+    //====================
+    {
+        if (this.#paths3dLayer) {
+            this.#paths3dLayer.enable(enable)
+            for (const mapLayer of this.#featureLayers.values()) {
+                mapLayer.enablePaths2dLayer(!enable)
+            }
+        }
     }
 
     enableSckanPaths(sckanState, enable=true)

package/src/layers/paths3d.js

@@ -26,6 +26,7 @@ import GL from '@luma.gl/constants'
 //==============================================================================
 
 import {pathColourArray} from '../pathways'
+import {PropertiesFilter} from './filter'
 
 //==============================================================================
 
@@ -60,6 +61,7 @@ class ArcMapLayer extends ArcLayer
         shaders.vs = `#version 300 es\n${shaders.vs}`
         return shaders
     }
+
     setDataProperty(featureId, key, enabled)
     //======================================
     {
@@ -139,10 +141,12 @@ export class Paths3DLayer
     #deckOverlay = null
     #dimmed = false
     #enabled = false
+    #featureFilter = new PropertiesFilter()
     #featureToLayer = new Map()
     #knownTypes = []
     #map
     #pathData
+    #pathFilters
     #pathManager
     #pathStyles
     #ui
@@ -162,7 +166,27 @@ export class Paths3DLayer
                                              && 'pathEndPosition' in ann)
                                  .map(ann => [ann.featureId, ann]))
         this.#pathStyles = new Map(this.#pathManager.pathStyles().map(s => [s.type, s]))
-        this.#knownTypes = [...this.#pathStyles.keys()].filter(t => t !== 'other')
+        const knownTypes = [...this.#pathStyles.keys()].filter(t => t !== 'other')
+        this.#pathFilters = new Map(
+            [...this.#pathStyles.keys()]
+                .map(pathType => [pathType, new PropertiesFilter({
+                    OR: [{
+                        AND: [
+                            {kind: knownTypes},
+                            {kind: pathType}
+                        ],
+                    },
+                    {
+                        AND: [
+                            {
+                                NOT: {kind: knownTypes}
+                            },
+                            (pathType === 'other')
+                        ]
+                    }]
+                })
+            ])
+        )
     }
 
     enable(enable=true)
@@ -223,6 +247,30 @@ export class Paths3DLayer
         }
     }
 
+    setFilter(featureFilter)
+    //======================
+    {
+        this.#featureFilter = featureFilter
+        if (this.#deckOverlay) {
+            const updatedLayers = new Map()
+            for (const [pathType, layer] of this.#arcLayers.entries()) {
+                layer.featureIds.forEach(id => this.#featureToLayer.delete(+id))
+                const pathStyle = this.#pathStyles.get(pathType)
+                if (pathStyle) {
+                    const updatedLayer = pathStyle.dashed
+                                    ? new ArcDashedLayer(this.#layerOptions(pathType))
+                                    : new ArcMapLayer(this.#layerOptions(pathType))
+                    updatedLayer.featureIds.forEach(id => this.#featureToLayer.set(+id, layer))
+                    updatedLayers.set(pathType, updatedLayer)
+                }
+            }
+            this.#arcLayers = updatedLayers
+            this.#deckOverlay.setProps({
+                layers:  [...this.#arcLayers.values()]
+            })
+        }
+    }
+
     setPaint(options)
     //===============
     {
@@ -236,11 +284,14 @@ export class Paths3DLayer
     #addArcLayer(pathType)
     //====================
     {
-        const layer = this.#pathStyles.get(pathType).dashed
-                        ? new ArcDashedLayer(this.#layerOptions(pathType))
-                        : new ArcMapLayer(this.#layerOptions(pathType))
-        layer.featureIds.forEach(id => this.#featureToLayer.set(+id, layer))
-        this.#arcLayers.set(pathType, layer)
+        const pathStyle = this.#pathStyles.get(pathType)
+        if (pathStyle) {
+            const layer = pathStyle.dashed
+                            ? new ArcDashedLayer(this.#layerOptions(pathType))
+                            : new ArcMapLayer(this.#layerOptions(pathType))
+            layer.featureIds.forEach(id => this.#featureToLayer.set(+id, layer))
+            this.#arcLayers.set(pathType, layer)
+        }
     }
 
     #removeArcLayer(pathType)
@@ -283,13 +334,12 @@ export class Paths3DLayer
         }
     }
 
-
     #layerOptions(pathType)
     //=====================
     {
-        const pathData = [...this.#pathData.values()]
-                                 .filter(ann => (this.#knownTypes.includes(ann.kind) && (ann.kind === pathType)
-                                             || !this.#knownTypes.includes(ann.kind) && (pathType === 'other')))
+        const filter = this.#pathFilters.get(pathType)
+        const pathData = (filter ? [...this.#pathData.values()].filter(ann => filter.match(ann))
+                                 : []).filter(ann => this.#featureFilter.match(ann))
         return {
             id: `arc-${pathType}`,
             data: pathData,