@abi-software/flatmap-viewer 2.2.12-b.2 → 2.2.12-b.4

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

package/package.json

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

package/src/flatmap-viewer.js

@@ -802,19 +802,21 @@ class FlatMap
     /**
      * Add a marker to the map.
      *
-     * @param      {string}  anatomicalId     The anatomical identifier of the feature on which
-     *                                        to place the marker
-     * @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
+     * @param {string}  anatomicalId  The anatomical identifier of the feature on which
+     *                                to place the marker.
+     * @arg {Object} options          Configurable options for the marker.
+     * @arg {string} options.colour   Colour of the default marker. Defaults to ``'#005974'``
+     *                                (dark blue).
+     * @arg {string} options.element  The DOM element to use as a marker. The default is
+     *                                a dark 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,  htmlElement=null)
-    //========================================
+    addMarker(anatomicalId,  options={})
+    //==================================
     {
         if (this._userInteractions !== null) {
-            return this._userInteractions.addMarker(anatomicalId, htmlElement);
+            return this._userInteractions.addMarker(anatomicalId, options);
         }
         return -1;
     }

package/src/interactions.js

@@ -193,22 +193,6 @@ export class UserInteractions
             }
         }
 
-        // Display a context menu on right-click
-
-        this._lastContextTime = 0;
-        this._contextMenu = new ContextMenu(flatmap, this.__clearModal.bind(this));
-        this._map.on('contextmenu', this.contextMenuEvent_.bind(this));
-
-        // Display a context menu with a touch longer than 0.5 second
-
-        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);
-            }
-        });
-
         // Handle mouse events
 
         this._map.on('click', this.clickEvent_.bind(this));
@@ -424,45 +408,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)
     //==============
     {
@@ -982,7 +927,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();
@@ -1086,8 +1030,8 @@ export class UserInteractions
         return position;
     }
 
-    addMarker(anatomicalId, htmlElement=null)
-    //=======================================
+    addMarker(anatomicalId, options={})
+    //=================================
     {
         const featureIds = this._flatmap.modelFeatureIds(anatomicalId);
         let markerId = -1;
@@ -1106,8 +1050,9 @@ export class UserInteractions
                 // 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 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');