@abi-software/flatmap-viewer 2.2.8 → 2.2.10-devel

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.2.8",
+  "version": "2.2.10-devel",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": "https://github.com/AnatomicMaps/flatmap-viewer.git",
   "main": "src/main.js",

package/src/controls.js

@@ -26,6 +26,20 @@ import * as pathways from './pathways.js';
 
 //==============================================================================
 
+// Make sure colour string is in `#rrggbb` form.
+// Based on https://stackoverflow.com/a/47355187
+
+function standardise_color(str){
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = str;
+    const colour = ctx.fillStyle;
+    canvas.remove()
+    return colour;
+}
+
+//==============================================================================
+
 export class NavigationControl
 {
     constructor(flatmap)
@@ -102,9 +116,9 @@ export class PathControl
         this._legend.className = 'flatmap-nerve-grid';
 
         const innerHTML = [];
-        innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><input id="path-all-paths" type="checkbox" checked/><div class="nerve-line"></div>`);
+        innerHTML.push(`<label for="path-all-paths">ALL PATHS:</label><div class="nerve-line"></div><input id="path-all-paths" type="checkbox" checked/>`);
         for (const path of pathways.PATH_TYPES) {
-            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><input id="path-${path.type}" type="checkbox" checked/><div class="nerve-line nerve-${path.type}"></div>`);
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line nerve-${path.type}"></div><input id="path-${path.type}" type="checkbox" checked/>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
         this.__checkedCount = pathways.PATH_TYPES.length;
@@ -112,10 +126,10 @@ export class PathControl
 
         this._button = document.createElement('button');
         this._button.id = 'nerve-key-button';
-        this._button.className = 'control-button';
+        this._button.className = 'control-button text-button';
         this._button.setAttribute('type', 'button');
         this._button.setAttribute('aria-label', 'Nerve paths legend');
-        this._button.setAttribute('legend-visible', 'false');
+        this._button.setAttribute('control-visible', 'false');
         this._button.textContent = 'PATHS';
         this._button.title = 'Show/hide neuron paths';
         this._container.appendChild(this._button);
@@ -135,13 +149,13 @@ export class PathControl
     //=============
     {
         if (event.target.id === 'nerve-key-button') {
-            if (this._button.getAttribute('legend-visible') === 'false') {
+            if (this._button.getAttribute('control-visible') === 'false') {
                 this._container.appendChild(this._legend);
-                this._button.setAttribute('legend-visible', 'true');
+                this._button.setAttribute('control-visible', 'true');
                 this._legend.focus();
             } else {
                 this._legend = this._container.removeChild(this._legend);
-                this._button.setAttribute('legend-visible', 'false');
+                this._button.setAttribute('control-visible', 'false');
             }
         } else if (event.target.tagName === 'INPUT') {
             if (event.target.id === 'path-all-paths') {
@@ -186,3 +200,168 @@ export class PathControl
 }
 
 //==============================================================================
+
+export class LayerControl
+{
+    constructor(flatmap, layerManager)
+    {
+        this.__flatmap = flatmap;
+        this.__manager = layerManager;
+        this.__map = undefined;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+        this.__container.id = 'flatmap-layer-control';
+
+        this.__layers = document.createElement('div');
+        this.__layers.id = 'layer-control-text';
+        this.__layers.className = 'flatmap-layer-grid';
+
+        const innerHTML = [];
+        innerHTML.push(`<label for="layer-all-layers">ALL LAYERS:</label><input id="layer-all-layers" type="checkbox" checked/>`);
+        for (const layer of this.__manager.layers) {
+            innerHTML.push(`<label for="layer-${layer.id}">${layer.description}</label><input id="layer-${layer.id}" type="checkbox" checked/>`);
+        }
+        this.__layers.innerHTML = innerHTML.join('\n');
+
+        this.__layersCount = this.__manager.layers.length;
+        this.__checkedCount = this.__layersCount;
+        this.__halfCount = Math.trunc(this.__checkedCount/2);
+
+        this.__button = document.createElement('button');
+        this.__button.id = 'map-layers-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide map layers');
+        this.__button.setAttribute('control-visible', 'false');
+        this.__button.textContent = 'LAYERS';
+        this.__button.title = 'Show/hide map layers';
+        this.__container.appendChild(this.__button);
+
+        this.__container.addEventListener('click', this.onClick_.bind(this));
+        return this.__container;
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    onClick_(event)
+    //=============
+    {
+        if (event.target.id === 'map-layers-button') {
+            if (this.__button.getAttribute('control-visible') === 'false') {
+                this.__container.appendChild(this.__layers);
+                this.__button.setAttribute('control-visible', 'true');
+                this.__layers.focus();
+            } else {
+                this.__layers = this.__container.removeChild(this.__layers);
+                this.__button.setAttribute('control-visible', 'false');
+            }
+        } else if (event.target.tagName === 'INPUT') {
+            if (event.target.id === 'layer-all-layers') {
+                if (event.target.indeterminate) {
+                    event.target.checked = (this.__checkedCount >= this.__halfCount);
+                    event.target.indeterminate = false;
+                }
+                if (event.target.checked) {
+                    this.__checkedCount = this.__layersCount;
+                } else {
+                    this.__checkedCount = 0;
+                }
+                for (const layer of this.__manager.layers) {
+                    const layerCheckbox = document.getElementById(`layer-${layer.id}`);
+                    if (layerCheckbox) {
+                        layerCheckbox.checked = event.target.checked;
+                        this.__manager.activate(layer.id, event.target.checked);
+                    }
+                }
+            } else if (event.target.id.startsWith('layer-')) {
+                const layerId = event.target.id.substring(6);
+                this.__manager.activate(layerId, event.target.checked);
+                if (event.target.checked) {
+                    this.__checkedCount += 1;
+                } else {
+                    this.__checkedCount -= 1;
+                }
+                const allLayersCheckbox = document.getElementById('layer-all-layers');
+                if (this.__checkedCount === 0) {
+                    allLayersCheckbox.checked = false;
+                    allLayersCheckbox.indeterminate = false;
+                } else if (this.__checkedCount === this.__layersCount) {
+                    allLayersCheckbox.checked = true;
+                    allLayersCheckbox.indeterminate = false;
+                } else {
+                    allLayersCheckbox.indeterminate = true;
+                }
+            }
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
+export class BackgroundControl
+{
+    constructor(flatmap)
+    {
+        this.__flatmap = flatmap;
+        this.__map = undefined;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+        this.__colourDiv = document.createElement('div');
+        this.__colourDiv.setAttribute('aria-label', 'Change background colour');
+        this.__colourDiv.title = 'Change background colour';
+        const background = standardise_color(this.__flatmap.getBackgroundColour());
+        this.__colourDiv.innerHTML = `<input type="color" id="colourPicker" value="${background}">`;
+        this.__container.appendChild(this.__colourDiv);
+        this.__colourDiv.addEventListener('input', this.__updateColour.bind(this), false);
+        this.__colourDiv.addEventListener('change', this.__updateColour.bind(this), false);
+        return this.__container;
+    }
+
+    onRemove()
+    //========
+    {
+        this.__container.parentNode.removeChild(this.__container);
+        this.__map = undefined;
+    }
+
+    __updateColour(event)
+    //===================
+    {
+        const colour = event.target.value;
+        this.__flatmap.setBackgroundColour(colour);
+        this.__flatmap.controlEvent('change', 'background', colour)
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================

package/src/flatmap-viewer.js

@@ -621,12 +621,6 @@ class FlatMap
         this._map.resize();
     }
 
-    mapLayerId(name)
-    //==============
-    {
-        return `${this.uniqueId}/${name}`;
-    }
-
     getIdentifier()
     //=============
     {
@@ -872,6 +866,23 @@ class FlatMap
         });
     }
 
+    /**
+     * Generate a callback as a result of some event in a control.
+     *
+     * @param      {string}  eventType     The event type
+     * @param      {string}  control       The name of the control
+     * @param      {string}  value         The value of the control
+     */
+    controlEvent(eventType, control, value)
+    //=====================================
+    {
+        this.callback(eventType, {
+            type: 'control',
+            control: control,
+            value: value
+        });
+    }
+
     /**
      * Generate callbacks as a result of panning/zooming the map.
      *
@@ -1211,6 +1222,12 @@ export class MapManager
                     mapOptions['pathControls'] = true;
                 }
 
+                // Default is to show layer controls
+
+                if (!('layerControl' in mapOptions)) {
+                    mapOptions['layerControl'] = true;
+                }
+
                 // Mapmaker's changed the name of the field to indicate that indicates if
                 // there are raster layers
                 if (!('image-layers' in mapIndex) && ('image_layer' in mapIndex)) {
@@ -1285,9 +1302,8 @@ export class MapManager
                         outline: true
                     };
                 }
-                if ('authoring' in mapIndex) {
-                    mapOptions.layerOptions.style == 'authoring'
-                } else if ('style' in mapIndex) {
+                mapOptions.layerOptions.authoring = ('authoring' in mapIndex) ? mapIndex.authoring : false;
+                if ('style' in mapIndex) {
                     mapOptions.layerOptions.style = mapIndex.style;
                 } else {
                     mapOptions.layerOptions.style = 'flatmap';

package/src/interactions.js

@@ -38,10 +38,11 @@ import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
 import {PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {PathControl} from './controls.js';
+import {BackgroundControl, LayerControl, PathControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
+import * as pathways from './pathways.js';
 import * as utils from './utils.js';
 
 //==============================================================================
@@ -144,20 +145,32 @@ export class UserInteractions
             }
         }
 
+        // Add and manage our layers
+
+        this._layerManager = new LayerManager(flatmap);
+
+        // Control background colour (NB. this depends on having map layers created)
+
+        if (flatmap.options.backgroundControl) {
+            this._map.addControl(new BackgroundControl(flatmap));
+        }
+
         // Neural pathways which are either controlled externally
         // or by our local controls
 
         this._pathways = new Pathways(flatmap);
 
-        if (flatmap.options.pathControls) {
-            // Add controls to manage our pathways
+        // Add a control to manage our pathways
 
+        if (flatmap.options.pathControls) {
             this._map.addControl(new PathControl(flatmap));
         }
 
-        // Manage our layers
+        // Add a control to manage our layers
 
-        this._layerManager = new LayerManager(flatmap);
+        if (flatmap.options.layerControl) {
+            this._map.addControl(new LayerControl(flatmap, this._layerManager));
+        }
 
         // Flag features that have annotations
         // Also flag those features that are models of something
@@ -649,17 +662,17 @@ export class UserInteractions
         if (('label' in properties || 'hyperlink' in properties)
            && (forceLabel || !('tooltip' in properties) || properties.tooltip)
            && !('labelled' in properties)) {
-            let tooltip = '';
-            if ('label' in properties) {
-                const label = properties.label;
-                tooltip = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
-            } else {
-                tooltip = properties.hyperlink
-            }
+            const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
+                                                   + properties.label.substr(1)).replaceAll("\n", "<br/>")
+                                                  : '';
             if ('hyperlink' in properties) {
-                return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${tooltip}</a></div>`;
+                if (label === '') {
+                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a></div>`;
+                } else {
+                    return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${properties.hyperlink}</a><br/>${label}</div>`;
+                }
             } else {
-                return `<div class='flatmap-feature-label'>${tooltip}</div>`;
+                return `<div class='flatmap-feature-label'>${label}</div>`;
             }
         }
         return '';
@@ -842,31 +855,34 @@ export class UserInteractions
     selectionEvent_(event, feature)
     //=============================
     {
-        const multipleSelect = event.ctrlKey || event.metaKey;
-        if (!multipleSelect) {
-            this.__unselectFeatures();
-        }
         if (feature !== undefined) {
-            const featureId = feature.id;
-            const selecting = !this.featureSelected_(featureId);
-            if ('properties' in feature
-             && 'type' in feature.properties
-             && feature.properties.type.startsWith('line')) {
+            const clickedFeatureId = feature.id;
+            const dim = !('properties' in feature
+                       && 'kind' in feature.properties
+                       && ['cell-type', 'scaffold', 'tissue'].indexOf(feature.properties.kind) >= 0);
+            if (!(event.ctrlKey || event.metaKey)) {
+                let selecting = true;
+                for (const featureId of this._selectedFeatureIds.keys()) {
+                    if (featureId === clickedFeatureId) {
+                        selecting = false;
+                        break;
+                    }
+                }
+                this.__unselectFeatures();
+                if (selecting) {
+                    for (const feature of this._activeFeatures) {
+                        this.selectFeature_(feature.id, dim);
+                    }
+                }
+            } else {
+                const clickedSelected = this.featureSelected_(clickedFeatureId);
                 for (const feature of this._activeFeatures) {
-                    const featureId = feature.id;
-                    if (selecting) {
-                        this.selectFeature_(featureId);
+                    if (clickedSelected) {
+                        this.unselectFeature_(feature.id);
                     } else {
-                        this.unselectFeature_(featureId);
+                        this.selectFeature_(feature.id, dim);
                     }
                 }
-            } else if (selecting) {
-                const dim = !('properties' in feature
-                             && 'kind' in feature.properties
-                             && ['cell-type', 'scaffold', 'tissue'].indexOf(feature.properties.kind) >= 0);
-                this.selectFeature_(featureId, dim);
-            } else {
-                this.unselectFeature_(featureId);
             }
         }
     }
@@ -875,24 +891,14 @@ export class UserInteractions
     //================
     {
         this.clearActiveMarker_();
-        const clickedFeatures = this._map.queryRenderedFeatures(event.point)
-                                    .filter(feature => this.__enabledFeature(feature));
+        const clickedFeatures = this._map.queryRenderedFeatures(event.point);
         if (clickedFeatures.length == 0){
+            this.__unselectFeatures();
             return;
         }
         const clickedFeature = clickedFeatures[0];
         const originalEvent = event.originalEvent;
-        if (clickedFeature === undefined || this._activeFeatures.length === 1) {
-            this.selectionEvent_(originalEvent, clickedFeature);
-        } else if (this._activeFeatures.length > 1) {
-            const multipleSelect = originalEvent.ctrlKey || originalEvent.metaKey;
-            if (!multipleSelect) {
-                this.__unselectFeatures();
-            }
-            for (const feature of this._activeFeatures) {
-                this.selectFeature_(feature.id);
-            }
-        }
+        this.selectionEvent_(originalEvent, clickedFeature);
         if (this._modal) {
            // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
@@ -976,18 +982,23 @@ export class UserInteractions
     //===============================
     {
         // Disable/enable all paths except those with `pathTypes`
-
-        this.enablePathFeatures_(!enable, this._pathways.allFeatureIds());
-
         if (Array.isArray(pathTypes)) {
-            for (const pathType of pathTypes) {
-                this.enablePath(pathType, enable);
+            for (const pathType of pathways.PATH_TYPES) {
+                if (pathTypes.indexOf(pathType.type) >= 0) {
+                    this.enablePath(pathType.type, enable)
+                } else {
+                    this.enablePath(pathType.type, !enable)
+                }
             }
         } else {
-            this.enablePath(pathTypes, enable);
+            for (const pathType of pathways.PATH_TYPES) {
+                if (pathType.type === pathTypes) {
+                    this.enablePath(pathType.type, enable)
+                } else {
+                    this.enablePath(pathType.type, !enable)
+                }
+            }
         }
-
-        this._disabledPathFeatures = true;
     }
 
     pathwaysFeatureIds(externalIds)

package/src/layers.js

@@ -28,113 +28,174 @@ import * as style from './styling.js';
 import * as utils from './utils.js';
 
 const FEATURES_LAYER = 'features'
+const RASTER_LAYERS_NAME = 'Background image layer'
 
 //==============================================================================
 
-class MapFeatureLayer
+class MapStylingLayers
 {
-    constructor(flatmap, layer, background_layers=true)
+    constructor(flatmap, layerId)
     {
         this.__map = flatmap.map;
+        this.__id = layerId;
+        this.__layers = [];
+        this.__active = true;
+        this.__layerOptions = flatmap.options.layerOptions;
         this.__separateLayers = flatmap.options.separateLayers;
-        this.__id = layer.id;
-        this.__rasterLayers = [];
-        this.__styleLayers = [];
+    }
 
-        const layerOptions = flatmap.options.layerOptions;
+    get id()
+    //======
+    {
+        return this.__id;
+    }
+
+    get active()
+    //==========
+    {
+        return this.__active;
+    }
+
+    addLayer(styleLayer, options)
+    //==========================
+    {
+        this.__map.addLayer(styleLayer.style(options));
+        this.__layers.push(styleLayer);
+    }
+
+    __showLayer(layer, visible=true)
+    //===============================
+    {
+        this.__map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none');
+    }
+
+    activate(enable=true)
+    //===================
+    {
+        for (const layer of this.__layers) {
+            this.__showLayer(layer, enable);
+        }
+        this.__active = enable;
+    }
+
+    vectorSourceId(sourceLayer)
+    //=========================
+    {
+        return this.__separateLayers ? `${this.__id}_${sourceLayer}`
+                                     : sourceLayer;
+    }
+}
+
+//==============================================================================
+
+class MapFeatureLayers extends MapStylingLayers
+{
+    constructor(flatmap, layer)
+    {
+        super(flatmap, layer.id);
         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 (background_layers) {
-            if (vectorFeatures) {
-                this.__addStyleLayer(style.BodyLayer, layerOptions);
-            }
-            if (flatmap.details['image-layers']) {
-                for (const raster_layer_id of layer['image-layers']) {
-                    this.__addRasterLayer(raster_layer_id, layerOptions);
-                }
-            }
-        }
+
         // if no image layers then make feature borders (and lines?) more visible...??
         if (haveVectorLayers) {
+            const featuresVectorSource = this.vectorSourceId(FEATURES_LAYER);
+            const vectorFeatures = vectorTileSource.vectorLayerIds
+                                                   .indexOf(featuresVectorSource) >= 0;
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureFillLayer, layerOptions);
-                this.__addStyleLayer(style.FeatureDashLineLayer, layerOptions);
-                this.__addStyleLayer(style.FeatureLineLayer, layerOptions);
-                this.__addStyleLayer(style.FeatureBorderLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureFillLayer);
+                this.__addStyleLayer(style.FeatureDashLineLayer);
+                this.__addStyleLayer(style.FeatureLineLayer);
+                this.__addStyleLayer(style.FeatureBorderLayer);
             }
-            this.__addPathwayStyleLayers(layerOptions);
+            this.__addPathwayStyleLayers(this.__layerOptions);
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureLargeSymbolLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer);
                 if (!flatmap.options.tooltips) {
-                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, layerOptions);
+                    this.__addStyleLayer(style.FeatureSmallSymbolLayer);
                 }
             }
         }
 
         // Make sure our colour options are set properly, in particular raster layer visibility
 
-        this.setColour(layerOptions);
+        this.setColour(this.__layerOptions);
     }
 
-    get id()
-    //======
+    __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER)
+    //=====================================================
     {
-        return this.__id;
+        const styleLayer = new styleClass(`${this.__id}_${sourceLayer}`,
+                                          this.vectorSourceId(sourceLayer));
+        this.__map.addLayer(styleLayer.style(this.__layerOptions));
+        this.__layers.push(styleLayer);
     }
 
-    __addRasterLayer(raster_layer_id, options)
-    //========================================
+    __addPathwayStyleLayers()
+    //=======================
     {
-        const rasterLayer = new style.RasterLayer(raster_layer_id);
-        this.__map.addLayer(rasterLayer.style(options));
-        this.__rasterLayers.push(rasterLayer);
+        const pathwaysVectorSource = this.vectorSourceId(PATHWAYS_LAYER);
+        if (this.__map.getSource('vector-tiles')
+                .vectorLayerIds
+                .indexOf(pathwaysVectorSource) >= 0) {
+            this.__addStyleLayer(style.PathLineLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.PathDashlineLayer, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.NervePolygonBorder, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.NervePolygonFill, PATHWAYS_LAYER);
+            this.__addStyleLayer(style.FeatureNerveLayer, PATHWAYS_LAYER);
+        }
     }
 
-    __addPathwayStyleLayers(options)
-    //==============================
+    setColour(options)
+    //================
     {
-        const pathwaysVectorLayerId = this.__separateLayers
-                                    ? `${this.__id}_${PATHWAYS_LAYER}`
-                                    : PATHWAYS_LAYER;
-        if (this.__map.getSource('vector-tiles')
-                .vectorLayerIds
-                .indexOf(pathwaysVectorLayerId) >= 0) {
-            this.__addStyleLayer(style.PathLineLayer, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.PathDashlineLayer, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.NervePolygonBorder, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.NervePolygonFill, options, PATHWAYS_LAYER);
-            this.__addStyleLayer(style.FeatureNerveLayer, options, PATHWAYS_LAYER);
+        for (const layer of this.__layers) {
+            const paintStyle = layer.paintStyle(options, true);
+            for (const [property, value] of Object.entries(paintStyle)) {
+                this.__map.setPaintProperty(layer.id, property, value, {validate: false});
+            }
         }
     }
+}
 
-    __addStyleLayer(styleClass, options, sourceLayer=FEATURES_LAYER)
-    //==============================================================
+//==============================================================================
+
+class MapRasterLayers extends MapStylingLayers
+{
+    constructor(flatmap, bodyLayerId=null)
     {
-        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);
+        super(flatmap, 'background-image-layer');
+        if (bodyLayerId !== null) {
+            const layerId = `${bodyLayerId}_${FEATURES_LAYER}`;
+            const source = flatmap.options.separateLayers ? layerId : FEATURES_LAYER;
+            const styleLayer = new style.BodyLayer(layerId, source);
+            this.__map.addLayer(styleLayer.style(this.__layerOptions));
+            this.__layers.push(styleLayer);
+        }
+        // Make sure our colour options are set properly, in particular raster layer visibility
+        this.setColour(this.__layerOptions);
+    }
+
+    addLayer(layer)
+    //=============
+    {
+        for (const layer_id of layer['image-layers']) {
+            const rasterLayer = new style.RasterLayer(layer_id);
+            this.__map.addLayer(rasterLayer.style(this.__layerOptions));
+            this.__layers.push(rasterLayer);
+        }
+        // Make sure our colour options are set properly, in particular raster layer visibility
+        this.setColour(this.__layerOptions);
     }
 
     setColour(options)
     //================
     {
         const coloured = !('colour' in options) || options.colour;
-        for (const rasterLayer of this.__rasterLayers) {
-            this.__map.setLayoutProperty(rasterLayer.id, 'visibility', coloured ? 'visible' : 'none',
-                 {validate: false});
-        }
-        for (const styleLayer of this.__styleLayers) {
-            const paintStyle = styleLayer.paintStyle(options, true);
-            for (const [property, value] of Object.entries(paintStyle)) {
-                this.__map.setPaintProperty(styleLayer.id, property, value, {validate: false});
-            }
+        for (const layer of this.__layers) {
+            // Check active status when resetting to visible....
+            this.__map.setLayoutProperty(layer.id, 'visibility',
+                                                   (coloured && this.active) ? 'visible' : 'none',
+                                         {validate: false});
         }
     }
 }
@@ -143,89 +204,73 @@ class MapFeatureLayer
 
 export class LayerManager
 {
-    constructor(flatmap, switcher=false)
+    constructor(flatmap)
     {
         this.__flatmap = flatmap;
         this.__map = flatmap.map;
         this.__layers = new Map;
         this.__mapLayers = new Map;
-        this.__activeLayers = [];
-        this.__activeLayerNames = [];
-        this.__rasterLayers = [];
         const layerOptions = flatmap.options.layerOptions;
-        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
         const backgroundLayer = new style.BackgroundLayer();
-        if (fcDiagram) {
-            this.__map.addLayer(backgroundLayer.style('black', 1));
-        }
-        else if ('background' in flatmap.options) {
+        if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
         } else {
             this.__map.addLayer(backgroundLayer.style('white'));
         }
+
         // Add the map's layers
-        if (fcDiagram && flatmap.details['image-layers']) {
+        if (flatmap.details['image-layers']) {
+            // Image layers are below all feature layers
+
+            const bodyLayer = flatmap.layers[0];
+
+            const rasterLayers = new MapRasterLayers(this.__flatmap, bodyLayer.id);  // body layer if not FC??
+
             for (const layer of flatmap.layers) {
-                for (const raster_layer_id of layer['image-layers']) {
-                    const rasterLayer = new style.RasterLayer(raster_layer_id);
-                    this.__map.addLayer(rasterLayer.style(layerOptions));
-                    this.__rasterLayers.push(rasterLayer);
-                }
+                rasterLayers.addLayer(layer);
             }
+            this.__layers.set(RASTER_LAYERS_NAME, {
+                id: RASTER_LAYERS_NAME,
+                description: RASTER_LAYERS_NAME
+            });
+            this.__mapLayers.set(RASTER_LAYERS_NAME, rasterLayers);
         }
         for (const layer of flatmap.layers) {
-            this.addLayer(layer, !fcDiagram);
+           this.__addFeatureLayer(layer);
         }
     }
 
     get activeLayerNames()
     //====================
     {
-        return this.__activeLayerNames;
+        const activeNames = [];
+        for (const mapLayer of this.__mapLayers.values()) {
+            if (mapLayer.active) {
+                activeNames.push(mapLayer.id);
+            }
+        }
+        return activeNames;
     }
 
-    addLayer(layer, background_layers=true)
-    //=====================================
+    __addFeatureLayer(layer)
+    //======================
     {
-        this.__mapLayers.set(layer.id, layer);
-
-        const layers = new MapFeatureLayer(this.__flatmap, layer, background_layers);
-        const layerId = this.__flatmap.mapLayerId(layer.id);
-        this.__layers.set(layerId, layers);
+        this.__layers.set(layer.id, layer);
+        this.__mapLayers.set(layer.id, new MapFeatureLayers(this.__flatmap, layer));
     }
 
     get layers()
     //==========
     {
-        return this.__layers;
-    }
-
-    activate(layerId)
-    //===============
-    {
-        const layer = this.__layers.get(layerId);
-        if (layer !== undefined) {
-            layer.activate();
-            if (this.__activeLayers.indexOf(layer) < 0) {
-                this.__activeLayers.push(layer);
-                this.__activeLayerNames.push(layer.id);
-            }
-        }
+        return Array.from(this.__layers.values());
     }
 
-    deactivate(layerId)
-    //=================
+    activate(layerId, enable=true)
+    //============================
     {
-        const layer = this.__layers.get(layerId);
-        if (layer !== undefined) {
-            layer.deactivate();
-            const index = this.__activeLayers.indexOf(layer);
-            if (index >= 0) {
-                delete this.__activeLayers[index];
-                this.__activeLayers.splice(index, 1);
-                delete this.__activeLayerNames[index];
-                this.__activeLayerNames.splice(index, 1);
-            }
+        const mapLayer = this.__mapLayers.get(layerId);
+        if (mapLayer !== undefined) {
+            mapLayer.activate(enable);
         }
     }
 
@@ -233,35 +278,10 @@ export class LayerManager
     //=====================
     {
         options = utils.setDefaultOptions(options, {colour: true, outline: true});
-        for (const layer of this.__layers.values()) {
-            layer.setColour(options)
+        for (const mapLayer of this.__mapLayers.values()) {
+            mapLayer.setColour(options)
         }
     }
-
-    makeUppermost(layerId)
-    //====================
-    {
-        // position before top layer
-    }
-
-    makeLowest(layerId)
-    //=================
-    {
-        // position after bottom layer (before == undefined)
-    }
-
-
-    lower(layerId)
-    //============
-    {
-        // position before second layer underneath...
-    }
-
-    raise(layerId)
-    //============
-    {
-        // position before layer above...
-    }
 }
 
 //==============================================================================

package/src/main.js

@@ -27,7 +27,7 @@ export { MapManager };
 
 //==============================================================================
 
-export async function standaloneViewer(map_endpoint=null, map_options={})
+export async function standaloneViewer(map_endpoint=null, options={})
 {
     const requestUrl = new URL(window.location.href);
     if (map_endpoint == null) {
@@ -52,6 +52,18 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
     });
 
     let currentMap = null;
+    let defaultBackground = 'black';
+
+    const mapOptions = Object.assign({
+        tooltips: true,
+        background: defaultBackground,
+        backgroundControl: true,
+        debug: false,
+        minimap: false,
+        searchable: true,
+        featureInfo: true,
+        showPosition: false
+    }, options);
 
     function loadMap(id, taxon, sex)
     //==============================
@@ -71,20 +83,15 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
             }
             requestUrl.searchParams.delete('id');
         }
+
+        // Update address bar URL to current map
         window.history.pushState('data', document.title, requestUrl);
 
-        const options = Object.assign({
-            tooltips: true,
-            background: '#EEF',
-            debug: false,
-            minimap: false,
-            navigationControl: 'top-right',
-            searchable: true,
-            featureInfo: true,
-            showPosition: false
-        }, map_options);
-
-        mapManager.loadMap(id, 'map-canvas', (...args) => console.log(...args), options)
+        mapManager.loadMap(id, 'map-canvas', (eventType, ...args) => {
+                if (args[0].type === 'control' && args[0].control === 'background') {
+                    mapOptions.background = args[0].value;
+                }
+            }, mapOptions)
             .then(map => {
                 map.addMarker('UBERON:0000948'); // Heart
                 map.addMarker('UBERON:0002048'); // Lung
@@ -129,7 +136,7 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
     let mapId = null;
     let mapTaxon = null;
     let mapSex = null;
-    const options = [];
+    const mapList = [];
     for (const [name, map] of sortedMaps.entries()) {
         const text = [ name, map.created ];
         let selected = '';
@@ -145,12 +152,12 @@ export async function standaloneViewer(map_endpoint=null, map_options={})
             mapSex = viewMapSex;
             selected = 'selected';
         }
-        options.push(`<option value="${id}" ${selected}>${text.join(' -- ')}</option>`);
+        mapList.push(`<option value="${id}" ${selected}>${text.join(' -- ')}</option>`);
     }
-    options.splice(0, 0, '<option value="">Select flatmap...</option>');
+    mapList.splice(0, 0, '<option value="">Select flatmap...</option>');
 
     const selector = document.getElementById('map-selector');
-    selector.innerHTML = options.join('');
+    selector.innerHTML = mapList.join('');
     selector.onchange = (e) => {
         if (e.target.value !== '') {
             loadMap(e.target.value);

package/src/search.js

@@ -158,7 +158,10 @@ export class SearchIndex
 
     addTerm_(featureId, text)
     //=======================
-    {    if (text) {
+    {
+        text = text.replace(new RegExp('<br/>', 'g'), ' ')
+                   .replace('\n', ' ');
+        if (text) {
             this._searchEngine.add({
                 id: this._featureIds.length,
                 text: text

package/src/styling.js

@@ -226,8 +226,7 @@ export class FeatureBorderLayer extends VectorStyleLayer
             'type': 'line',
             'filter': [
                 'all',
-                ['==', '$type', 'Polygon'],
-                ['has', 'id']
+                ['==', '$type', 'Polygon']
             ],
             'paint': this.paintStyle(options)
         };
@@ -268,7 +267,7 @@ export class FeatureLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
                 ['==', ['get', 'type'], 'network'], '#AFA202',
                 ['has', 'centreline'], '#888',
-                ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
+                options.authoring ? '#C44' : '#444'
             ],
             'line-opacity': [
                 'case',
@@ -284,7 +283,7 @@ export class FeatureLineLayer extends VectorStyleLayer
                         ['==', ['get', 'type'], 'network'], 1.2,
                         ['boolean', ['feature-state', 'selected'], false], 1.2,
                         ['boolean', ['feature-state', 'active'], false], 1.2,
-                    ('style' in options && options.style === 'authoring') ? 0.7 : 0.5
+                        options.authoring ? 0.7 : 0.5
                     ], [
                     'interpolate',
                         ['exponential', 2],
@@ -357,6 +356,7 @@ export class PathLineLayer extends VectorStyleLayer
         const paintStyle = {
             'line-color': [
                 'case',
+                ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
                 ['==', ['get', 'kind'], 'error'], '#FFFE0E',
@@ -683,7 +683,7 @@ export class BackgroundLayer
         return this.__id;
     }
 
-    style(backgroundColour, opacity=0.1)
+    style(backgroundColour, opacity=1.0)
     {
         return {
             'id': this.__id,

package/static/flatmap-viewer.css

@@ -51,6 +51,10 @@ li.flatmap-contextmenu-item:hover {
     margin-top: 2px;
 }
 
+.text-button {
+    width: 64px;
+}
+
 /* Search box */
 
 #search-control-input {
@@ -176,7 +180,7 @@ li.flatmap-contextmenu-item:hover {
 .flatmap-nerve-grid {
     margin-top: 10px;
     display: grid;
-    grid-template-columns: 3fr 0.2fr 0.8fr;
+    grid-template-columns: 3fr 0.8fr 0.2fr;
     column-gap: 10px;
     row-gap: 0.2em;
     width: 300px;
@@ -226,6 +230,32 @@ label[for=path-all-paths] {
     background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
 }
 
+/* Layer control */
+
+#flatmap-layer-control {
+    text-align: right;
+}
+.flatmap-layer-grid {
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: 3.8fr 0.2fr;
+    column-gap: 10px;
+    row-gap: 0.2em;
+    width: 300px;
+    font-size: 10pt;
+    cursor: pointer;
+    text-align: left;
+    background: white;
+    border: 1px solid gray;
+    padding: 4px;
+    opacity: 0.8;
+}
+.flatmap-layer-grid input {
+    height:  1.1em;
+}
+label[for=layer-all-layers] {
+    font-weight: bold;
+}
 
 /* Markers */