@abi-software/flatmap-viewer 2.2.11-devel.2 → 2.2.12-b.1

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.9``
+* ``npm install @abi-software/flatmap-viewer@2.2.12-b.1``
 
 Documentation
 -------------

package/package.json

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

package/src/controls.js

@@ -123,7 +123,11 @@ export class PathControl
             if (checked != '') {
                 this.__checkedCount += 1;
             }
-            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}/>`);
+            const colour = path.colour || '#440';
+            const style = path.dashed ? `background: repeating-linear-gradient(to right,${colour} 0,${colour} 6px,transparent 6px,transparent 9px);`
+                                      : `background: ${colour};`;
+
+            innerHTML.push(`<label for="path-${path.type}">${path.label}</label><div class="nerve-line" style="${style}"></div><input id="path-${path.type}" type="checkbox" ${checked}/>`);
         }
         this._legend.innerHTML = innerHTML.join('\n');
         this.__halfCount = Math.trunc(this.__pathTypes.length/2);
@@ -228,12 +232,9 @@ export class LayerControl
     {
         this.__map = map;
         this.__container = document.createElement('div');
-        this.__container.className = 'maplibregl-ctrl';
-        this.__container.id = 'flatmap-layer-control';
-
+        this.__container.className = 'maplibregl-ctrl flatmap-control';
         this.__layersControl = document.createElement('div');
-        this.__layersControl.id = 'layer-control-text';
-        this.__layersControl.className = 'flatmap-layer-grid';
+        this.__layersControl.className = 'flatmap-control-grid';
 
         const innerHTML = [];
         innerHTML.push(`<label for="layer-all-layers">ALL LAYERS:</label><input id="layer-all-layers" type="checkbox" checked/>`);
@@ -323,7 +324,6 @@ export class LayerControl
 
 //==============================================================================
 
-
 const SCKAN_STATES = [
     {
         'id': 'VALID',
@@ -338,11 +338,11 @@ const SCKAN_STATES = [
 
 export class SCKANControl
 {
-    constructor(flatmap)
+    constructor(flatmap, options={sckan: 'valid'})
     {
         this.__flatmap = flatmap;
         this.__map = undefined;
-        this.__state = 'valid';
+        this.__initialState = options.sckan || 'valid';
     }
 
     getDefaultPosition()
@@ -356,25 +356,22 @@ export class SCKANControl
     {
         this.__map = map;
         this.__container = document.createElement('div');
-        this.__container.className = 'maplibregl-ctrl';
-        this.__container.id = 'flatmap-layer-control';
-
+        this.__container.className = 'maplibregl-ctrl flatmap-control';
         this.__sckan = document.createElement('div');
-        this.__sckan.id = 'sckan-control-text';
-        this.__sckan.className = 'flatmap-layer-grid';
+        this.__sckan.className = 'flatmap-control-grid';
 
         const innerHTML = [];
-        let checked = (this.__state === 'all') ? 'checked' : '';
+        let checked = (this.__initialState === 'all') ? 'checked' : '';
         innerHTML.push(`<label for="sckan-all-paths">ALL PATHS:</label><input id="sckan-all-paths" type="checkbox" ${checked}/>`);
         for (const state of SCKAN_STATES) {
-            checked = (this.__state.toUpperCase() === state.id) ? 'checked' : '';
+            checked = (this.__initialState.toUpperCase() === state.id) ? 'checked' : '';
             innerHTML.push(`<label for="sckan-${state.id}">${state.description}</label><input id="sckan-${state.id}" type="checkbox" ${checked}/>`);
         }
         this.__sckan.innerHTML = innerHTML.join('\n');
 
         this.__sckanCount = SCKAN_STATES.length;
-        this.__checkedCount = (this.__state === 'all') ? this.__sckanCount
-                            : (this.__state === 'none') ? 0
+        this.__checkedCount = (this.__initialState === 'all') ? this.__sckanCount
+                            : (this.__initialState === 'none') ? 0
                             : 1;
         this.__halfCount = Math.trunc(this.__sckanCount/2);
 
@@ -407,7 +404,8 @@ export class SCKANControl
                 this.__container.appendChild(this.__sckan);
                 this.__button.setAttribute('control-visible', 'true');
                 const allLayersCheckbox = document.getElementById('sckan-all-paths');
-                allLayersCheckbox.indeterminate = this.__state.toLowerCase().includes('valid');
+                allLayersCheckbox.indeterminate = (this.__checkedCount > 0)
+                                               && (this.__checkedCount < this.__sckanCount);
                 this.__sckan.focus();
             } else {
                 this.__sckan = this.__container.removeChild(this.__sckan);
@@ -430,11 +428,12 @@ export class SCKANControl
                     const sckanCheckbox = document.getElementById(`sckan-${state.id}`);
                     if (sckanCheckbox) {
                         sckanCheckbox.checked = event.target.checked;
-                        }
+                        this.__flatmap.enableSckanPath(state.id, event.target.checked);
+                    }
                 }
-                this.__flatmap.showSckanPaths(this.__state);
             } else if (event.target.id.startsWith('sckan-')) {
                 const sckanId = event.target.id.substring(6);
+                this.__flatmap.enableSckanPath(sckanId, event.target.checked);
                 if (event.target.checked) {
                     this.__checkedCount += 1;
                 } else {
@@ -442,24 +441,14 @@ export class SCKANControl
                 }
                 const allLayersCheckbox = document.getElementById('sckan-all-paths');
                 if (this.__checkedCount === 0) {
-                    this.__state = 'none';
                     allLayersCheckbox.checked = false;
                     allLayersCheckbox.indeterminate = false;
                 } else if (this.__checkedCount === this.__sckanCount) {
-                    this.__state = 'all';
                     allLayersCheckbox.checked = true;
                     allLayersCheckbox.indeterminate = false;
                 } else {
-                    if (event.target.checked) {
-                        this.__state = sckanId;
-                    } else if (sckanId === 'VALID') {
-                        this.__state = 'invalid';
-                    } else {
-                        this.__state = 'valid';
-                    }
                     allLayersCheckbox.indeterminate = true;
                 }
-                this.__flatmap.showSckanPaths(this.__state);
             }
         }
         event.stopPropagation();
@@ -468,6 +457,61 @@ export class SCKANControl
 
 //==============================================================================
 
+export class NerveControl
+{
+    constructor(flatmap, options={showCentrelines: false})
+    {
+        this.__flatmap = flatmap;
+        this.__map = undefined;
+        this.__visible = options.showCentrelines || false;
+    }
+
+    getDefaultPosition()
+    //==================
+    {
+        return 'top-right';
+    }
+
+    onAdd(map)
+    //========
+    {
+        this.__map = map;
+        this.__container = document.createElement('div');
+        this.__container.className = 'maplibregl-ctrl';
+
+        this.__button = document.createElement('button');
+        this.__button.id = 'map-nerve-button';
+        this.__button.className = 'control-button text-button';
+        this.__button.setAttribute('type', 'button');
+        this.__button.setAttribute('aria-label', 'Show/hide nerve centrelines');
+        this.__button.textContent = 'NERVES';
+        this.__button.title = 'Show/hide nerve centrelines';
+        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-nerve-button') {
+            this.__visible = !this.__visible;
+            this.__flatmap.enableCentrelines(this.__visible);
+        }
+        event.stopPropagation();
+    }
+}
+
+//==============================================================================
+
 export class BackgroundControl
 {
     constructor(flatmap)

package/src/flatmap-viewer.js

@@ -275,21 +275,24 @@ class FlatMap
     }
 
     /**
-     * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving path types
-     *                                                                  with their descriptions and colours
+     * @returns {Array.<{type: string, label: string, colour: string}>} an array of objects giving the path types
+     *                                                                  present in the map along with their
+     *                                                                  descriptions and colours
      */
     pathTypes()
     //=========
     {
-        return pathways.PATH_TYPES;
+        if (this._userInteractions !== null) {
+            return this._userInteractions.pathways.pathTypes();
+        }
     }
 
     /**
      * Hide or show paths of a given type.
      *
-     * @param      {string}   pathType The path type
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type otherwise only hide the paths
+     * @param {string}   pathType The path type
+     * @param {boolean}  enable  Show or hide paths of that type. Defaults to
+     *                           ``true`` (show)
      */
     enablePath(pathType, enable=true)
     //===============================
@@ -300,32 +303,31 @@ class FlatMap
     }
 
     /**
-     * Hide or show all paths except those of the given type.
+     * Hide or show all paths valid in SCKAN.
      *
-     * @param      {string|Array.<string>}   pathTypes The path type(s)
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type(s) otherwise only hide the paths
+     * @param {string}   sckanState  Either ``valid`` or ``invalid``
+     * @param {boolean}  enable  Show or hide paths with that SCKAN state.
+     *                           Defaults to ``true`` (show)
      */
-    showPaths(pathTypes, enable=true)
-    //===============================
+    enableSckanPath(sckanState, enable=true)
+    //======================================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.showPaths(pathTypes, enable);
+            this._userInteractions.enableSckanPath(sckanState, enable);
         }
     }
 
     /**
-     * Hide or show all paths valid in SCKAN.
+     * Hide or show centrelines and nodes.
      *
-     * @param      {string}   validity Either ``VALID`` or ``INVALID``
-     * @param      {boolean}  [enable=true]  If ``true`` then only show the paths
-     *                                       of the type(s) otherwise only hide the paths
+     * @param {boolean}  enable  Show or centrelines and associated nodes.
+     *                           Defaults to ``true`` (show)
      */
-    showSckanPaths(state='valid')
-    //===========================
+    enableCentrelines(enable=true)
+    //============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.showSckanPaths(state);
+            this._userInteractions.enableCentrelines(enable);
         }
     }
 
@@ -664,18 +666,25 @@ class FlatMap
         }
     }
 
-    setColour(options=null)
-    //=====================
+    setPaint(options=null)
+    //====================
     {
         options = utils.setDefaults(options, {
             colour: true,
             outline: true
         });
         if (this._userInteractions !== null) {
-            this._userInteractions.setColour(options);
+            this._userInteractions.setPaint(options);
         }
     }
 
+    setColour(options=null)
+    //=====================
+    {
+        console.log('`setColour()` is deprecated; please use `setPaint()` instead.')
+        this.setPaint(options);
+    }
+
     //==========================================================================
 
     /**
@@ -781,17 +790,17 @@ class FlatMap
      *
      * @param      {string}  anatomicalId     The anatomical identifier of the feature on which
      *                                        to place the marker
-     * @param      {string}  [markerType='']  An optional parameter giving the type of marker
-     *                                        to use. Apart from the default, the only marker
-     *                                        type recognised is ``simulation``
+     * @param      {string}  [htmlElement=null]  An optional parameter giving the DOM element to
+     *                                           use as a marker. The default is a light blue,
+     *                                           droplet-shaped SVG marker.
      * @return     {integer}  The identifier for the resulting marker. -1 is returned if the
      *                        map doesn't contain a feature with the given anatomical identifier
      */
-    addMarker(anatomicalId, markerType='')
-    //====================================
+    addMarker(anatomicalId,  htmlElement=null)
+    //========================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.addMarker(anatomicalId, markerType);
+            return this._userInteractions.addMarker(anatomicalId, htmlElement);
         }
         return -1;
     }
@@ -1272,9 +1281,9 @@ export class MapManager
                 // Note the kind of map
 
                 if ('style' in mapIndex) {
-                    mapOptions.style = mapIndex.style;  // Currently ``flatmap`` or ``fcdiagram``
+                    mapOptions.style = mapIndex.style;  // Currently ``anatomical`` or ``functional``
                 } else {
-                    mapOptions.style = 'flatmap';
+                    mapOptions.style = 'flatmap';       // Default is a generic ``flatmap``
                 }
 
                 // Mapmaker has changed the name of the field to indicate that indicates if

package/src/info.js

@@ -238,7 +238,11 @@ export class InfoControl
                         if (prop in feature.properties) {
                             const value = feature.properties[prop];
                             if (value !== undefined) {
-                                values[prop] = value;
+                                if (prop === 'label') {
+                                    values[prop] = value.replaceAll("\n", "<br/>");
+                                } else {
+                                    values[prop] = value;
+                                }
                             }
                         }
                     });

package/src/interactions.js

@@ -37,8 +37,8 @@ import {ContextMenu} from './contextmenu.js';
 import {displayedProperties} from './info.js';
 import {InfoControl} from './info.js';
 import {LayerManager} from './layers.js';
-import {PATH_TYPES, PATHWAYS_LAYER, Pathways} from './pathways.js';
-import {BackgroundControl, LayerControl, PathControl, SCKANControl} from './controls.js';
+import {PATHWAYS_LAYER, Pathways} from './pathways.js';
+import {BackgroundControl, LayerControl, NerveControl, PathControl, SCKANControl} from './controls.js';
 import {SearchControl} from './search.js';
 import {VECTOR_TILES_SOURCE} from './styling.js';
 
@@ -118,13 +118,7 @@ export class UserInteractions
         this.__annotationByMarkerId = new Map();
 
         // Where to put labels and popups on a feature
-        this.__centralPositions = new Map();
-
-        // MapLibre dynamically sets a transform on marker elements so in
-        // order to apply a scale transform we need to create marker icons
-        // inside the marker container <div>.
-        this._defaultMarkerHTML = new maplibre.Marker().getElement().innerHTML;
-        this._simulationMarkerHTML = new maplibre.Marker({color: '#005974'}).getElement().innerHTML;
+        this.__markerPositions = new Map();
 
         // Fit the map to its initial position
 
@@ -139,7 +133,7 @@ export class UserInteractions
         this._pathways = new Pathways(flatmap);
 
         // The path types in this map
-        const mapPathTypes = this._pathways.pathTypes;
+        const mapPathTypes = this._pathways.pathTypes();
 
         // Disable paths that are not initially shown
         for (const path of mapPathTypes) {
@@ -167,9 +161,15 @@ export class UserInteractions
             // Add a control to manage our layers
             this._map.addControl(new LayerControl(flatmap, this._layerManager));
 
+            // Add a control for nerve centrelines if they are present
+            if (this._pathways.haveCentrelines) {
+                this._map.addControl(new NerveControl(flatmap, this._layerManager, {showCentrelines: false}));
+                this.enableCentrelines(false);
+            }
+
             // A SCKAN path control for FC maps
-            if (flatmap.options.style === 'fcdiagram') {
-                this._map.addControl(new SCKANControl(flatmap));
+            if (flatmap.options.style === 'functional') {
+                this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
             }
         }
 
@@ -213,6 +213,12 @@ export class UserInteractions
         this.__pan_zoom_enabled = false;
     }
 
+    get pathways()
+    //============
+    {
+        return this._pathways;
+    }
+
     getState()
     //========
     {
@@ -246,11 +252,11 @@ export class UserInteractions
         }
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         this.__colourOptions = options;
-        this._layerManager.setColour(options);
+        this._layerManager.setPaint(options);
     }
 
     getLayers()
@@ -291,7 +297,7 @@ export class UserInteractions
     {
         featureId = +featureId;   // Ensure numeric
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setColour({...this.__colourOptions, dimmed: dim});
+            this._layerManager.setPaint({...this.__colourOptions, dimmed: dim});
         }
         if (this._selectedFeatureIds.has(featureId)) {
             this._selectedFeatureIds.set(featureId, this._selectedFeatureIds.get(featureId) + 1);
@@ -321,7 +327,7 @@ export class UserInteractions
             }
         }
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setColour({...this.__colourOptions, dimmed: false});
+            this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
         }
     }
 
@@ -335,7 +341,7 @@ export class UserInteractions
             }
         }
         this._selectedFeatureIds.clear();
-        this._layerManager.setColour({...this.__colourOptions, dimmed: false});
+        this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
     }
 
     activeFeaturesAtEvent_(event)
@@ -609,7 +615,7 @@ export class UserInteractions
                 location = this.__lastClickLngLat;
             } else {
                 // Position popup at the feature's 'centre'
-                location = this.__centralPosition(featureId, ann);
+                location = this.__markerPosition(featureId, ann);
             }
 
             // Make sure the feature is on screen
@@ -651,9 +657,13 @@ export class UserInteractions
         const tooltips = [];
         for (const lineFeature of lineFeatures) {
             const properties = lineFeature.properties;
-            if ('label' in properties
-               && (!('tooltip' in properties) || properties.tooltip)
-               && !('labelled' in properties)) {
+            if ('error' in properties) {
+                tooltips.push(`<div class="feature-error">Error: ${properties.error}</div>`)
+            }
+            if ('warning' in properties) {
+                tooltips.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
+            }
+            if ('label' in properties && (!('tooltip' in properties) || properties.tooltip)) {
                 let tooltip = '';
                 const label = properties.label;
                 const cleanLabel = (label.substr(0, 1).toUpperCase() + label.substr(1)).replaceAll("\n", "<br/>");
@@ -662,32 +672,37 @@ export class UserInteractions
                 }
             }
         }
-        if (tooltips.length === 0) {
-            return '';
-        }
-        return `<div class='flatmap-feature-label'>${tooltips.join('<hr/>')}</div>`;
+        return (tooltips.length === 0) ? ''
+                                       : `<div class='flatmap-feature-label'>${tooltips.join('<hr/>')}</div>`;
     }
 
     tooltipHtml_(properties, forceLabel=false)
     //========================================
     {
+        const tooltip = [];
+        if ('error' in properties) {
+            tooltip.push(`<div class="feature-error">Error: ${properties.error}</div>`)
+        }
+        if ('warning' in properties) {
+            tooltip.push(`<div class="feature-error">Warning: ${properties.warning}</div>`)
+        }
         if (('label' in properties || 'hyperlink' in properties)
-           && (forceLabel || !('tooltip' in properties) || properties.tooltip)
-           && !('labelled' in properties)) {
+                && (forceLabel || !('tooltip' in properties) || properties.tooltip)) {
             const label = ('label' in properties) ? (properties.label.substr(0, 1).toUpperCase()
                                                    + properties.label.substr(1)).replaceAll("\n", "<br/>")
                                                   : '';
             if ('hyperlink' in properties) {
                 if (label === '') {
-                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${properties.hyperlink}</a></div>`;
+                    tooltip.push(`<a href='${properties.hyperlink}'>${properties.hyperlink}</a>`);
                 } else {
-                    return `<div class='flatmap-feature-label'><a href='${properties.hyperlink}'>${label}</a></div>`;
+                    tooltip.push(`<a href='${properties.hyperlink}'>${label}</a></div>`);
                 }
             } else {
-                return `<div class='flatmap-feature-label'>${label}</div>`;
+                tooltip.push(label);
             }
         }
-        return '';
+        return (tooltip.length === 0) ? ''
+                                      : `<div class='flatmap-feature-label'>${tooltip.join('<hr/>')}</div>`;
     }
 
     __featureEvent(type, feature)
@@ -976,6 +991,7 @@ export class UserInteractions
     togglePaths()
     //===========
     {
+        console.log('Depracated API function called: togglePaths()')
         if (this._disabledPathFeatures){
             this.enablePathFeatures_(true, this._pathways.allFeatureIds());
             this._disabledPathFeatures = false;
@@ -990,29 +1006,6 @@ export class UserInteractions
         this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
     }
 
-    showPaths(pathTypes, enable=true)
-    //===============================
-    {
-        // Disable/enable all paths except those with `pathTypes`
-        if (Array.isArray(pathTypes)) {
-            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 {
-            for (const pathType of pathways.PATH_TYPES) {
-                if (pathType.type === pathTypes) {
-                    this.enablePath(pathType.type, enable)
-                } else {
-                    this.enablePath(pathType.type, !enable)
-                }
-            }
-        }
-    }
-
     pathwaysFeatureIds(externalIds)
     //=============================
     {
@@ -1028,52 +1021,57 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
-    showSckanPaths(state='valid')
-    //===========================
+    enableCentrelines(show=true)
+    //==========================
     {
-        this._layerManager.setFilter({sckan: state});
+        this.enablePath('centreline', show);
+        this._layerManager.setPaint({showCentrelines: show});
+    }
+
+    enableSckanPath(sckanState, enable=true)
+    //======================================
+    {
+        this._layerManager.enableSckanPath(sckanState, enable);
     }
 
     //==============================================================================
 
-    // Find where to place a label or popup on a feature
+    // Marker handling
 
-    __centralPosition(featureId, annotation)
-    //======================================
+    __markerPosition(featureId, annotation)
     {
-        if (this.__centralPositions.has(featureId)) {
-            return this.__centralPositions.get(featureId);
+        if (this.__markerPositions.has(featureId)) {
+            return this.__markerPositions.get(featureId);
         }
-        let position = annotation.centroid;
-        const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
-            'sourceLayer': this._flatmap.options.separateLayers
-                            ? `${annotation['layer']}_${annotation['tile-layer']}`
-                            : annotation['tile-layer'],
-            'filter': [
-                'all',
-                [ '==', ['id'], parseInt(featureId) ],
-                [ '==', ['geometry-type'], 'Polygon' ]
-            ]
-        });
-        if (features.length > 0) {
-            const feature = features[0];
-            const polygon = feature.geometry.coordinates;
-            // Rough heuristic. Area is in km^2; below appears to be good enough.
-            const precision = ('area' in feature.properties)
-                                ? Math.sqrt(feature.properties.area)/500000
-                                : 0.1;
-            position = polylabel(polygon, precision);
+        let position = annotation.markerPosition || annotation.centroid;
+        if (position === null || position == undefined) {
+            // Find where to place a label or popup on a feature
+            const features = this._map.querySourceFeatures(VECTOR_TILES_SOURCE, {
+                'sourceLayer': this._flatmap.options.separateLayers
+                                ? `${annotation['layer']}_${annotation['tile-layer']}`
+                                : annotation['tile-layer'],
+                'filter': [
+                    'all',
+                    [ '==', ['id'], parseInt(featureId) ],
+                    [ '==', ['geometry-type'], 'Polygon' ]
+                ]
+            });
+            if (features.length > 0) {
+                const feature = features[0];
+                const polygon = feature.geometry.coordinates;
+                // Rough heuristic. Area is in km^2; below appears to be good enough.
+                const precision = ('area' in feature.properties)
+                                    ? Math.sqrt(feature.properties.area)/500000
+                                    : 0.1;
+                position = polylabel(polygon, precision);
+            }
         }
-        this.__centralPositions.set(featureId, position);
+        this.__markerPositions.set(featureId, position);
         return position;
     }
 
-    //==============================================================================
-
-    // Marker handling
-
-    addMarker(anatomicalId, markerType='')
-    //====================================
+    addMarker(anatomicalId, htmlElement=null)
+    //=======================================
     {
         const featureIds = this._flatmap.modelFeatureIds(anatomicalId);
         let markerId = -1;
@@ -1089,19 +1087,19 @@ export class UserInteractions
                     markerId = this.__lastMarkerId;
                 }
 
+                // MapLibre dynamically sets a transform on marker elements so in
+                // order to apply a scale transform we need to create marker icons
+                // inside the marker container <div>.
+                const markerHTML = htmlElement ? new maplibre.Marker({element: htmlElement})
+                                               : new maplibre.Marker();
+
                 const markerElement = document.createElement('div');
                 const markerIcon = document.createElement('div');
-                if (markerType === 'simulation') {
-                    markerIcon.innerHTML = this._simulationMarkerHTML;
-                } else {
-                    markerIcon.innerHTML = this._defaultMarkerHTML;
-                }
+                markerIcon.innerHTML = markerHTML.getElement().innerHTML;
                 markerIcon.className = 'flatmap-marker';
                 markerElement.appendChild(markerIcon);
 
-                const markerPosition = (annotation.geometry === 'Polygon')
-                                     ? this.__centralPosition(featureId, annotation)
-                                     : annotation.centroid;
+                const markerPosition = this.__markerPosition(featureId, annotation);
                 const marker = new maplibre.Marker(markerElement)
                                            .setLngLat(markerPosition)
                                            .addTo(this._map);

package/src/layers.js

@@ -93,14 +93,12 @@ class MapStylingLayers
                                      : sourceLayer;
     }
 
-    setColour(options)
+    setPaint(options)
     {
-
     }
 
     setFilter(options)
     {
-
     }
 }
 
@@ -124,6 +122,8 @@ class MapFeatureLayers extends MapStylingLayers
                 this.__addStyleLayer(style.FeatureDashLineLayer);
                 this.__addStyleLayer(style.FeatureLineLayer);
                 this.__addStyleLayer(style.FeatureBorderLayer);
+                this.__addStyleLayer(style.CentrelineNodeFillLayer);
+                this.__addStyleLayer(style.CentrelineNodeBorderLayer);
             }
             this.__addPathwayStyleLayers();
             if (vectorFeatures) {
@@ -134,9 +134,9 @@ class MapFeatureLayers extends MapStylingLayers
             }
         }
 
-        // Make sure our colour options are set properly, in particular raster layer visibility
+        // Make sure our paint options are set properly, in particular raster layer visibility
 
-        this.setColour(this.__layerOptions);
+        this.setPaint(this.__layerOptions);
     }
 
     __addStyleLayer(styleClass, sourceLayer=FEATURES_LAYER)
@@ -167,8 +167,8 @@ class MapFeatureLayers extends MapStylingLayers
         }
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         for (const layer of this.__layers) {
             const paintStyle = layer.paintStyle(options, true);
@@ -208,8 +208,8 @@ class MapRasterLayers extends MapStylingLayers
             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);
+        // Make sure our paint options are set properly, in particular raster layer visibility
+        this.setPaint(this.__layerOptions);
     }
 
     addLayer(layer)
@@ -220,12 +220,12 @@ class MapRasterLayers extends MapStylingLayers
             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);
+        // Make sure our paint options are set properly, in particular raster layer visibility
+        this.setPaint(this.__layerOptions);
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         const coloured = !('colour' in options) || options.colour;
         for (const layer of this.__layers) {
@@ -250,7 +250,7 @@ export class LayerManager
             colour: true,
             outline: true,
             sckan: 'valid'
-        });;
+        });
         const backgroundLayer = new style.BackgroundLayer();
         if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
@@ -305,19 +305,19 @@ export class LayerManager
                 this.__layerOptions.activeRasterLayer = enable;
                 for (const mapLayer of this.__mapLayers.values()) {
                     if (mapLayer.id !== RASTER_LAYERS_ID) {
-                        mapLayer.setColour(this.__layerOptions);
+                        mapLayer.setPaint(this.__layerOptions);
                     }
                 }
             }
         }
     }
 
-    setColour(options={})
-    //===================
+    setPaint(options={})
+    //==================
     {
         this.__layerOptions = utils.setDefaults(options, this.__layerOptions);
         for (const mapLayer of this.__mapLayers.values()) {
-            mapLayer.setColour(this.__layerOptions);
+            mapLayer.setPaint(this.__layerOptions);
         }
     }
 
@@ -329,6 +329,31 @@ export class LayerManager
             mapLayer.setFilter(this.__layerOptions);
         }
     }
+
+    enableSckanPath(sckanState, enable=true)
+    //======================================
+    {
+        const currentState = this.__layerOptions.sckan;
+        const validEnabled = ['valid', 'all'].indexOf(currentState) >= 0;
+        const invalidEnabled = ['invalid', 'all'].indexOf(currentState) >= 0;
+        let newState = sckanState.toLowerCase();
+        if (newState === 'valid') {
+            if (enable && !validEnabled) {
+                newState = invalidEnabled ? 'all' : 'valid';
+            } else if (!enable && validEnabled) {
+                newState = invalidEnabled ? 'invalid' : 'none';
+            }
+        } else if (newState === 'invalid') {
+            if (enable && !invalidEnabled) {
+                newState = validEnabled ? 'all' : 'invalid';
+            } else if (!enable && invalidEnabled) {
+                newState = validEnabled ? 'valid' : 'none';
+            }
+        }
+        if (newState !== this.__layerOptions.sckan) {
+            this.setFilter({sckan: newState});
+        }
+    }
 }
 
 //==============================================================================

package/src/pathways.js

@@ -26,19 +26,20 @@ export const PATHWAYS_LAYER = 'pathways';
 
 //==============================================================================
 
-export const PATH_TYPES = [
+const PATH_TYPES = [
     { type: "cns", label: "CNS", colour: "#9B1FC1"},
     { type: "intracardiac", label: "Local circuit neuron", colour: "#F19E38"},
     { type: "para-pre", label: "Parasympathetic pre-ganglionic", colour: "#3F8F4A"},
-    { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A"},
+    { type: "para-post", label: "Parasympathetic post-ganglionic", colour: "#3F8F4A", dashed: true},
     { type: "sensory", label: "Sensory (afferent) neuron", colour: "#2A62F6"},
     { type: "somatic", label: "Somatic lower motor", colour: "#98561D"},
     { type: "symp-pre", label: "Sympathetic pre-ganglionic", colour: "#EA3423"},
-    { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423"},
+    { type: "symp-post", label: "Sympathetic post-ganglionic", colour: "#EA3423", dashed: true},
     { type: "other", label: "Other neuron type", colour: "#888"},
     { type: "arterial", label: "Arterial blood vessel", colour: "#F00"},
     { type: "venous", label: "Venous blood vessel", colour: "#2F6EBA"},
-    { type: "centreline", label: "Nerve centrelines", colour: "#2F6EBA", enabled: false}
+    { type: "centreline", label: "Nerve centrelines", colour: "#CCC", enabled: false},
+    { type: "error", label: "Paths with errors or warnings", colour: "#FF0"}
 ];
 
 export const PATH_STYLE_RULES =
@@ -142,16 +143,28 @@ export class Pathways
                 this.__typePaths['other'].push(...paths);
             }
         }
+        // Nerve centrelines are a special case with their own controls
+        this.__haveCentrelines = false;
     }
 
-    get pathTypes()
-    //=============
+    get haveCentrelines()
+    //===================
+    {
+        return this.__haveCentrelines;
+    }
+
+    pathTypes()
+    //=========
     {
         const pathTypes = [];
         for (const pathType of PATH_TYPES) {
             if (pathType.type in this.__typePaths
             && this.__typePaths[pathType.type].length > 0) {
-                pathTypes.push(pathType);
+                if (pathType.type === 'centreline') {
+                    this.__haveCentrelines = true;
+                } else {
+                    pathTypes.push(pathType);
+                }
             }
         }
         return pathTypes;

package/src/styling.js

@@ -162,7 +162,8 @@ export class FeatureFillLayer extends VectorStyleLayer
             'filter': [
                 'all',
                 ['==', '$type', 'Polygon'],
-                ['!=', 'models', 'UBERON:0013702']
+                ['!=', 'models', 'UBERON:0013702'],
+                ['!has', 'node']
             ],
             'layout': {
                 'fill-sort-key': ['get', 'scale']
@@ -244,7 +245,8 @@ export class FeatureBorderLayer extends VectorStyleLayer
             'type': 'line',
             'filter': [
                 'all',
-                ['==', '$type', 'Polygon']
+                ['==', '$type', 'Polygon'],
+                ['!has', 'node']
             ],
             'paint': this.paintStyle(options)
         };
@@ -287,8 +289,8 @@ export class FeatureLineLayer extends VectorStyleLayer
             'line-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
-                ['has', 'colour'], ['get', 'colour'],
                 ['boolean', ['feature-state', 'active'], false], coloured ? '#888' : '#CCC',
+                ['has', 'colour'], ['get', 'colour'],
                 ['==', ['get', 'type'], 'network'], '#AFA202',
                 options.authoring ? '#C44' : '#444'
             ],
@@ -415,7 +417,6 @@ export class PathLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['boolean', ['feature-state', 'hidden'], false], '#CCC',
                 ['==', ['get', 'type'], 'bezier'], 'red',
-                ['has', 'error'], '#FFFE0E',
                 ['==', ['get', 'kind'], 'unknown'], '#888',
                 ...PATH_STYLE_RULES,
                 '#888'
@@ -424,6 +425,7 @@ export class PathLineLayer extends VectorStyleLayer
                 'case',
                     ['boolean', ['feature-state', 'hidden'], false], 0.05,
                     ['==', ['get', 'type'], 'bezier'], 1.0,
+                    ['==', ['get', 'kind'], 'error'], 1.0,
                     ['boolean', ['get', 'invisible'], false], 0.001,
                     ['boolean', ['feature-state', 'selected'], false], 1.0,
                     ['boolean', ['feature-state', 'active'], false], 1.0,
@@ -434,7 +436,7 @@ export class PathLineLayer extends VectorStyleLayer
                 'width', ["*", [
                     'case',
                         ['==', ['get', 'type'], 'bezier'], 0.1,
-                        ['has', 'error'], 1,
+                        ['==', ['get', 'kind'], 'error'], 1,
                         ['==', ['get', 'kind'], 'unknown'], 1,
                         ['boolean', ['get', 'invisible'], false], 0.1,
                         ['boolean', ['feature-state', 'selected'], false], 0.6,
@@ -568,6 +570,76 @@ export class CentrelineTrackLayer extends CentrelineLayer
 
 //==============================================================================
 
+export class CentrelineNodeFillLayer extends VectorStyleLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'node-fill', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const showNodes = options.showCentrelines || false;
+        const paintStyle = {
+                'fill-color': '#AFA202',
+                'fill-opacity': showNodes ? 0.7 : 0.01
+            }
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'fill',
+            'filter': [
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'node']
+            ],
+            'layout': {
+                'fill-sort-key': ['get', 'scale']
+            },
+            'paint': this.paintStyle(options)
+        };
+    }
+}
+
+export class CentrelineNodeBorderLayer extends VectorStyleLayer
+{
+    constructor(id, sourceLayer)
+    {
+        super(id, 'node-border', sourceLayer);
+    }
+
+    paintStyle(options={}, changes=false)
+    {
+        const showNodes = options.showCentrelines || false;
+        const paintStyle = {
+                'line-color': '#AFA202',
+                'line-opacity': showNodes ? 0.7 : 0.01,
+                'line-width': 0.5
+            }
+        return super.changedPaintStyle(paintStyle, changes);
+    }
+
+    style(options)
+    {
+        return {
+            ...super.style(),
+            'type': 'line',
+            'filter': [
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'node']
+            ],
+            'paint':  this.paintStyle(options)
+        };
+    }
+}
+
+//==============================================================================
+
 export class FeatureNerveLayer extends VectorStyleLayer
 {
     constructor(id, sourceLayer)

package/static/flatmap-viewer.css

@@ -202,40 +202,13 @@ li.flatmap-contextmenu-item:hover {
 label[for=path-all-paths] {
     font-weight: bold;
 }
-.nerve-cns {
-    background: #9B1FC1;
-}
-.nerve-intracardiac {
-    background: #F19E38;
-}
-.nerve-other {
-    background: #888;
-}
-.nerve-para-pre {
-    background: #3F8F4A;
-}
-.nerve-para-post {
-    background: repeating-linear-gradient(to right,#3F8F4A 0,#3F8F4A 6px,transparent 6px,transparent 9px)
-}
-.nerve-sensory {
-    background: #2A62F6;
-}
-.nerve-somatic {
-    background: #98561D;
-}
-.nerve-symp-pre {
-    background: #EA3423;
-}
-.nerve-symp-post {
-    background: repeating-linear-gradient(to right,#EA3423 0,#EA3423 6px,transparent 6px,transparent 9px)
-}
 
 /* Layer control */
 
-#flatmap-layer-control {
+.flatmap-control {
     text-align: right;
 }
-.flatmap-layer-grid {
+.flatmap-control-grid {
     margin-top: 10px;
     display: grid;
     grid-template-columns: 3.8fr 0.2fr;
@@ -250,7 +223,7 @@ label[for=path-all-paths] {
     padding: 4px;
     opacity: 0.8;
 }
-.flatmap-layer-grid input {
+.flatmap-control-grid input {
     height:  1.1em;
 }
 label[for=layer-all-layers] {