@abi-software/flatmap-viewer 2.3.0-a.1 → 2.3.0-a.2

package/src/interactions.js

@@ -33,16 +33,18 @@ import polylabel from 'polylabel';
 
 //==============================================================================
 
-import {ContextMenu} from './contextmenu.js';
-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 {SearchControl} from './search.js';
-import {VECTOR_TILES_SOURCE} from './styling.js';
-
-import * as utils from './utils.js';
+import {Annotator} from './annotation';
+import {displayedProperties, InfoControl} from './info';
+import {LayerManager} from './layers';
+import {PATHWAYS_LAYER, Pathways} from './pathways';
+import {BackgroundControl, LayerControl, NerveControl,
+        PathControl, SCKANControl} from './controls';
+import {SearchControl} from './search';
+import {VECTOR_TILES_SOURCE} from './styling';
+import {SystemsControl, SystemsManager} from './systems';
+
+import * as pathways from './pathways';
+import * as utils from './utils';
 
 //==============================================================================
 
@@ -114,75 +116,90 @@ export class UserInteractions
         this.__activeMarker = null;
         this.__lastMarkerId = 900000;
         this.__markerIdByMarker = new Map();
+        this.__markerIdByFeatureId = new Map();
         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
 
         flatmap.setInitialPosition();
 
-        // Add a control to search annotations if option set
-
-        if (flatmap.options.searchable) {
-            this._map.addControl(new SearchControl(flatmap));
-        }
-
-        // Show information about features
+        // Add and manage our layers
 
-        if (flatmap.options.featureInfo || flatmap.options.searchable) {
-            this._infoControl = new InfoControl(flatmap);
-            if (flatmap.options.featureInfo) {
-                this._map.addControl(this._infoControl);
-            }
-        }
+        this._layerManager = new LayerManager(flatmap);
 
-        // Neural pathways which are either controlled externally
-        // or by our local controls
+        // Path visibility is either controlled externally or by a local control
 
         this._pathways = new Pathways(flatmap);
 
-        if (flatmap.options.pathControls) {
-            // Add controls to manage our pathways
-            this._map.addControl(new PathControl(flatmap, this._pathways));
-        }
+        // The path types in this map
+        const mapPathTypes = this._pathways.pathTypes();
 
-        // Manage our layers
-
-        this._layerManager = new LayerManager(flatmap);
+        // Disable paths that are not initially shown
+        for (const path of mapPathTypes) {
+            if ('enabled' in path && !path.enabled) {
+                this.enablePath(path.type, false);
+            }
+        }
 
-        // Flag features that have annotations
-        // Also flag those features that are models of something
+        // Flag features that have annotations and note which are FC systems
 
+        this.__systems = new Map();
         for (const [id, ann] of flatmap.annotations) {
             const feature = this.mapFeature_(id);
             if (feature !== undefined) {
                 this._map.setFeatureState(feature, { 'annotated': true });
             }
+            if (ann['fc-class'] === 'fc-class:System') {
+                if (this.__systems.has(ann.name)) {
+                    this.__systems.get(ann.name).featureIds.push(ann.featureId)
+                } else {
+                    this.__systems.set(ann.name, {
+                        id: ann.name.replaceAll(' ', '_'),
+                        colour: ann.colour,
+                        featureIds: [ ann.featureId ]
+                    });
+                }
+            }
         }
 
-        // Display a context menu on right-click
+        // Add various controls when running standalone
+
+        if (flatmap.options.standalone) {
+            // Add a control to search annotations if option set
+            this._map.addControl(new SearchControl(flatmap));
+
+            // Show information about features
+            this._infoControl = new InfoControl(flatmap);
+            this._map.addControl(this._infoControl);
+
+            // Control background colour (NB. this depends on having map layers created)
+            this._map.addControl(new BackgroundControl(flatmap));
 
-        this._lastContextTime = 0;
-        this._contextMenu = new ContextMenu(flatmap, this.__clearModal.bind(this));
-        this._map.on('contextmenu', this.contextMenuEvent_.bind(this));
+            // Add a control to manage our paths
+            this._map.addControl(new PathControl(flatmap, mapPathTypes));
 
-        // Display a context menu with a touch longer than 0.5 second
+            // Add a control to manage our layers
+            this._map.addControl(new LayerControl(flatmap, this._layerManager));
 
-        this._lastTouchTime = 0;
-        this._map.on('touchstart', (e) => { this._lastTouchTime = Date.now(); });
-        this._map.on('touchend', (e) => {
-            if (Date.now() > (this._lastTouchTime + 500)) {
-                this.contextMenuEvent_(e);
+            // 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);
             }
-        });
+
+            // SCKAN path and SYSTEMS controls for FC maps
+            if (flatmap.options.style === 'functional') {
+                this._map.addControl(new SystemsControl(flatmap, this.__systems));
+                this._map.addControl(new SCKANControl(flatmap, flatmap.options.layerOptions));
+            }
+        }
+
+        // Add annotation capabilities
+
+        this.__annotator = new Annotator(flatmap);
 
         // Handle mouse events
 
@@ -198,6 +215,12 @@ export class UserInteractions
         this.__pan_zoom_enabled = false;
     }
 
+    get pathways()
+    //============
+    {
+        return this._pathways;
+    }
+
     getState()
     //========
     {
@@ -206,7 +229,7 @@ export class UserInteractions
         return {
             center: this._map.getCenter().toArray(),
             zoom: this._map.getZoom(),
-            layers: this.activeLayerNames
+            layers: this.layers
         };
     }
 
@@ -231,17 +254,83 @@ export class UserInteractions
         }
     }
 
-    setColour(options)
-    //================
+    setPaint(options)
+    //===============
     {
         this.__colourOptions = options;
-        this._layerManager.setColour(options);
+        this._layerManager.setPaint(options);
     }
 
-    get activeLayerNames()
-    //====================
+    getLayers()
+    //=========
+    {
+        return this._layerManager.layers;
+    }
+
+    enableLayer(layerId, enable=true)
+    //===============================
+    {
+        this._layerManager.activate(layerId, enable);
+    }
+
+    getSystems()
+    //==========
+    {
+        const systems = [];
+        for (const system of this.__systems.values()) {
+            systems.push({
+                name: system.name,
+                colour: system.colour,
+            });
+        }
+        return systems;
+    }
+
+    enableSystem(systemName, enable=true)
+    //===================================
+    {
+        if (this.__systems.has(systemName)) {
+            for (const featureId of this.__systems.get(systemName).featureIds) {
+                this.__enableFeatureWithChildren(featureId, enable);
+            }
+        }
+    }
+
+    __enableFeatureWithChildren(featureId, enable=true)
+    //=================================================
+    {
+        const feature = this.mapFeature_(featureId);
+        if (feature !== undefined) {
+            this.__enableFeature(feature, enable);
+            for (const childFeatureId of feature.children) {
+                this.__enableFeatureWithChildren(childFeatureId, enable);
+            }
+        }
+    }
+
+    __enableFeatureMarker(featureId, enable=true)
+    //===========================================
+    {
+        const markerId = this.__markerIdByFeatureId.get(+featureId);
+        if (markerId !== undefined) {
+            const markerDiv = document.getElementById(`marker-${markerId}`);
+            if (markerDiv) {
+                markerDiv.style.visibility = enable ? 'visible' : 'hidden';
+            }
+        }
+    }
+
+    __enableFeature(feature, enable=true)
+    //===================================
     {
-        return this._layerManager.activeLayerNames;
+        if (feature !== undefined) {
+            if (enable) {
+                this._map.removeFeatureState(feature, 'hidden');
+            } else {
+                this._map.setFeatureState(feature, { 'hidden': true });
+            }
+            this.__enableFeatureMarker(feature.id, enable);
+        }
     }
 
     mapFeature_(featureId)
@@ -252,11 +341,13 @@ export class UserInteractions
             return {
                 id: featureId,
                 source: VECTOR_TILES_SOURCE,
-                sourceLayer: this._flatmap.options.separateLayers
+                sourceLayer: (this._flatmap.options.separateLayers
                              ? `${ann['layer']}_${ann['tile-layer']}`
-                             : ann['tile-layer']
+                             : ann['tile-layer']).replaceAll('/', '_'),
+                children: ann.children || []
             };
         }
+        return undefined;
     }
 
     featureSelected_(featureId)
@@ -270,7 +361,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);
@@ -300,7 +391,7 @@ export class UserInteractions
             }
         }
         if (this._selectedFeatureIds.size === 0) {
-            this._layerManager.setColour({...this.__colourOptions, dimmed: false});
+            this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
         }
     }
 
@@ -314,20 +405,7 @@ export class UserInteractions
             }
         }
         this._selectedFeatureIds.clear();
-        this._layerManager.setColour({...this.__colourOptions, dimmed: false});
-    }
-
-    activeFeaturesAtEvent_(event)
-    //===========================
-    {
-        // Get the features covering the event's point that are in the active layers
-
-        return this._map.queryRenderedFeatures(event.point).filter(f => {
-            return (this.__enabledFeature(f)
-                && this.activeLayerNames.indexOf(f.sourceLayer) >= 0)
-                && ('featureId' in f.properties);
-            }
-        );
+        this._layerManager.setPaint({...this.__colourOptions, dimmed: false});
     }
 
     __activateFeature(feature)
@@ -381,45 +459,6 @@ export class UserInteractions
         return smallestFeature;
     }
 
-    contextMenuEvent_(event)
-    //======================
-    {
-        event.preventDefault();
-
-        // Chrome on Android sends both touch and contextmenu events
-        // so ignore duplicate
-
-        if (Date.now() < (this._lastContextTime + 100)) {
-            return;
-        }
-        this._lastContextTime = Date.now();
-
-        if (this._activeFeatures.length > 0) {
-            const feature = this._activeFeatures[0];
-
-            // Remove any tooltip
-            this.removeTooltip_();
-
-            const featureId = feature.id;
-            if (this._pathways.isNode(featureId)) {
-                const items = [
-                    {
-                        featureId: featureId,
-                        prompt: 'Show paths',
-                        action: this.enablePaths_.bind(this, true)
-                    },
-                    {
-                        featureId: featureId,
-                        prompt: 'Hide paths',
-                        action: this.enablePaths_.bind(this, false)
-                    }
-                ];
-                this.setModal_();
-                this._contextMenu.show(event.lngLat, items, feature.properties.label);
-            }
-        }
-    }
-
     setModal_(event)
     //==============
     {
@@ -515,7 +554,12 @@ export class UserInteractions
     zoomToFeatures(featureIds, options=null)
     //======================================
     {
-        options = utils.setDefaultOptions(options, {select: true, highlight: false, noZoomIn: false, padding:10});
+        options = utils.setDefaults(options, {
+            select: true,
+            highlight:
+            false, noZoomIn:
+            false, padding:10
+        });
         const select = (options.select === true);
         const highlight = (options.highlight === true);
         if (featureIds.length) {
@@ -583,7 +627,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
@@ -625,9 +669,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/>");
@@ -636,32 +684,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)) {
-            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
-            }
+                && (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) {
-                return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${tooltip}</a></div>`;
+                if (label === '') {
+                    tooltip.push(`<a href='${properties.hyperlink}'>${properties.hyperlink}</a>`);
+                } else {
+                    tooltip.push(`<a href='${properties.hyperlink}'>${label}</a></div>`);
+                }
             } else {
-                return `<div class='flatmap-feature-label'>${tooltip}</div>`;
+                tooltip.push(label);
             }
         }
-        return '';
+        return (tooltip.length === 0) ? ''
+                                      : `<div class='flatmap-feature-label'>${tooltip.join('<hr/>')}</div>`;
     }
 
     __featureEvent(type, feature)
@@ -841,59 +894,83 @@ 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);
             }
         }
     }
 
+    __annotationEvent(feature)
+    //========================
+    {
+        event.preventDefault();
+
+        // Remove any tooltip
+        this.removeTooltip_();
+
+        // Select the feature
+        this.selectFeature_(feature.id);
+
+        // Don't respond to mouse events while the dialog is open
+        this.setModal_();
+
+        // The annotation dialog...
+        this.__annotator.annotate(feature, e => {
+            this.__unselectFeatures();
+            this.__clearModal();
+        });
+    }
+
     clickEvent_(event)
     //================
     {
+        if (this._modal) {
+            return;
+        }
+
         this.clearActiveMarker_();
         const clickedFeatures = this._map.queryRenderedFeatures(event.point)
                                     .filter(feature => this.__enabledFeature(feature));
         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);
-            }
+        if (originalEvent.altKey) {
+            this.__annotationEvent(clickedFeature);
+            return;
         }
+
+        this.selectionEvent_(originalEvent, clickedFeature);
         if (this._modal) {
-           // Remove tooltip, reset active features, etc
+            // Remove tooltip, reset active features, etc
             this.__resetFeatureDisplay();
             this.__unselectFeatures();
             this.__clearModal();
@@ -932,7 +1009,6 @@ export class UserInteractions
     enablePaths_(enable, event)
     //=========================
     {
-        this._contextMenu.hide();
         const nodeId = event.target.getAttribute('featureId');
         this.enablePathFeatures_(enable, this._pathways.pathFeatureIds(nodeId));
         this.__clearModal();
@@ -957,6 +1033,7 @@ export class UserInteractions
     togglePaths()
     //===========
     {
+        console.log('Depracated API function called: togglePaths()')
         if (this._disabledPathFeatures){
             this.enablePathFeatures_(true, this._pathways.allFeatureIds());
             this._disabledPathFeatures = false;
@@ -965,36 +1042,12 @@ export class UserInteractions
         }
     }
 
-    pathTypes()
-    //=========
-    {
-        return this._pathways.pathTypes;
-    }
-
     enablePath(pathType, enable=true)
     //===============================
     {
         this.enablePathFeatures_(enable, this._pathways.typeFeatureIds(pathType));
     }
 
-    showPaths(pathTypes, enable=true)
-    //===============================
-    {
-        // 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);
-            }
-        } else {
-            this.enablePath(pathTypes, enable);
-        }
-
-        this._disabledPathFeatures = true;
-    }
-
     pathwaysFeatureIds(externalIds)
     //=============================
     {
@@ -1010,46 +1063,57 @@ export class UserInteractions
         return this._pathways.nodePathModels(nodeId);
     }
 
-    //==============================================================================
-
-    // Find where to place a label or popup on a feature
+    enableCentrelines(show=true)
+    //==========================
+    {
+        this.enablePath('centreline', show);
+        this._layerManager.setPaint({showCentrelines: show});
+    }
 
-    __centralPosition(featureId, annotation)
+    enableSckanPath(sckanState, enable=true)
     //======================================
     {
-        if (this.__centralPositions.has(featureId)) {
-            return this.__centralPositions.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);
-        }
-        this.__centralPositions.set(featureId, position);
-        return position;
+        this._layerManager.enableSckanPath(sckanState, enable);
     }
 
     //==============================================================================
 
     // Marker handling
 
-    addMarker(anatomicalId, markerType='')
-    //====================================
+    __markerPosition(featureId, annotation)
+    {
+        if (this.__markerPositions.has(featureId)) {
+            return this.__markerPositions.get(featureId);
+        }
+        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.__markerPositions.set(featureId, position);
+        return position;
+    }
+
+    addMarker(anatomicalId, options={})
+    //=================================
     {
         const featureIds = this._flatmap.modelFeatureIds(anatomicalId);
         let markerId = -1;
@@ -1065,19 +1129,21 @@ 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 colour = options.colour || '#005974';
+                const markerHTML = options.element ? new maplibre.Marker({element: options.element})
+                                                   : new maplibre.Marker({color: colour});
+
                 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.id = `marker-${markerId}`;
                 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);
@@ -1091,6 +1157,7 @@ export class UserInteractions
                     this.markerMouseEvent_.bind(this, marker, anatomicalId));
 
                 this.__markerIdByMarker.set(marker, markerId);
+                this.__markerIdByFeatureId.set(+featureId, markerId);
                 this.__annotationByMarkerId.set(markerId, annotation);
             }
         }