@abi-software/flatmap-viewer 2.2.1-beta.2 → 2.2.1-beta.5

package/README.rst

@@ -2,7 +2,7 @@
 Flatmap Viewer
 ==============
 
-A viewer for anatomical flatmaps generated by `flatmap-maker <https://github.com/dbrnz/flatmap-maker>`_. The viewer is intended to be a component of a larger Javascript web application, although may be used standalone for local flatmap development and testing. Flatmap content is obtained from a `flatmap-server <https://github.com/dbrnz/flatmap-server>`_.
+A viewer for anatomical flatmaps generated by `flatmap-maker <https://github.com/AnatomicMaps/flatmap-maker>`_. The viewer is intended to be a component of a larger Javascript web application, although may be used standalone for local flatmap development and testing. Flatmap content is obtained from a `flatmap-server <https://github.com/AnatomicMaps/flatmap-server>`_.
 
 
 Standalone Use
@@ -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.1-beta.2``
+* ``npm install @abi-software/flatmap-viewer@2.2.1-beta.5``
 
 Documentation
 -------------

package/package.json

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

package/src/flatmap-viewer.js

@@ -1259,7 +1259,13 @@ export class MapManager
                         outline: true
                     };
                 }
-                mapOptions.layerOptions.authoring = ('authoring' in mapIndex && mapIndex.authoring);
+                if ('authoring' in mapIndex) {
+                    mapOptions.layerOptions.style == 'authoring'
+                } else if ('style' in mapIndex) {
+                    mapOptions.layerOptions.style = mapIndex.style;
+                } else {
+                    mapOptions.layerOptions.style = 'flatmap';
+                }
 
                 // Are features in separate vector tile source layers?
 

package/src/interactions.js

@@ -162,34 +162,6 @@ export class UserInteractions
 
         this._layerManager = new LayerManager(flatmap);
 
-        // Add the map's layers
-
-        // Layers have an id, either layer-N or an assigned name
-        // Some layers might have a description. These are the selectable layers,
-        // unless they are flagged as `no-select`
-        // Selectable layers have opacity 0 unless active, in which case they have opacity 1.
-        // `no-select` layers have opacity 0.5
-        // Background layer has opacity 0.2
-
-        const layersById = new Map();
-        const layerBackgroundIds = [];
-        for (const layer of flatmap.layers) {
-            layer.backgroundLayers = [];
-            layersById.set(layer.id, layer);
-        }
-        for (const layer of flatmap.layers) {
-            if (layer.background_for) {
-                const l = layersById.get(layer.background_for);
-                l.backgroundLayers.push(layer);
-                layerBackgroundIds.push(layer.id);
-            }
-        }
-        for (const layer of flatmap.layers) {
-            if (layerBackgroundIds.indexOf(layer.id) < 0) {
-                this._layerManager.addLayer(layer, flatmap.options.layerOptions);
-            }
-        }
-
         // Flag features that have annotations
         // Also flag those features that are models of something
 
@@ -662,12 +634,21 @@ export class UserInteractions
     tooltipHtml_(properties, forceLabel=false)
     //========================================
     {
-        if ('label' in properties
+        if (('label' in properties || 'hyperlink' in properties)
            && (forceLabel || !('tooltip' in properties) || properties.tooltip)
            && !('labelled' in properties)) {
-            const label = properties.label;
-            const capitalisedLabel = label.substr(0, 1).toUpperCase() + label.substr(1);
-            return `<div class='flatmap-feature-label'>${capitalisedLabel.replaceAll("\n", "<br/>")}</div>`;
+            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
+            }
+            if ('hyperlink' in properties) {
+                return `<div class='flatmap-feature-label'><a href='{properties.hyperlink}'>${tooltip}</a></div>`;
+            } else {
+                return `<div class='flatmap-feature-label'>${tooltip}</div>`;
+            }
         }
         return '';
     }
@@ -761,7 +742,8 @@ export class UserInteractions
                 }
             }
         } else {
-            let labelledFeatures = features.filter(feature => (('label' in feature.properties
+            let labelledFeatures = features.filter(feature => (('hyperlink' in feature.properties
+                                                             || 'label' in feature.properties
                                                              || 'node' in feature.properties)
                                                          && (!('tooltip' in feature.properties)
                                                             || feature.properties.tooltip)))
@@ -809,6 +791,9 @@ export class UserInteractions
                         this.activateNerveFeatures_(feature.properties.nerveId);
                     }
                 }
+                if ('hyperlink' in feature.properties) {
+                    this._map.getCanvas().style.cursor = 'pointer';
+                }
             }
         }
 
@@ -877,6 +862,9 @@ export class UserInteractions
         if (feature !== undefined) {
             this.__lastClickLngLat = event.lngLat;
             this.__featureEvent('click', feature);
+            if ('hyperlink' in feature.properties) {
+                window.open(feature.properties.hyperlink, '_blank');
+            }
         }
     }
 

package/src/layers.js

@@ -33,7 +33,7 @@ const FEATURES_LAYER = 'features'
 
 class MapFeatureLayer
 {
-    constructor(flatmap, layer, options)
+    constructor(flatmap, layer, background_layers=true)
     {
         this.__map = flatmap.map;
         this.__separateLayers = flatmap.options.separateLayers;
@@ -41,6 +41,7 @@ class MapFeatureLayer
         this.__rasterLayers = [];
         this.__styleLayers = [];
 
+        const layerOptions = flatmap.options.layerOptions;
         const vectorTileSource = this.__map.getSource('vector-tiles');
         const haveVectorLayers = (typeof vectorTileSource !== 'undefined');
         const featuresVectorLayerId = this.__separateLayers
@@ -48,34 +49,36 @@ class MapFeatureLayer
                                     : FEATURES_LAYER;
         const vectorFeatures = haveVectorLayers
                              && vectorTileSource.vectorLayerIds.indexOf(featuresVectorLayerId) >= 0;
-        if (vectorFeatures) {
-            this.__addStyleLayer(style.BodyLayer, options);
-        }
-        if (flatmap.details['image_layer']) {
-            for (const raster_layer_id of layer['image-layers']) {
-                const layerId = this.__addRasterLayer(raster_layer_id, options);
+        if (background_layers) {
+            if (vectorFeatures) {
+                this.__addStyleLayer(style.BodyLayer, layerOptions);
+            }
+            if (flatmap.details['image_layer']) {
+                for (const raster_layer_id of layer['image-layers']) {
+                    this.__addRasterLayer(raster_layer_id, layerOptions);
+                }
             }
         }
         // if no image layers then make feature borders (and lines?) more visible...??
         if (haveVectorLayers) {
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureFillLayer, options);
-                this.__addStyleLayer(style.FeatureDashLineLayer, options);
-                this.__addStyleLayer(style.FeatureLineLayer, options);
-                this.__addStyleLayer(style.FeatureBorderLayer, options);
+                this.__addStyleLayer(style.FeatureFillLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureDashLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureLineLayer, layerOptions);
+                this.__addStyleLayer(style.FeatureBorderLayer, layerOptions);
             }
-            this.__addPathwayStyleLayers(options);
+            this.__addPathwayStyleLayers(layerOptions);
             if (vectorFeatures) {
-                this.__addStyleLayer(style.FeatureLargeSymbolLayer, options);
+                this.__addStyleLayer(style.FeatureLargeSymbolLayer, layerOptions);
                 if (!flatmap.options.tooltips) {
-                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, options);
+                    this.__addStyleLayer(style.FeatureSmallSymbolLayer, layerOptions);
                 }
             }
         }
 
-        // Make sure our colpur options are set properly, in particular raster layer visibility
+        // Make sure our colour options are set properly, in particular raster layer visibility
 
-        this.setColour(options);
+        this.setColour(layerOptions);
     }
 
     get id()
@@ -148,12 +151,31 @@ export class LayerManager
         this.__mapLayers = new Map;
         this.__activeLayers = [];
         this.__activeLayerNames = [];
+        this.__rasterLayers = [];
+        const layerOptions = flatmap.options.layerOptions;
+        const fcDiagram = ('style' in layerOptions && layerOptions.style == 'fcdiagram');
         const backgroundLayer = new style.BackgroundLayer();
-        if ('background' in flatmap.options) {
+        if (fcDiagram) {
+            this.__map.addLayer(backgroundLayer.style('black', 1));
+        }
+        else if ('background' in flatmap.options) {
             this.__map.addLayer(backgroundLayer.style(flatmap.options.background));
         } else {
             this.__map.addLayer(backgroundLayer.style('white'));
         }
+        // Add the map's layers
+        if (fcDiagram && flatmap.details['image_layer']) {
+            for (const layer of flatmap.layers) {
+                for (const raster_layer_id of layer['image-layers']) {
+                    const rasterLayer = new style.RasterLayer(raster_layer_id);
+                    this.__map.addLayer(rasterLayer.style(layerOptions));
+                    this.__rasterLayers.push(rasterLayer);
+                }
+            }
+        }
+        for (const layer of flatmap.layers) {
+            this.addLayer(layer, !fcDiagram);
+        }
     }
 
     get activeLayerNames()
@@ -162,12 +184,12 @@ export class LayerManager
         return this.__activeLayerNames;
     }
 
-    addLayer(layer, options)
-    //======================
+    addLayer(layer, background_layers=true)
+    //=====================================
     {
         this.__mapLayers.set(layer.id, layer);
 
-        const layers = new MapFeatureLayer(this.__flatmap, layer, options);
+        const layers = new MapFeatureLayer(this.__flatmap, layer, background_layers);
         const layerId = this.__flatmap.mapLayerId(layer.id);
         this.__layers.set(layerId, layers);
     }

package/src/styling.js

@@ -265,7 +265,7 @@ export class FeatureLineLayer extends VectorStyleLayer
                 ['boolean', ['feature-state', 'selected'], false], '#0F0',
                 ['==', ['get', 'type'], 'network'], '#AFA202',
                 ['has', 'centreline'], '#888',
-                ('authoring' in options && options.authoring) ? '#C44' : '#444'
+                ('style' in options && options.style === 'authoring') ? '#C44' : '#444'
             ],
             'line-opacity': [
                 'case',
@@ -279,7 +279,7 @@ export class FeatureLineLayer extends VectorStyleLayer
                         ['has', 'centreline'], 1.2,
                         ['==', ['get', 'type'], 'network'], 1.2,
                         ['boolean', ['feature-state', 'active'], false], 1.2,
-                    ('authoring' in options && options.authoring) ? 0.7 : 0.5
+                    ('style' in options && options.style === 'authoring') ? 0.7 : 0.5
                     ], [
                     'interpolate',
                         ['exponential', 2],
@@ -674,14 +674,14 @@ export class BackgroundLayer
         return this.__id;
     }
 
-    style(backgroundColour)
+    style(backgroundColour, opacity=0.1)
     {
         return {
             'id': this.__id,
             'type': 'background',
             'paint': {
                 'background-color': backgroundColour,
-                'background-opacity': 0.1
+                'background-opacity': opacity
             }
         };
     }