@abi-software/flatmap-viewer 2.2.0-beta.9 → 2.2.1-beta.2

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``
+* ``npm install @abi-software/flatmap-viewer@2.2.1-beta.2``
 
 Documentation
 -------------

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.0-beta.9",
+  "version": "2.2.1-beta.2",
   "description": "Flatmap viewer using Maplibre GL",
-  "repository": "https://github.com/ABI-Software/flatmap-viewer.git",
+  "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",
   "files": [
     "src",
@@ -21,7 +21,7 @@
     "@turf/area": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/helpers": "^6.1.4",
-    "maplibre-gl": "^2.1.0",
+    "maplibre-gl": ">=1.15.3",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },

package/src/flatmap-viewer.js

@@ -45,6 +45,10 @@ import * as utils from './utils.js';
 
 //==============================================================================
 
+const MAP_MAKER_SEPARATE_LAYERS_VERSION = 1.4;
+
+//==============================================================================
+
 /**
 * Maps are not created directly but instead are created and loaded by
 * :meth:`LoadMap` of :class:`MapManager`.
@@ -629,9 +633,10 @@ class FlatMap
         }
     }
 
-    setColour(options={colour: true, outline: true})
-    //==============================================
+    setColour(options=null)
+    //=====================
     {
+        options = utils.setDefaultOptions(options, {colour: true, outline: true});
         if (this._userInteractions !== null) {
             this._userInteractions.setColour(options);
         }
@@ -962,9 +967,10 @@ class FlatMap
      * @param      {boolean} [options.highlight=false]  Highlight the features zoomed to
      * @param      {number}  [options.padding=100]  Padding around the composite bounding box
      */
-    zoomToFeatures(externalIds, options={select:true, highlight:false, padding:100})
-    //==============================================================================
+    zoomToFeatures(externalIds, options=null)
+    //=======================================
     {
+        options = utils.setDefaultOptions(options, {select: true, highlight: false, padding:100});
         if (this._userInteractions !== null) {
             const featureIds = this.modelFeatureIdList(externalIds);
             this._userInteractions.zoomToFeatures(featureIds, options);
@@ -999,9 +1005,15 @@ export class MapManager
     {
         return await this._initialisingMutex.dispatch(async () => {
             if (!this._initialised) {
-                this._mapList = await this._mapServer.loadJSON('');
+                this._mapList = [];
+                const maps = await this._mapServer.loadJSON('');
                 // Check map schema version (set by mapmaker) and
                 // remove maps we can't view (giving a console warning...)
+                for (const map of maps) {
+                    // Are features in separate vector tile source layers?
+                    map.separateLayers = ('version' in map && map.version >= MAP_MAKER_SEPARATE_LAYERS_VERSION);
+                    this._mapList.push(map);
+                }
                 this._initialised = true;
             }
         });
@@ -1058,7 +1070,9 @@ export class MapManager
         let latestMap = null;
         let lastCreatedTime = '';
         for (const map of this._mapList) {
-            if (mapDescribes === map.describes
+            if (mapDescribes === (('taxon' in map) ? map.taxon
+                                : ('describes' in map) ? map.describes
+                                : map.id)
              || mapDescribes === map.id
              || mapDescribes === map.source) {
                 if ('created' in map) {
@@ -1085,7 +1099,9 @@ export class MapManager
                     return flatmap;
                 }
             }
-            if ('describes' in identifier) {
+            if ('taxon' in identifier) {
+                mapDescribes = identifier.taxon;
+            } else if ('describes' in identifier) {
                 mapDescribes = identifier.describes;
             }
         } else {
@@ -1102,8 +1118,8 @@ export class MapManager
     *                                 or a taxon identifier of the species that the map represents. The
     *                                 latest version of a map is loaded unless it has been identified
     *                                 by ``source`` (see below).
-    * @arg identifier.describes {string} The taxon identifier of the map. This is specified as metadata
-    *                                    in the map's source file.)
+    * @arg identifier.taxon {string} The taxon identifier of the map. This is specified as metadata
+    *                                in the map's source file.)
     * @arg identifier.source {string} The URL of the source file from which the map has
     *                                 been generated. If given then this exact map will be
     *                                 loaded.
@@ -1138,7 +1154,7 @@ export class MapManager
     *
     * const humanMap2 = mapManager.loadMap('NCBITaxon:9606', 'div-2');
     *
-    * const humanMap3 = mapManager.loadMap({describes: 'NCBITaxon:9606'}, 'div-3');
+    * const humanMap3 = mapManager.loadMap({taxon: 'NCBITaxon:9606'}, 'div-3');
     *
     * const humanMap4 = mapManager.loadMap(
     *                     {source: 'https://models.physiomeproject.org/workspace/585/rawfile/650adf9076538a4bf081609df14dabddd0eb37e7/Human_Body.pptx'},
@@ -1151,7 +1167,7 @@ export class MapManager
             try {
                 const map = await this.findMap_(identifier);
                 if (map === null) {
-                    reject(`Unknown map for ${JSON.stringify(identifier)}`);
+                    reject(`Unknown map: ${JSON.stringify(identifier)}`);
                 };
 
                 // Load the maps index file
@@ -1243,6 +1259,11 @@ export class MapManager
                         outline: true
                     };
                 }
+                mapOptions.layerOptions.authoring = ('authoring' in mapIndex && mapIndex.authoring);
+
+                // Are features in separate vector tile source layers?
+
+                mapOptions.separateLayers = map.separateLayers;
 
                 // Display the map
 

package/src/interactions.js

@@ -224,6 +224,7 @@ export class UserInteractions
         this._map.on('mousemove', this.mouseMoveEvent_.bind(this));
         this._lastFeatureMouseEntered = null;
         this._lastFeatureModelsMouse = null;
+        this.__lastClickLngLat = null;
 
         // Handle pan/zoom events
         this._map.on('move', this.panZoomEvent_.bind(this, 'pan'));
@@ -284,7 +285,9 @@ export class UserInteractions
         return {
             id: featureId,
             source: VECTOR_TILES_SOURCE,
-            sourceLayer: ann['tile-layer']
+            sourceLayer: this._flatmap.options.separateLayers
+                         ? `${ann['layer']}_${ann['tile-layer']}`
+                         : ann['tile-layer']
         };
     }
 
@@ -559,9 +562,10 @@ export class UserInteractions
      * @param      {boolean} [options.highlight=false]  Highlight the features zoomed to
      * @param      {number}  [options.padding=100]  Padding around the composite bounding box
      */
-    zoomToFeatures(featureIds, options={select: true, highlight: false, padding:100})
-    //===============================================================================
+    zoomToFeatures(featureIds, options=null)
+    //======================================
     {
+        options = utils.setDefaultOptions(options, {select: true, highlight: false, padding:100});
         const select = (options.select === true);
         const highlight = (options.highlight === true);
         const padding = options.padding || 100;
@@ -617,9 +621,17 @@ export class UserInteractions
             this.unselectFeatures_();
             this.selectFeature_(featureId);
 
-            // Position popup at the feature's 'centre'
+            // Find the pop-up's postion
 
-            const location = this.__centralPosition(featureId, ann);
+            let location = null;
+            if ('positionAtLastClick' in options
+               && options.positionAtLastClick
+               && this.__lastClickLngLat !== null) {
+                location = this.__lastClickLngLat;
+            } else {
+                // Position popup at the feature's 'centre'
+                location = this.__centralPosition(featureId, ann);
+            }
 
             // Make sure the feature is on screen
 
@@ -655,7 +667,7 @@ export class UserInteractions
            && !('labelled' in properties)) {
             const label = properties.label;
             const capitalisedLabel = label.substr(0, 1).toUpperCase() + label.substr(1);
-            return `<div class='flatmap-feature-label'>${capitalisedLabel}</div>`;
+            return `<div class='flatmap-feature-label'>${capitalisedLabel.replaceAll("\n", "<br/>")}</div>`;
         }
         return '';
     }
@@ -734,8 +746,9 @@ export class UserInteractions
             }
             info = this._infoControl.featureInformation(features, event.lngLat);
         }
-        const lineFeatures = features.filter(feature => ('type' in feature.properties
-                                                     && feature.properties.type.startsWith('line')));
+        const lineFeatures = features.filter(feature => (('type' in feature.properties
+                                                     && feature.properties.type.startsWith('line'))
+                                                       || 'centreline' in feature.properties));
         if (lineFeatures.length > 0) {
             const lineFeature = lineFeatures[0];
             const lineFeatureId = +lineFeature.properties.featureId;  // Ensure numeric
@@ -748,7 +761,8 @@ export class UserInteractions
                 }
             }
         } else {
-            let labelledFeatures = features.filter(feature => ('label' in feature.properties
+            let labelledFeatures = features.filter(feature => (('label' in feature.properties
+                                                             || 'node' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
                                            .sort((a, b) => (a.properties.area - b.properties.area));
@@ -861,6 +875,7 @@ export class UserInteractions
         const feature = this._activeFeatures[0]
         this.selectionEvent_(event.originalEvent, feature);
         if (feature !== undefined) {
+            this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', feature);
         }
     }
@@ -918,7 +933,9 @@ export class UserInteractions
         }
         let position = annotation.centroid;
         const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
-            'sourceLayer': annotation['tile-layer'],
+            'sourceLayer': this._flatmap.options.separateLayers
+                            ? `${annotation['layer']}_${annotation['tile-layer']}`
+                            : annotation['tile-layer'],
             'filter': [
                 'all',
                 [ '==', ['id'], parseInt(featureId) ],

package/src/layers.js

@@ -27,6 +27,8 @@ import {PATHWAYS_LAYER} from './pathways.js';
 import * as style from './styling.js';
 import * as utils from './utils.js';
 
+const FEATURES_LAYER = 'features'
+
 //==============================================================================
 
 class MapFeatureLayer
@@ -34,12 +36,19 @@ class MapFeatureLayer
     constructor(flatmap, layer, options)
     {
         this.__map = flatmap.map;
+        this.__separateLayers = flatmap.options.separateLayers;
         this.__id = layer.id;
         this.__rasterLayers = [];
         this.__styleLayers = [];
 
-        const haveVectorLayers = (typeof this.__map.getSource('vector-tiles') !== 'undefined');
-        if (haveVectorLayers) {
+        const vectorTileSource = this.__map.getSource('vector-tiles');
+        const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
+        const featuresVectorLayerId = this.__separateLayers
+                                    ? `${this.__id}_${FEATURES_LAYER}`
+                                    : FEATURES_LAYER;
+        const vectorFeatures = haveVectorLayers
+                             && vectorTileSource.vectorLayerIds.indexOf(featuresVectorLayerId) >= 0;
+        if (vectorFeatures) {
             this.__addStyleLayer(style.BodyLayer, options);
         }
         if (flatmap.details['image_layer']) {
@@ -49,13 +58,18 @@ class MapFeatureLayer
         }
         // if no image layers then make feature borders (and lines?) more visible...??
         if (haveVectorLayers) {
-            this.__addStyleLayer(style.FeatureFillLayer, options);
-            this.__addStyleLayer(style.FeatureLineLayer, options);
-            this.__addStyleLayer(style.FeatureBorderLayer, options);
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.FeatureFillLayer, options);
+                this.__addStyleLayer(style.FeatureDashLineLayer, options);
+                this.__addStyleLayer(style.FeatureLineLayer, options);
+                this.__addStyleLayer(style.FeatureBorderLayer, options);
+            }
             this.__addPathwayStyleLayers(options);
-            this.__addStyleLayer(style.FeatureLargeSymbolLayer, options);
-            if (!flatmap.options.tooltips) {
-                this.__addStyleLayer(style.FeatureSmallSymbolLayer, options);
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer, options);
+                if (!flatmap.options.tooltips) {
+                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, options);
+                }
             }
         }
 
@@ -81,9 +95,12 @@ class MapFeatureLayer
     __addPathwayStyleLayers(options)
     //==============================
     {
+        const pathwaysVectorLayerId = this.__separateLayers
+                                    ? `${this.__id}_${PATHWAYS_LAYER}`
+                                    : PATHWAYS_LAYER;
         if (this.__map.getSource('vector-tiles')
                 .vectorLayerIds
-                .indexOf(PATHWAYS_LAYER) >= 0) {
+                .indexOf(pathwaysVectorLayerId) >= 0) {
             this.__addStyleLayer(style.PathLineLayer, options, PATHWAYS_LAYER);
             this.__addStyleLayer(style.PathDashlineLayer, options, PATHWAYS_LAYER);
             this.__addStyleLayer(style.NervePolygonBorder, options, PATHWAYS_LAYER);
@@ -92,10 +109,12 @@ class MapFeatureLayer
         }
     }
 
-    __addStyleLayer(styleClass, options, sourceLayer='features')
-    //==========================================================
+    __addStyleLayer(styleClass, options, sourceLayer=FEATURES_LAYER)
+    //==============================================================
     {
-        const styleLayer = new styleClass(this.__id, sourceLayer);
+        const layerId = `${this.__id}_${sourceLayer}`;
+        const source = this.__separateLayers ? layerId : sourceLayer;
+        const styleLayer = new styleClass(layerId, source);
         this.__map.addLayer(styleLayer.style(options));
         this.__styleLayers.push(styleLayer);
     }
@@ -188,9 +207,10 @@ export class LayerManager
         }
     }
 
-    setColour(options={colour: true, outline: true})
-    //===============================================
+    setColour(options=null)
+    //=====================
     {
+        options = utils.setDefaultOptions(options, {colour: true, outline: true});
         for (const layer of this.__layers.values()) {
             layer.setColour(options)
         }

package/src/search.js

@@ -180,7 +180,7 @@ export class SearchIndex
         let results = [];
         text = text.trim()
         if (text.length > 2 && ["'", '"'].indexOf(text.slice(0, 1)) >= 0) {
-            text = (text.slice(0, 1) === text.slice(-1)) ? text.slice(1, -1) : text.slice(1)
+            text = text.replaceAll(text.slice(0, 1), '');
             results = this._searchEngine.search(text, {prefix: true, combineWith: 'AND'});
         } else if (text.length > 1) {
             results = this._searchEngine.search(text, {prefix: true});

package/src/styling.js

@@ -28,9 +28,9 @@ export const VECTOR_TILES_SOURCE = 'vector-tiles';
 
 class VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer, idPrefix)
+    constructor(id, suffix, sourceLayer)
     {
-        this.__id = `${mapLayerId}_${sourceLayer}_${idPrefix}`;
+        this.__id = `${id}_${suffix}`;
         this.__sourceLayer = sourceLayer;
         this.__lastPaintStyle = {};
     }
@@ -78,9 +78,9 @@ class VectorStyleLayer
 
 export class BodyLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'body');
+        super(id, 'body', sourceLayer);
     }
 
     style(options)
@@ -105,9 +105,9 @@ export class BodyLayer extends VectorStyleLayer
 
 export class FeatureFillLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'fill');
+        super(id, 'fill', sourceLayer);
     }
 
     paintStyle(options, changes=false)
@@ -117,13 +117,13 @@ export class FeatureFillLayer extends VectorStyleLayer
         const paintStyle = {
             'fill-color': [
                 'case',
-                ['any',
-                      ['==', ['get', 'kind'], 'scaffold'],
-                      ['==', ['get', 'kind'], 'tissue'],
-                      ['==', ['get', 'kind'], 'cell-type']
-                ], "white",
-                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['any',
+                      ['==', ['get', 'kind'], 'scaffold']
+                ], 'white',
+                ['has', 'node'], '#AFA202',
                 'white'    // background colour? body colour ??
             ],
             'fill-opacity': [
@@ -131,10 +131,12 @@ export class FeatureFillLayer extends VectorStyleLayer
                 ['any',
                       ['==', ['get', 'kind'], 'scaffold'],
                       ['==', ['get', 'kind'], 'tissue'],
-                      ['==', ['get', 'kind'], 'cell-type']
+                      ['==', ['get', 'kind'], 'cell-type'],
                 ], 0.1,
+                ['has', 'node'], 0.3,
                 ['boolean', ['feature-state', 'selected'], false], 1.0,
                 ['boolean', ['feature-state', 'active'], false], 0.8,
+                ['has', 'colour'], 0.008,
                 (coloured && !dimmed) ? 0.01 : 0.5
             ]
         };
@@ -163,9 +165,9 @@ export class FeatureFillLayer extends VectorStyleLayer
 
 export class FeatureBorderLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'border');
+        super(id, 'border', sourceLayer);
     }
 
     paintStyle(options, changes=false)
@@ -180,6 +182,10 @@ export class FeatureBorderLayer extends VectorStyleLayer
             lineColour.push(['boolean', ['feature-state', 'active'], false]);
             lineColour.push('blue');
         }
+        lineColour.push(['has', 'colour']);
+        lineColour.push(['get', 'colour']);
+        lineColour.push(['has', 'node']);
+        lineColour.push('#AFA202');
         lineColour.push('#444');
 
         const lineOpacity = [
@@ -230,9 +236,66 @@ export class FeatureBorderLayer extends VectorStyleLayer
 
 export class FeatureLineLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer, dashed=false)
+    {
+        const filterType = dashed ? 'line-dash' : 'line';
+        super(id, `divider-${filterType}`, sourceLayer);
+        this.__filter = dashed ?
+            [
+                'any',
+                ['==', 'type', `line-dash`]
+            ]
+        :
+            [
+                'any',
+                ['==', 'type', 'bezier'],
+                ['==', 'type', `line`]
+            ];
+        this.__dashed = dashed;
+    }
+
+    paintStyle(options)
     {
-        super(mapLayerId, sourceLayer, 'divider-line');
+        const coloured = !('colour' in options) || options.colour;
+        const paintStyle = {
+            'line-color': [
+                'case',
+                ['has', 'colour'], ['get', 'colour'],
+                ['boolean', ['feature-state', 'active'], false], coloured ? '#D88' : '#CCC',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
+                ['==', ['get', 'type'], 'network'], '#AFA202',
+                ['has', 'centreline'], '#888',
+                ('authoring' in options && options.authoring) ? '#C44' : '#444'
+            ],
+            'line-opacity': [
+                'case',
+                ['boolean', ['feature-state', 'active'], false], 1.0,
+                    0.3
+                ],
+            'line-width': [
+                'let',
+                'width', [
+                    'case',
+                        ['has', 'centreline'], 1.2,
+                        ['==', ['get', 'type'], 'network'], 1.2,
+                        ['boolean', ['feature-state', 'active'], false], 1.2,
+                    ('authoring' in options && options.authoring) ? 0.7 : 0.5
+                    ], [
+                    'interpolate',
+                        ['exponential', 2],
+                        ['zoom'],
+                         2, ["*", ['var', 'width'], ["^", 2, -0.5]],
+                         7, ["*", ['var', 'width'], ["^", 2,  2.5]],
+                         9, ["*", ['var', 'width'], ["^", 2,  4.0]]
+                    ]
+            ]
+            // Need to vary width based on zoom??
+            // Or opacity??
+        };
+        if (this.__dashed) {
+            paintStyle['line-dasharray'] = [3, 2];
+        }
+        return paintStyle;
     }
 
     style(options)
@@ -241,47 +304,34 @@ export class FeatureLineLayer extends VectorStyleLayer
             ...super.style(),
             'type': 'line',
             'filter': [
-                 'all',
-                 ['==', '$type', 'LineString']
+                'all',
+                ['==', '$type', 'LineString'],
+                this.__filter
                  // not for paths...
             ],
-            'paint': {
-                'line-color': [
-                    'case',
-                    ['==', ['get', 'type'], 'network'], '#AFA202',
-                    '#444'
-                ],
-                'line-opacity': 0.3,
-                'line-width': [
-                    'let',
-                    'width', [
-                        'case',
-                            ['==', ['get', 'type'], 'network'], 1.2,
-                        0.1
-                        ], [
-                        'interpolate',
-                            ['exponential', 2],
-                            ['zoom'],
-                             2, ["*", ['var', 'width'], ["^", 2, -0.5]],
-                             7, ["*", ['var', 'width'], ["^", 2,  2.5]],
-                             9, ["*", ['var', 'width'], ["^", 2,  4.0]]
-                        ]
-                ]
-                // Need to vary width based on zoom??
-                // Or opacity??
-            }
+            'paint': this.paintStyle(options)
         };
     }
 }
 
 //==============================================================================
 
+export class FeatureDashLineLayer extends FeatureLineLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, sourceLayer, true);
+    }
+}
+
+//==============================================================================
+
 export class PathLineLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer, dashed=false)
+    constructor(id, sourceLayer, dashed=false)
     {
         const filterType = dashed ? 'line-dash' : 'line';
-        super(mapLayerId, sourceLayer, filterType);
+        super(id, filterType, sourceLayer);
         this.__filter = dashed ?
             [
                 'any',
@@ -312,7 +362,7 @@ export class PathLineLayer extends VectorStyleLayer
                 ['==', ['get', 'kind'], 'sensory'], '#2A62F6',
                 ['==', ['get', 'kind'], 'symp-post'], '#EA3423',
                 ['==', ['get', 'kind'], 'symp-pre'], '#EA3423',
-                'red'
+                '#888'
             ],
             'line-opacity': [
                 'case',
@@ -321,7 +371,7 @@ export class PathLineLayer extends VectorStyleLayer
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 0.8,
                     ['boolean', ['feature-state', 'hidden'], false], 0.1,
-                dimmed ? 0.1 : 0.5
+                dimmed ? 0.1 : 0.4
             ],
             'line-width': [
                 'let',
@@ -330,7 +380,7 @@ export class PathLineLayer extends VectorStyleLayer
                         ['==', ['get', 'type'], 'bezier'], 0.1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
-                        ['boolean', ['feature-state', 'active'], false], 1.0,
+                        ['boolean', ['feature-state', 'active'], false], 0.9,
                     0.8
                     ], [
                     'interpolate',
@@ -370,9 +420,9 @@ export class PathLineLayer extends VectorStyleLayer
 
 export class PathDashlineLayer extends PathLineLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, true);
+        super(id, sourceLayer, true);
     }
 }
 
@@ -380,9 +430,9 @@ export class PathDashlineLayer extends PathLineLayer
 
 export class FeatureNerveLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'nerve-path');
+        super(id, 'nerve-path', sourceLayer);
     }
 
     style(options)
@@ -433,9 +483,9 @@ export class FeatureNerveLayer extends VectorStyleLayer
 
 export class NervePolygonBorder extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'nerve-border');
+        super(id, 'nerve-border', sourceLayer);
     }
 
     style(options)
@@ -477,9 +527,9 @@ export class NervePolygonBorder extends VectorStyleLayer
 
 export class NervePolygonFill extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'nerve-fill');
+        super(id, 'nerve-fill', sourceLayer);
     }
 
     style(options)
@@ -527,9 +577,9 @@ export class NervePolygonFill extends VectorStyleLayer
 
 export class FeatureLargeSymbolLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'large-symbol');
+        super(id, 'large-symbol', sourceLayer);
     }
 
     style(options)
@@ -571,9 +621,9 @@ export class FeatureLargeSymbolLayer extends VectorStyleLayer
 
 export class FeatureSmallSymbolLayer extends VectorStyleLayer
 {
-    constructor(mapLayerId, sourceLayer)
+    constructor(id, sourceLayer)
     {
-        super(mapLayerId, sourceLayer, 'small-symbol');
+        super(id, 'small-symbol', sourceLayer);
     }
 
     style(options)
@@ -614,7 +664,7 @@ export class FeatureSmallSymbolLayer extends VectorStyleLayer
 
 export class BackgroundLayer
 {
-    constructor(rasterLayerId)
+    constructor()
     {
         this.__id = 'background';
     }
@@ -627,7 +677,7 @@ export class BackgroundLayer
     style(backgroundColour)
     {
         return {
-            'id': 'background',
+            'id': this.__id,
             'type': 'background',
             'paint': {
                 'background-color': backgroundColour,
@@ -641,9 +691,9 @@ export class BackgroundLayer
 
 export class RasterLayer
 {
-    constructor(rasterLayerId)
+    constructor(id)
     {
-        this.__id = rasterLayerId;
+        this.__id = id;
     }
 
     get id()

package/src/utils.js

@@ -109,3 +109,18 @@ export function normaliseId(id)
 }
 
 //==============================================================================
+
+export function setDefaultOptions(options, defaultOptions)
+{
+    if (options === undefined || options === null) {
+        return defaultOptions;
+    }
+    for (const [key, value] of Object.entries(defaultOptions)) {
+        if (!(key in options)) {
+            options[key] = value;
+        }
+    }
+    return options;
+}
+
+//==============================================================================

package/static/flatmap-viewer.css

@@ -96,6 +96,10 @@ li.flatmap-contextmenu-item:hover {
     overflow: scroll;
 }
 
+.info-control-entry {
+    border-bottom: 1px solid gray;
+}
+
 /* Navigation control buttons */
 
 .maplibregl-ctrl button.navigation-zoom-in {