@abi-software/flatmap-viewer 2.2.2-beta.2 → 2.2.2-beta.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.2-beta.2``
+* ``npm install @abi-software/flatmap-viewer@2.2.2-beta.4``
 
 Documentation
 -------------

package/package.json

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

package/src/flatmap-viewer.js

@@ -36,7 +36,7 @@ import '../static/flatmap-viewer.css';
 import {MapServer} from './mapserver.js';
 import {MinimapControl} from './minimap.js';
 import {NavigationControl} from './controls.js';
-import {SearchIndex} from './search.js';
+import {SearchIndex, SearchResults} from './search.js';
 import {UserInteractions} from './interactions.js';
 
 import * as images from './images.js';
@@ -921,10 +921,24 @@ class FlatMap
 
     //==========================================================================
 
-    search(text)
-    //==========
+    /**
+     * Find features with labels or terms matching ``text``.
+     *
+     * @param      {string}   text          The text to search
+     * @param      {boolean}  [auto=false]  If ``true`` return suggestions of text to search for.
+     * @return     Either a ``Searchresults`` object with fields of ``featureIds`` and ``results``,
+     *             where ``results`` has ``featureId``, ``score``, ``terms`` and ``text`` fields,
+     *             or a ``Suggestion`` object containing suggested matches
+     *             (see https://lucaong.github.io/minisearch/modules/_minisearch_.html#suggestion).
+     */
+    search(text, auto=false)
+    //======================
     {
-        return this.__searchIndex.search(text);
+        if (auto) {
+            return this.__searchIndex.auto_suggest(text);
+        } else {
+            return this.__searchIndex.search(text);
+        }
     }
 
     clearSearchResults()

package/src/search.js

@@ -173,6 +173,12 @@ export class SearchIndex
         this._;
     }
 
+    auto_suggest(text)
+    //================
+    {
+        return this._searchEngine.autoSuggest(text, {prefix: true});
+    }
+
     search(text)
     //==========
     {
@@ -185,7 +191,14 @@ export class SearchIndex
         } else if (text.length > 1) {
             results = this._searchEngine.search(text, {prefix: true});
         }
-        return new SearchResults(results.map(result => this._featureIds[result.id]));
+        const featureResults = results.map(r => {
+            return {
+                featureId: this._featureIds[r.id],
+                score: r.score,
+                terms: r.terms,
+                text: r.text
+            }});
+        return new SearchResults(featureResults);
     }
 }
 
@@ -193,15 +206,21 @@ export class SearchIndex
 
 class SearchResults
 {
-    constructor(featureIds)
+    constructor(results)
     {
-        this.__featureIds = featureIds;
+        this.__results = results.sort((a, b) => (b.score - a.score));
+        this.__featureIds = results.map(r => r.featureId);
     }
 
     get featureIds()
     {
         return this.__featureIds;
     }
+
+    get results()
+    {
+        return this.__results;
+    }
 }
 
 //==============================================================================

package/src/styling.js

@@ -225,7 +225,9 @@ export class FeatureBorderLayer extends VectorStyleLayer
             ...super.style(),
             'type': 'line',
             'filter': [
-                '==', '$type', 'Polygon'
+                'all',
+                ['==', '$type', 'Polygon'],
+                ['has', 'id']
             ],
             'paint': this.paintStyle(options)
         };

package/src/editor.js

@@ -1,198 +0,0 @@
-import { Bezier } from "bezier-js";
-
-
-class BezierCurve
-{
-    constructor(id, ...points) {
-        this.__id = id;
-        this.__bezier = new Bezier(...points);
-    }
-
-    asGeoJSON(samples=100)
-    {
-        const coords = [];
-        for (let ts = 0; ts <= samples; ts++) {
-            const pt = this.__bezier.get(float(ts)/float(samples));
-            coords.push([pt.x, pt.y]);
-        }
-        return {
-            'type': 'Feature',
-            'geometry': {
-                'type': 'LineString',
-                'coordinates': coords
-            },
-            'properties': {
-                'bezier': this.__id
-            }
-        };
-    }
-
-    asPoints()
-    {
-        const geojson = [];
-        for (const n of [0, 1, 2, 3]) {
-            const pt = this.__bezier.points[n];
-            geojson.push({
-                'type': 'Feature',
-                'geometry': {
-                    'type': 'Point',
-                    'coordinates': [pt.x, pt.y]
-                },
-                'properties': {
-                    'bezier': this.__id,
-                    'point': n
-                }
-            });
-        }
-        return geojson;
-    }
-}
-
-
-export class NetworkEditor
-{
-    constructor(flatmap)
-    {
-        this.__map = flatmap.map;
-        this.__canvas = this.__map.getCanvasContainer();
- 
-        this.__geojson = {  // lines and points as separate sources???
-            'type': 'FeatureCollection',
-            'features': [
-                {
-                    'type': 'Feature',
-                    'geometry': {
-                        'type': 'Point',
-                        'coordinates': [0, 0]
-                    },
-                    'properties': {
-                        'id': 0
-                    }
-                }
-            ]
-        };
-
-        // Add a single point to the map
-        this.__map.addSource('curves', {
-            'type': 'geojson',
-            'data': this.__geojson
-        });
-
-        this.__map.addLayer({
-            'id': 'lines',
-            'type': 'line',
-            'source': 'curves',
-            'paint': {
-                'line-color': '#3887be'
-            }
-        });
-        this.__map.addLayer({
-            'id': 'points',
-            'type': 'circle',
-            'source': 'curves',
-            'paint': {
-                'circle-radius': 10,
-                'circle-color': '#3887be'
-            }
-        });
-
-        this.__currentPoint = null;
-
-        this.__map.on('mouseenter', this.mouseEnter.bind(this));
-        this.__map.on('mouseleave', this.mouseLeave.bind(this));
-        this.__map.on('mousedown', this.mouseDown.bind(this));
-        this.__map.on('touchstart', this.touchStart.bind(this));
-    }
-
-    addPoint(coords)
-    {
-         const nextId = this.__geojson.features.length;
-         this.__geojson.features.push({
-            'type': 'Feature',
-            'geometry': {
-                'type': 'Point',
-                'coordinates': coords
-            },
-            'properties': {
-                'id': nextId
-            }
-        });
-        this.__map.getSource('curves').setData(this.__geojson);
-        return nextId;
-    }
-
-    mouseEnter(e) {
-        console.log('Mouse enter...');
-
-        this.__map.setPaintProperty('lines', 'line-color', '#3bb2d0');
-        this.__map.setPaintProperty('points', 'circle-color', '#3bb2d0');
-        this.__canvas.style.cursor = 'move';
-    }
-
-         
-    mouseLeave(e) {
-        this.__map.setPaintProperty('lines', 'line-color', '#3887be');
-        this.__map.setPaintProperty('points', 'circle-color', '#3887be');
-        this.__canvas.style.cursor = '';
-    }
-
-
-    mouseDown(e) {
-        console.log('Mouse down...')
-        // Prevent the default map drag behavior.
-        e.preventDefault();
-
-
-        const features = this.__map.queryRenderedFeatures(e.point, {'layers': ['lines', 'points']});
-        if (features.length === 0) {
-            const coords = e.lngLat;
-            this.__currentPoint = this.addPoint([coords.lng, coords.lat]);
-        } else {
-            const currentPoint = features[0].properties.id;
-            if (this.__currentPoint === null) {
-                this.__currentPoint = currentPoint;
-            } else if (this.__currentPoint === currentPoint) {
-                this.__currentPoint = null;
-            }
-        }
-
-        this.__canvas.style.cursor = 'grab';
-
-        this.__map.on('mousemove', this.onMove.bind(this));
-        this.__map.once('mouseup', this.onUp.bind(this));
-
-    }
-         
-    touchStart(e) {
-        if (e.points.length !== 1) return;
-
-        // Prevent the default map drag behavior.
-        e.preventDefault();
-
-        this.__map.on('touchmove', this.onMove.bind(this));
-        this.__map.once('touchend', this.onUp.bind(this));
-    }
-
-    onMove(e) {
-        console.log('Mouse move...')
-
-        // Set a UI indicator for dragging.
-        this.__canvas.style.cursor = 'grabbing';  // ????
-
-        if (this.__currentPoint !== null) {
-            const coords = e.lngLat;
-            this.__geojson.features[this.__currentPoint].geometry.coordinates = [coords.lng, coords.lat];
-            this.__map.getSource('curves').setData(this.__geojson);
-        }
-    }
-
-    onUp(e) {
-        console.log('End draw at', e.lngLat)
-
-        this.__canvas.style.cursor = '';
-
-        // Unbind mouse/touch events
-        this.__map.off('mousemove', this.onMove.bind(this));
-        this.__map.off('touchmove', this.onMove.bind(this));
-    }
-}