@abi-software/flatmap-viewer 2.6.1 → 2.7.0-a.1

package/README.rst

@@ -26,7 +26,7 @@ Running
 
 ::
 
-    $ npm start
+    $ npm run dev
 
 Maps can then be viewed at http://localhost:3000
 
@@ -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.6.1``
+* ``npm install @abi-software/flatmap-viewer@2.6.2``
 
 Documentation
 -------------

package/lib/index.ts

@@ -0,0 +1,9 @@
+//==============================================================================
+
+import {FlatMap, MapManager} from '../src/flatmap-viewer'
+
+//==============================================================================
+
+export {FlatMap, MapManager}
+
+//==============================================================================

package/package.json

@@ -1,26 +1,28 @@
 {
   "name": "@abi-software/flatmap-viewer",
-  "version": "2.6.1",
+  "version": "2.7.0-a.1",
   "description": "Flatmap viewer using Maplibre GL",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AnatomicMaps/flatmap-viewer.git"
   },
+  "type": "module",
   "main": "src/main.js",
   "files": [
+    "lib",
     "src",
     "static"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node app",
-    "build": "webpack --mode production",
+    "dev": "vite serve app --port 3000",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "preview": "vite preview",
     "docs": "cd docs; poetry run make html"
   },
   "author": "David Brooks",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.10.4",
     "@deck.gl/core": "^8.9.35",
     "@deck.gl/layers": "^8.9.35",
     "@deck.gl/mapbox": "^8.9.35",
@@ -33,28 +35,16 @@
     "colord": "^2.9.3",
     "core-js-pure": "^3.36.1",
     "html-es6cape": "^2.0.2",
-    "maplibre-gl": ">=3.6.0",
+    "maplibre-gl": ">=4.1.0",
     "mathjax-full": "^3.2.2",
     "minisearch": "^2.2.1",
     "polylabel": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "browser-sync": "^2.26.7",
-    "bs-fullscreen-message": "^1.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^6.7.3",
+    "@types/node": "^20.12.7",
     "eslint": "^8.7.0",
-    "express": "^4.17.1",
-    "html-webpack-plugin": "^4.5.2",
-    "strip-ansi": "^7.0.1",
-    "style-loader": "^3.3.2",
-    "webpack": "^5.16.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-middleware": "^4.1.0",
-    "webpack-node-externals": "^1.7.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^3.8.1"
   }
 }

package/src/controls/annotation.js

@@ -292,7 +292,7 @@ export class AnnotationDrawControl
     }
 
     changeMode(type)
-    //===============
+    //==============
     {
         // Change the mode directly without listening to modes callback
         this.__draw.changeMode(type.mode, type.options)

package/src/controls/{paths3d.js → flightpaths.js}

@@ -18,7 +18,7 @@ limitations under the License.
 
 ******************************************************************************/
 
-export class Path3DControl
+export class FlightPathControl
 {
     #button
     #container
@@ -26,9 +26,10 @@ export class Path3DControl
     #map = null
     #flatmap
 
-    constructor(flatmap)
+    constructor(flatmap, enabled)
     {
         this.#flatmap = flatmap
+        this.#enabled = !!enabled
     }
 
     getDefaultPosition()
@@ -46,11 +47,15 @@ export class Path3DControl
         this.#button = document.createElement('button')
         this.#button.className = 'control-button text-button'
         this.#button.setAttribute('type', 'button')
-        this.#button.setAttribute('aria-label', 'Show 3D paths')
+        this.#button.setAttribute('aria-label', 'Show flight paths')
         this.#button.textContent = '3D'
-        this.#button.title = 'Show/hide 3D paths'
+        this.#button.title = 'Show/hide flight paths'
         this.#container.appendChild(this.#button)
         this.#container.addEventListener('click', this.onClick.bind(this))
+        if (this.#enabled) {
+            this.#button.classList.add('control-active')
+            this.__setBackground()
+        }
         return this.#container
     }
 
@@ -75,11 +80,11 @@ export class Path3DControl
     //=============
     {
         if (this.#button.classList.contains('control-active')) {
-            this.#flatmap.enable3dPaths(false)
+            this.#flatmap.enableFlightPaths(false)
             this.#button.classList.remove('control-active')
             this.#enabled = false
         } else {
-            this.#flatmap.enable3dPaths(true)
+            this.#flatmap.enableFlightPaths(true)
             this.#button.classList.add('control-active')
             this.#enabled = true
         }

package/src/flatmap-viewer.js

@@ -33,12 +33,14 @@ import '../static/css/flatmap-viewer.css';
 
 //==============================================================================
 
-import {MapServer, loadJSON} from './mapserver.js';
+import {MapServer} from './mapserver.js';
 import {SearchIndex} from './search.js';
 import {UserInteractions} from './interactions.js';
 
 import {APINATOMY_PATH_PREFIX} from './pathways';
 
+import {loadClusterIcons} from './layers/cluster'
+
 import * as images from './images.js';
 import * as utils from './utils.js';
 
@@ -61,7 +63,7 @@ export const UNCLASSIFIED_TAXON_ID = 'NCBITaxon:2787823';   // unclassified entr
 * Maps are not created directly but instead are created and loaded by
 * :meth:`LoadMap` of :class:`MapManager`.
 */
-class FlatMap
+export class FlatMap
 {
     constructor(container, mapBaseUrl, mapDescription, resolve)
     {
@@ -204,6 +206,9 @@ class FlatMap
             await this.addImage(image.id, image.url, '', image.options);
         }
 
+        // Load icons used for clustered markers
+        await loadClusterIcons(this._map)
+
         // Layers have now loaded so finish setting up
         this._userInteractions = new UserInteractions(this);
     }
@@ -901,15 +906,15 @@ class FlatMap
     }
 
     /**
-     * Show/hide 3D path view.
+     * Show/hide flight path view.
      *
      * @param      {boolean}  [enable=true]
      */
-    enable3dPaths(enable=true)
-    //========================
+    enableFlightPaths(enable=true)
+    //============================
     {
         if (this._userInteractions !== null) {
-            this._userInteractions.enable3dPaths(enable)
+            this._userInteractions.enableFlightPaths(enable)
         }
     }
 
@@ -966,6 +971,21 @@ class FlatMap
         return -1;
     }
 
+    addMarkers(anatomicalIds,  options={})
+    //====================================
+    {
+        const markerIds = []
+        for (const anatomicalId of anatomicalIds) {
+            if (this._userInteractions !== null) {
+                markerIds.push(this._userInteractions.addMarker(anatomicalId, options))
+            } else {
+                markerIds.push(-1)
+            }
+        }
+        return markerIds
+    }
+
+
     /**
      * Remove a marker from the map.
      *
@@ -975,7 +995,7 @@ class FlatMap
     removeMarker(markerId)
     //====================
     {
-        if (this._userInteractions !== null) {
+        if (markerId > -1 && this._userInteractions !== null) {
             this._userInteractions.removeMarker(markerId);
         }
     }
@@ -1046,19 +1066,17 @@ class FlatMap
             'alert',
             'biological-sex'
         ];
-        const jsonProperties = [
-            'hyperlinks'
-        ];
         for (const property of exportedProperties) {
             if (property in properties) {
                 const value = properties[property];
                 if (value !== undefined) {
-                    if (jsonProperties.includes(property)) {
-                        data[property] = JSON.parse(properties[property])
+                    if ((Array.isArray(value) && value.length)
+                     || (value.constructor === Object && Object.keys(value).length)) {
+                        data[property] = value
                     } else if (property === 'featureId') {
-                        data[property] = +properties[property];  // Ensure numeric
+                        data[property] = +value;  // Ensure numeric
                     } else {
-                        data[property] = properties[property];
+                        data[property] = value;
                     }
                 }
             }
@@ -1569,6 +1587,7 @@ export class MapManager
     * @arg options {Object} Configurable options for the map.
     * @arg options.background {string} Background colour of flatmap. Defaults to ``white``.
     * @arg options.debug {boolean} Enable debugging mode.
+    * @arg options.flightPaths {boolean} Enable flight path (3D) view of neuron paths
     * @arg options.fullscreenControl {boolean} Add a ``Show full screen`` button to the map.
     * @arg options.layerOptions {Object} Options to control colour and outlines of features
     * @arg options.layerOptions.colour {boolean} Use colour fill (if available) for features. Defaults to ``true``.

package/src/interactions.js

@@ -43,7 +43,7 @@ import {AnnotatorControl, BackgroundControl, LayerControl, NerveControl,
         SCKANControl} from './controls/controls';
 import {AnnotationDrawControl, DRAW_ANNOTATION_LAYERS} from './controls/annotation'
 import {PathControl} from './controls/paths';
-import {Path3DControl} from './controls/paths3d'
+import {FlightPathControl} from './controls/flightpaths'
 import {SearchControl} from './controls/search';
 import {MinimapControl} from './controls/minimap';
 import {SystemsControl} from './controls/systems';
@@ -180,12 +180,14 @@ export class UserInteractions
         const mapPathTypes = this.__pathManager.pathTypes();
 
         // Add and manage our layers. NB. this needs to after we have a
-        // path manager but before path enabled state is set.
+        // path manager but before paths are enabled
 
         this._layerManager = new LayerManager(flatmap, this);
 
         // Set initial enabled state of paths
 
+        this.__pathManager.enablePathLines(true, true)
+
         for (const path of mapPathTypes) {
             this.__pathManager.enablePathsByType(path.type, path.enabled, true);
         }
@@ -251,7 +253,7 @@ export class UserInteractions
                 this._map.addControl(new TaxonsControl(flatmap));
             }
 
-            this._map.addControl(new Path3DControl(this));
+            this._map.addControl(new FlightPathControl(this, flatmap.options.flightPaths));
 
             if (flatmap.options.annotator) {
                 this._map.addControl(new AnnotatorControl(flatmap));
@@ -265,6 +267,11 @@ export class UserInteractions
         this.#annotationDrawControl = new AnnotationDrawControl(flatmap, false)
         this._map.addControl(this.#annotationDrawControl)
 
+        // Set initial path viewing mode
+        if (flatmap.options.flightPaths === true) {
+            this._layerManager.setFlightPathMode(true)
+        }
+
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -456,10 +463,10 @@ export class UserInteractions
         this._layerManager.activate(layerId, enable);
     }
 
-    enable3dPaths(enable=true)
-    //========================
+    enableFlightPaths(enable=true)
+    //============================
     {
-        this._layerManager.set3dMode(enable)
+        this._layerManager.setFlightPathMode(enable)
     }
 
     getSystems()
@@ -1305,6 +1312,7 @@ export class UserInteractions
     // Marker handling
 
     __markerPosition(featureId, annotation)
+    //=====================================
     {
         if (this.__markerPositions.has(featureId)) {
             return this.__markerPositions.get(featureId);
@@ -1364,23 +1372,29 @@ export class UserInteractions
                     markerOptions.className = options.className;
                 }
                 const markerPosition = this.__markerPosition(featureId, annotation);
-                const marker = new maplibregl.Marker(markerOptions)
-                                             .setLngLat(markerPosition)
-                                             .addTo(this._map);
-                markerElement.addEventListener('mouseenter',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-                markerElement.addEventListener('mousemove',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-                markerElement.addEventListener('mouseleave',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-                markerElement.addEventListener('click',
-                    this.markerMouseEvent_.bind(this, marker, anatomicalId));
-
-                this.__markerIdByMarker.set(marker, markerId);
-                this.__markerIdByFeatureId.set(+featureId, markerId);
-                this.__annotationByMarkerId.set(markerId, annotation);
-                if (!this.__featureEnabled(this.mapFeature(+featureId))) {
-                    markerElement.style.visibility = 'hidden';
+                if (options.cluster && this._layerManager) {
+                    this._layerManager.addMarker(markerId, markerPosition, annotation)
+                } else {
+                    const marker = new maplibregl.Marker(markerOptions)
+                                                 .setLngLat(markerPosition)
+                                                 .addTo(this._map);
+
+
+                    markerElement.addEventListener('mouseenter',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+                    markerElement.addEventListener('mousemove',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+                    markerElement.addEventListener('mouseleave',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+                    markerElement.addEventListener('click',
+                        this.markerMouseEvent_.bind(this, marker, anatomicalId));
+
+                    this.__markerIdByMarker.set(marker, markerId);
+                    this.__markerIdByFeatureId.set(+featureId, markerId);
+                    this.__annotationByMarkerId.set(markerId, annotation);
+                    if (!this.__featureEnabled(this.mapFeature(+featureId))) {
+                        markerElement.style.visibility = 'hidden';
+                    }
                 }
             }
         }
@@ -1429,28 +1443,46 @@ export class UserInteractions
         return anatomicalIds;
     }
 
+    // Separate out MapLibre specific code and result of mouse event (tooltip,
+    // client message, etc) so clustering code can also use this to process
+    // events.
+
     markerMouseEvent_(marker, anatomicalId, event)
     //============================================
     {
         // No tooltip when context menu is open
         if (this._modal
          || (this.__activeMarker !== null && event.type === 'mouseleave')) {
-            return;
+            return
         }
 
         if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
-            this.__activeMarker = marker;
+            this.__activeMarker = marker
 
-            // Remove any existing tooltips
-            this.removeTooltip_();
-            marker.setPopup(null);
+            // Remove any tooltip
+            marker.setPopup(null)
 
             // Reset cursor
             marker.getElement().style.cursor = 'default';
 
+
+            const markerId = this.__markerIdByMarker.get(marker)
+            const annotation = this.__annotationByMarkerId.get(markerId)
+
+            this.markerEvent_(event, markerId, marker.getLngLat(),
+                              anatomicalId, annotation)
+        }
+    }
+
+    markerEvent_(event, markerId, markerPosition, anatomicalId, annotation)
+    //=====================================================================
+    {
+        if (['mouseenter', 'mouseleave', 'click'].includes(event.type)) {
+
+            // Remove any existing tooltips
+            this.removeTooltip_();
+
             if (['mouseenter', 'click'].includes(event.type)) {
-                const markerId = this.__markerIdByMarker.get(marker);
-                const annotation = this.__annotationByMarkerId.get(markerId);
                 // The marker's feature
                 const feature = this.mapFeature(annotation.featureId);
                 if (feature !== undefined) {
@@ -1464,13 +1496,12 @@ export class UserInteractions
                 }
                 // Show tooltip
                 const html = this.tooltipHtml_(annotation, true);
-                this.__showToolTip(html, marker.getLngLat());
+                this.__showToolTip(html, markerPosition);
 
                 // Send marker event message
                 this._flatmap.markerEvent(event.type, markerId, anatomicalId);
             }
         }
-        event.stopPropagation();
     }
 
     __clearActiveMarker()
@@ -1519,7 +1550,7 @@ export class UserInteractions
             .setLngLat(location)
             .setDOMContent(element);
 
-        // Set the merker tooltip and show it
+        // Set the marker tooltip and show it
         marker.setPopup(this._tooltip);
         marker.togglePopup();
 

package/src/layers/cluster.js

@@ -0,0 +1,191 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2023 David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+import {SvgManager, SvgTemplateManager} from '../../thirdParty/maplibre-gl-svg/src'
+
+//==============================================================================
+
+const markerLargeCircle = `<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 27 42">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.2;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0
+             C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z"
+          style="fill:{color};stroke:{secondaryColor};stroke-width:1"/>
+    <circle cx="12.5" cy="12.5" r="9" fill="{secondaryColor}"/>
+    <text x="12" y="17.5" style="font-size:14px;fill:#000;text-anchor:middle">{text}</text>
+</svg>`
+
+const markerSmallCircle = `<svg xmlns="http://www.w3.org/2000/svg" width="calc(28 * {scale})" height="calc(39 * {scale})" viewBox="-1 -1 27 42">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.2;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0
+             C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z"
+          style="fill:{color};stroke:{secondaryColor};stroke-width:1"/>
+    <circle cx="12.5" cy="12.5" r="5" fill="{secondaryColor}"/>
+</svg>`
+
+//==============================================================================
+
+export async function loadClusterIcons(map)
+{
+    SvgTemplateManager.addTemplate('marker-large-circle', markerLargeCircle, false)
+    SvgTemplateManager.addTemplate('marker-small-circle', markerSmallCircle, false)
+
+    const svgManager = new SvgManager(map)
+    await svgManager.createFromTemplate('clustered-marker', 'marker-large-circle', '#EE5900', '#fff')
+    await svgManager.createFromTemplate('unclustered-marker', 'marker-small-circle', '#005974', '#fff')
+}
+
+//==============================================================================
+
+export class ClusteredMarkerLayer
+{
+    #flatmap
+    #map
+    #points = {
+       type: 'FeatureCollection',
+       features: []
+    }
+    #ui
+
+    seenmove = false
+
+    constructor(flatmap, ui)
+    {
+        this.#flatmap = flatmap
+        this.#ui = ui
+        this.#map = flatmap.map
+
+        this.#map.addSource('markers', {
+            type: 'geojson',
+            data: this.#points,
+            cluster: true,      // Adds the ``point_count`` property to source data
+            clusterMaxZoom: 9,  // Max zoom to cluster points on
+            clusterRadius: 50   // Radius of each cluster when clustering points (defaults to 50)
+        })
+
+        this.#map.addLayer({
+            id: 'clustered-markers',
+            type: 'symbol',
+            source: 'markers',
+            filter: ['has', 'point_count'],
+            'layout': {
+                'icon-image': 'clustered-marker',
+                'icon-allow-overlap': true,
+                'icon-ignore-placement': true,
+                'icon-offset': [0, -17],
+                'icon-size': 0.8,
+                'text-field': '{point_count_abbreviated}',
+                'text-size': 10,
+                'text-offset': [0, -1.93]
+            }
+        })
+
+        this.#map.addLayer({
+            id: 'single-points',
+            type: 'symbol',
+            source: 'markers',
+            filter: ['!', ['has', 'point_count']],
+            'layout': {
+                'icon-image': 'unclustered-marker',
+                'icon-allow-overlap': true,
+                'icon-ignore-placement': true,
+                'icon-offset': [0, -17],
+                'icon-size': 0.6
+            }
+        })
+
+        // inspect a cluster on click
+        this.#map.on('click', 'clustered-markers', async (e) => {
+            const features = this.#map.queryRenderedFeatures(e.point, {
+                layers: ['clustered-markers']
+            })
+            console.log('Cluster marker', features)
+            const clusterId = features[0].properties.cluster_id
+            const zoom = await this.#map.getSource('markers').getClusterExpansionZoom(clusterId)
+            this.#map.easeTo({
+                center: features[0].geometry.coordinates,
+                zoom
+            })
+        })
+
+        this.#map.on('click', 'single-points', this.singleMarkerEvent.bind(this))
+        this.#map.on('mouseenter', 'single-points', this.singleMarkerEvent.bind(this))
+        this.#map.on('mousemove', 'single-points', this.singleMarkerEvent.bind(this))
+//        this.#map.on('mouseleave', 'single-points', this.singleMarkerEvent.bind(this))
+
+        this.#map.on('mouseenter', 'clustered-markers', () => {
+            this.#map.getCanvas().style.cursor = 'pointer'
+        })
+
+        this.#map.on('mouseleave', 'clustered-markers', () => {
+            this.#map.getCanvas().style.cursor = ''
+        })
+
+        // Also 'mousemove'...
+    }
+
+    singleMarkerEvent(event)
+    //======================
+    {
+        const features = this.#map.queryRenderedFeatures(event.point, {
+            layers: ['single-points']
+        })
+        for (const feature of features) {
+if (event.type === 'mousemove' && !this.seenMove) {
+    console.log('Single marker', event.type, feature)
+    this.seenMove = true
+} else if (event.type !== 'mousemove') {
+    console.log('Single marker', event.type, feature)
+    this.seenMove = false
+}
+
+            const properties = feature.properties
+            const position = properties.markerPosition.slice(1, -1).split(',').map(p => +p)
+            this.#ui.markerEvent_(event, feature.id, position, properties.models, properties)
+        }
+        event.originalEvent.stopPropagation()
+    }
+
+    addMarker(id, position, properties={})
+    //====================================
+    {
+        this.#points.features.push({
+            type: 'Feature',
+            id,
+            properties,
+            geometry: {
+                type: 'Point',
+                coordinates: position
+            }
+        })
+        this.#map.getSource('markers')
+                 .setData(this.#points)
+    }
+
+    clearMarkers()
+    //============
+    {
+        this.#points.features = []
+        this.#map.getSource('markers')
+                 .setData(this.#points)
+    }
+}
+
+//==============================================================================
+

package/src/layers/{paths3d.js → flightpaths.js}

@@ -135,7 +135,7 @@ class ArcDashedLayer extends ArcMapLayer
 
 //==============================================================================
 
-export class Paths3DLayer
+export class FlightPathLayer
 {
     #arcLayers = new Map()
     #deckOverlay = null
@@ -344,14 +344,12 @@ export class Paths3DLayer
             id: `arc-${pathType}`,
             data: pathData,
             pickable: true,
-            autoHighlight: true,
             numSegments: 400,
             // Styles
             getSourcePosition: f => f.pathStartPosition,
             getTargetPosition: f => f.pathEndPosition,
             getSourceColor: this.#pathColour.bind(this),
             getTargetColor: this.#pathColour.bind(this),
-            highlightColor: o => this.#pathColour(o.object),
             opacity: 1.0,
             getWidth: 3,
         }
@@ -366,13 +364,14 @@ export class Paths3DLayer
             source: 'vector-tiles',
             sourceLayer: `${pickedObject.layer}_${pickedObject['tile-layer']}`,
             properties: pickedObject,
-            arc3dLayer: true
+            flightPath: true
         }
     }
 
     #setupDeckOverlay()
     //=================
     {
+        // One overlay layer for each path style
         [...this.#pathStyles.values()].filter(style => this.#pathManager.pathTypeEnabled(style.type))
                                       .forEach(style => this.#addArcLayer(style.type))
         this.#deckOverlay = new DeckOverlay({

package/src/layers/index.js

@@ -25,9 +25,10 @@ limitations under the License.
 import {PATHWAYS_LAYER} from '../pathways.js';
 import * as utils from '../utils.js';
 
+import {ClusteredMarkerLayer} from './cluster'
 import * as style from './styling.js';
 
-import {Paths3DLayer} from './paths3d'
+import {FlightPathLayer} from './flightpaths'
 import {PropertiesFilter} from './filter'
 
 const FEATURES_LAYER = 'features';
@@ -183,8 +184,8 @@ class MapFeatureLayers extends MapStylingLayers
         }
     }
 
-    enablePaths2dLayer(visible)
-    //=========================
+    setFlatPathMode(visible)
+    //======================
     {
         for (const layer of this.#pathLayers) {
             this.map.setLayoutProperty(layer.id, 'visibility', visible ? 'visible' : 'none')
@@ -266,7 +267,8 @@ class MapRasterLayers extends MapStylingLayers
 export class LayerManager
 {
     #featureLayers = new Map()
-    #paths3dLayer = null
+    #markerLayer = null
+    #flightPathLayer = null
     #rasterLayer = null
 
     constructor(flatmap, ui)
@@ -306,8 +308,11 @@ export class LayerManager
                                                                    this.__layerOptions));
         }
 
-        // Support 3D path view
-        this.#paths3dLayer = new Paths3DLayer(flatmap, ui)
+        // Support flight path view
+        this.#flightPathLayer = new FlightPathLayer(flatmap, ui)
+
+        // Show clustered markers in a layer
+        this.#markerLayer = new ClusteredMarkerLayer(flatmap, ui)
     }
 
     get layers()
@@ -356,12 +361,24 @@ export class LayerManager
         }
     }
 
+    addMarker(id, position, properties={})
+    //====================================
+    {
+        this.#markerLayer.addMarker(id, position, properties)
+    }
+
+    clearMarkers()
+    //============
+    {
+        this.#markerLayer.clearMarkers()
+    }
+
     featuresAtPoint(point)
     //====================
     {
         let features = []
-        if (this.#paths3dLayer) {
-            features = this.#paths3dLayer.queryFeaturesAtPoint(point)
+        if (this.#flightPathLayer) {
+            features = this.#flightPathLayer.queryFeaturesAtPoint(point)
         }
         if (features.length === 0) {
             features = this.__map.queryRenderedFeatures(point)
@@ -372,16 +389,16 @@ export class LayerManager
     removeFeatureState(feature, key)
     //==============================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.removeFeatureState(feature.id, key)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.removeFeatureState(feature.id, key)
         }
     }
 
     setFeatureState(feature, state)
     //=============================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setFeatureState(feature.id, state)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.setFeatureState(feature.id, state)
         }
     }
 
@@ -395,8 +412,8 @@ export class LayerManager
         for (const mapLayer of this.#featureLayers.values()) {
             mapLayer.setPaint(this.__layerOptions)
         }
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.setPaint(options)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.setPaint(options)
         }
     }
 
@@ -407,27 +424,31 @@ export class LayerManager
         for (const mapLayer of this.#featureLayers.values()) {
             mapLayer.setFilter(this.__layerOptions);
         }
-        if (this.#paths3dLayer) {
+        if (this.#flightPathLayer) {
+//    * @arg options.layerOptions.sckan {string} Show neuron paths known to SCKAN: values are ``valid`` (default),
+//    *                                        ``invalid``, ``all`` or ``none``.
+
+
             const sckanState = options.sckan || 'valid'
             const sckanFilter = (sckanState == 'none') ? {NOT: {HAS: 'sckan'}} :
                                 (sckanState == 'valid') ? {sckan: true} :
-                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :
+                                (sckanState == 'invalid') ? {NOT: {sckan: true}} :  // {sckan: false} is different...
                                 true
             const featureFilter = new PropertiesFilter(sckanFilter)
             if ('taxons' in options) {
                 featureFilter.narrow({taxons: options.taxons})
             }
-            this.#paths3dLayer.setFilter(featureFilter)
+            this.#flightPathLayer.setFilter(featureFilter)
         }
     }
 
-    set3dMode(enable=true)
-    //====================
+    setFlightPathMode(enable=true)
+    //============================
     {
-        if (this.#paths3dLayer) {
-            this.#paths3dLayer.enable(enable)
+        if (this.#flightPathLayer) {
+            this.#flightPathLayer.enable(enable)
             for (const mapLayer of this.#featureLayers.values()) {
-                mapLayer.enablePaths2dLayer(!enable)
+                mapLayer.setFlatPathMode(!enable)
             }
         }
     }

package/src/main.js

@@ -25,6 +25,41 @@ limitations under the License.
 import { MapManager } from './flatmap-viewer';
 export { MapManager };
 
+const ALL_MARKERS = [
+// Most of these are around the heart
+    'UBERON:0003382',
+    'UBERON:0002348',
+    'UBERON:0002349',
+    'UBERON:0003379',
+    'UBERON:0001986',
+    'UBERON:0001074',
+    'UBERON:0003381',
+    'UBERON:0002165',
+    'UBERON:0002080',
+    'UBERON:0000948',
+    'UBERON:0002084',
+    'UBERON:0002078',
+    'UBERON:0002079',
+    'UBERON:0002349',
+    'UBERON:0002408',
+    'UBERON:0007240',
+    'UBERON:0002359',
+
+    'UBERON:0001508',
+    'UBERON:0037094',
+    'ILX:0738305',
+
+    'UBERON:0000948', // {className: 'heart-marker'}); // Heart
+    'UBERON:0002048', // Lung
+    'UBERON:0000945', // Stomach
+    'UBERON:0001155', // Colon
+    'UBERON:0001255', // Bladder
+    'UBERON:0001759', // Vagus
+
+    'UBERON:0016508', // Pelvic ganglion
+
+]
+
 //==============================================================================
 
 class DrawControl
@@ -110,6 +145,7 @@ export async function standaloneViewer(map_endpoint=null, options={})
         showPosition: false,
         standalone: true,
         annotator: true,
+        flightPaths: true
     }, options);
 
     function loadMap(id, taxon, sex)
@@ -139,15 +175,20 @@ export async function standaloneViewer(map_endpoint=null, options={})
                     mapOptions.background = args[0].value;
                 } else if (eventType === 'annotation') {
                     drawControl.handleEvent(...args)
+                } else {
+                    //console.log(eventType, ...args)
                 }
             }, mapOptions)
             .then(map => {
+/*
                 map.addMarker('UBERON:0000948', {className: 'heart-marker'}); // Heart
                 map.addMarker('UBERON:0002048'); // Lung
                 map.addMarker('UBERON:0000945'); // Stomach
                 map.addMarker('UBERON:0001155'); // Colon
                 map.addMarker('UBERON:0001255'); // Bladder
                 map.addMarker('UBERON:0001759'); // Vagus
+*/
+                map.addMarkers(ALL_MARKERS, {cluster: true})
                 currentMap = map;
                 drawControl = new DrawControl(map)
             })

package/src/pathways.js

@@ -61,7 +61,7 @@ export function pathColourArray(pathType, alpha=255)
 {
     const rgb = colord(PathTypeMap.has(pathType)
                         ? PathTypeMap.get(pathType).colour
-                        : '#FF0').toRgb()
+                        : PathTypeMap.get('other').colour).toRgb()
     return [rgb.r, rgb.g, rgb.b, alpha]
 }
 
@@ -92,9 +92,6 @@ export class PathManager
                 pathLines[pathId] = path.lines;
                 pathNerves[pathId] = path.nerves;
                 this.__paths[pathId] = path;
-                for (const lineId of path.lines) {
-                    this.__ui.enableFeature(lineId, enabled, true);
-                }
                 this.__paths[pathId].systemCount = 0;
                 if ('models' in path) {
                     const modelId = path['models'];
@@ -316,6 +313,14 @@ export class PathManager
         return featureIds;
     }
 
+    enablePathLines(enable, force=false)
+    //==================================
+    {
+        for (const lineId of Object.keys(this.__pathsByLine)) {
+            this.__ui.enableFeature(lineId, enable, force)
+        }
+    }
+
     enablePathsBySystem(system, enable, force=false)
     //==============================================
     {

package/src/types.ts

@@ -0,0 +1,26 @@
+/******************************************************************************
+
+Flatmap viewer and annotation tool
+
+Copyright (c) 2019 - 2024  David Brooks
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+******************************************************************************/
+
+export type Constructor<T> = new(...args: any[]) => T
+
+export type ObjectRecord = Record<string, any>
+
+//==============================================================================
+

package/src/utils.js

@@ -120,6 +120,7 @@ export function normaliseId(id)
 
 export function setDefaults(options, defaultOptions)
 {
+// c.f. Object.assign({}, defaultOptions, options)
     if (options === undefined || options === null) {
         return defaultOptions;
     }