geolocation button closes issue#780 (#800)

* geolocation button * Delete index.js * Delete multipleExtents.html * some changes to the file * button name change * minor edits * geolocation sync with controlslist api * tests fixed and syncing web-map * Peter suggested changes * locate api * locateapi and locate button test * tests * locate button title changes when its state changes * locatebutton states test * web-map syncing * Remove the word "control" from button title * Remove the word "control" from button title * Fix test * grunt file change * Finalize text strings prior to localization * Localize text strings for location control button states * custom marker * small changes and tests * locate APi bug fix * minor styling fix * marker image made to svg * Alliyan suggested changes * locateapi test bug fix * marker title changes depends on statr * Localize text strings for my current or cached location marker * Update test to use variables for geolocation button states * tooltip focus * tooltip test added * geolocationbutton code refactored * fixed tests and small fixes * Formatting --------- Co-authored-by: Peter Rushforth <peter.rushforth@gmail.com> Co-authored-by: AliyanH <aliyanulhaq@gmail.com>
Maps4HTML · Apr 5, 2023 · d24a606 · d24a606
1 parent 2082d1b
commit d24a606
Show file tree

Hide file tree

Showing 14 changed files with 562 additions and 6 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -9,7 +9,7 @@ module.exports = function(grunt) {
       },
       combine: {
         files: {
-        'dist/mapml.css': ['node_modules/leaflet/dist/leaflet.css', 'src/mapml.css']
+        'dist/mapml.css': ['node_modules/leaflet/dist/leaflet.css', 'node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css', 'node_modules/leaflet.locatecontrol/dist/L.Control.Locate.mapbox.css', 'src/mapml.css']
         }
       }
     },
@@ -31,7 +31,8 @@ module.exports = function(grunt) {
           'dist/layer.js':        ['src/layer.js'],
           'dist/leaflet.js':      ['dist/leaflet-src.js',
                                    'dist/proj4-src.js',
-                                   'dist/proj4leaflet.js']
+                                   'dist/proj4leaflet.js',
+                                   'dist/L.Control.Locate.js']
         } 
       }
     },
@@ -87,6 +88,14 @@ module.exports = function(grunt) {
             filter: 'isFile',
             src: ['index.html'],
             dest: 'dist/'
+          },
+          {
+            expand: true,
+            cwd: 'node_modules/leaflet.locatecontrol/src/',
+            flatten: true,
+            filter: 'isFile',
+            src: ['L.Control.Locate.js'],
+            dest: 'dist/'
           }
         ],
         options: {
@@ -155,7 +164,7 @@ module.exports = function(grunt) {
     },
     clean: {
       dist: ['dist'],
-      tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js'],
+      tidyup: ['dist/leaflet-src.js','dist/proj4-src.js','dist/proj4leaflet.js','dist/L.Control.Locate.js'],
       experiments: {
         options: {force: true},
         src: ['../experiments/dist']

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "jest-environment-node": "^26.6.1",
     "jest-playwright-preset": "^1.7.0",
     "leaflet": "^1.9.3",
+    "leaflet.locatecontrol": "^0.79.0",
     "path": "^0.12.7",
     "@playwright/test": "^1.24.2",
     "playwright": "^1.24.2",

diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -134,7 +134,7 @@ export class MapViewer extends HTMLElement {
     this._controlsList = new DOMTokenList(
       this.getAttribute("controlslist"),
       this, "controlslist", 
-      ["noreload","nofullscreen","nozoom","nolayer"]
+      ["noreload","nofullscreen","nozoom","nolayer","geolocation"]
     );
 
     // the dimension attributes win, if they're there. A map does not
@@ -354,6 +354,9 @@ export class MapViewer extends HTMLElement {
       totalSize += 49;
       this._fullScreenControl = M.fullscreenButton().addTo(this._map);
     }
+    if (!this._geolocationButton) {
+      this._geolocationButton = M.geolocationButton().addTo(this._map);
+    }
   }
 
   // Sets controls by hiding/unhiding them based on the map attribute
@@ -372,12 +375,14 @@ export class MapViewer extends HTMLElement {
     this._setControlsVisibility("layercontrol",true);
     this._setControlsVisibility("reload",true);
     this._setControlsVisibility("zoom",true);
+    this._setControlsVisibility("geolocation",true);
   }
   _showControls() {
     this._setControlsVisibility("fullscreen",false);
     this._setControlsVisibility("layercontrol",false);
     this._setControlsVisibility("reload",false);
     this._setControlsVisibility("zoom",false);
+    this._setControlsVisibility("geolocation",true);
 
     // prune the controls shown if necessary
     // this logic could be embedded in _showControls
@@ -398,6 +403,9 @@ export class MapViewer extends HTMLElement {
           case 'nozoom':
             this._setControlsVisibility("zoom",true);
           break;
+          case 'geolocation':
+            this._setControlsVisibility("geolocation",false);
+          break;
         }
       });
     }
@@ -431,6 +439,11 @@ export class MapViewer extends HTMLElement {
           container = this._layerControl._container;
         }
         break;
+      case "geolocation":
+        if (this._geolocationButton) {
+          container = this._geolocationButton._container;
+        }
+        break;
     }
     if (container) {
       if (hide) {
@@ -525,6 +538,19 @@ export class MapViewer extends HTMLElement {
               {target: this}}));
       }
     });
+
+    this._map.on('locationfound',
+      function (e) {
+        this.dispatchEvent(new CustomEvent('maplocationfound', {detail:
+          {latlng: e.latlng,     accuracy: e.accuracy}
+         }));
+      },this);
+    this._map.on('locationerror',
+      function (e) {
+        this.dispatchEvent(new CustomEvent('locationerror', {detail:
+          {error:e.message}
+        }));
+      },this);
     this._map.on('load',
       function () {
         this.dispatchEvent(new CustomEvent('load', {detail: {target: this}}));
@@ -656,6 +682,22 @@ export class MapViewer extends HTMLElement {
       }
     });
   }
+
+  locate(options) { //options: https://leafletjs.com/reference.html#locate-options
+    if (this._geolocationButton) {
+      this._geolocationButton.stop();
+    }
+    if (options) {
+      if (options.zoomTo) {
+        options.setView = options.zoomTo;
+        delete options.zoomTo;
+      }
+      this._map.locate(options);
+    } else {
+      this._map.locate({setView: true, maxZoom: 16});
+    }
+  }
+
   toggleDebug(){
     if(this._debug){
       this._debug.remove();

diff --git a/src/mapml/control/GeolocationButton.js b/src/mapml/control/GeolocationButton.js
@@ -0,0 +1,44 @@
+export var GeolocationButton = L.Control.extend({
+  options: {
+      position: 'bottomright'
+  },
+
+  onAdd: function (map) {
+    this.locateControl = L.control.locate({
+      showPopup: false,
+      strings: {
+        title: M.options.locale.btnLocTrackOff 
+      },
+      position: this.options.position,
+      locateOptions: {
+        maxZoom: 16
+      }
+    }).addTo(map);
+
+    var container = this.locateControl._container;
+    var button = this.locateControl;
+    var observer = new MutationObserver(function(mutations) {
+      if (container.classList.contains('active') && container.classList.contains('following')) {
+        container.firstChild.title = M.options.locale.btnLocTrackOn;
+        button._marker.bindTooltip(M.options.locale.btnMyLocTrackOn,{permanent:true});
+      } else if (container.classList.contains('active')) {
+        container.firstChild.title = M.options.locale.btnLocTrackLastKnown;
+        button._marker.bindTooltip(M.options.locale.btnMyLastKnownLocTrackOn);
+      } else {
+        container.firstChild.title = M.options.locale.btnLocTrackOff;
+      }
+    });
+    var observerConfig = { attributes: true, attributeFilter: ['class'] };
+    observer.observe(container, observerConfig);
+
+    return container;
+  },
+
+  stop: function () {
+    return this.locateControl.stop();
+  }
+});
+
+export var geolocationButton = function (options) {
+  return new GeolocationButton(options);
+};
diff --git a/src/mapml/index.js b/src/mapml/index.js
@@ -53,7 +53,8 @@ import { ContextMenu } from './handlers/ContextMenu';
 import { Util } from './utils/Util';
 import { ReloadButton, reloadButton } from './control/ReloadButton';
 import { FullscreenButton, fullscreenButton } from './control/FullscreenButton';
-import {attributionControl} from "./control/AttributionControl";
+import {attributionControl} from "./control/AttributionControl"; 
+import {geolocationButton} from "./control/GeolocationButton";
 import { Crosshair, crosshair } from "./layers/Crosshair";
 import { Feature, feature } from "./features/feature";
 import { FeatureRenderer, featureRenderer } from './features/featureRenderer';
@@ -659,6 +660,8 @@ M.fullscreenButton = fullscreenButton;
 
 M.attributionControl = attributionControl;
 
+M.geolocationButton = geolocationButton;
+
 M.StaticTileLayer = StaticTileLayer;
 M.staticTileLayer = staticTileLayer;
 

diff --git a/src/mapml/options.js b/src/mapml/options.js
@@ -22,6 +22,11 @@ export var Options = {
     btnZoomOut: "Zoom out",
     btnFullScreen: "View Fullscreen",
     btnExitFullScreen: "Exit Fullscreen",
+    btnLocTrackOn: "Show my location - location tracking on",
+    btnMyLocTrackOn: "My current location, shown on map",
+    btnLocTrackOff: "Show my location - location tracking off",
+    btnLocTrackLastKnown: "Show my location - last known location shown",
+    btnMyLastKnownLocTrackOn: "My last known location, shown on map",
     amZoom: "zoom level",
     amColumn: "column",
     amRow: "row",

diff --git a/src/web-map.js b/src/web-map.js
@@ -138,7 +138,7 @@ export class WebMap extends HTMLMapElement {
     this._controlsList = new DOMTokenList(
       this.getAttribute("controlslist"),
       this, "controlslist", 
-      ["noreload","nofullscreen","nozoom","nolayer"]
+      ["noreload","nofullscreen","nozoom","nolayer","geolocation"]
     );
 
     // the dimension attributes win, if they're there. A map does not
@@ -397,6 +397,9 @@ export class WebMap extends HTMLMapElement {
       totalSize += 49;
       this._fullScreenControl = M.fullscreenButton().addTo(this._map);
     }
+    if (!this._geolocationButton) {
+      this._geolocationButton = M.geolocationButton().addTo(this._map);
+    }
   }
 
   // Sets controls by hiding/unhiding them based on the map attribute
@@ -415,12 +418,14 @@ export class WebMap extends HTMLMapElement {
     this._setControlsVisibility("layercontrol",true);
     this._setControlsVisibility("reload",true);
     this._setControlsVisibility("zoom",true);
+    this._setControlsVisibility("geolocation",true);
   }
   _showControls() {
     this._setControlsVisibility("fullscreen",false);
     this._setControlsVisibility("layercontrol",false);
     this._setControlsVisibility("reload",false);
     this._setControlsVisibility("zoom",false);
+    this._setControlsVisibility("geolocation",true);
 
     // prune the controls shown if necessary
     // this logic could be embedded in _showControls
@@ -441,6 +446,9 @@ export class WebMap extends HTMLMapElement {
           case 'nozoom':
             this._setControlsVisibility("zoom",true);
           break;
+          case 'geolocation':
+            this._setControlsVisibility("geolocation",false);
+          break;
         }
       });
     }
@@ -474,6 +482,11 @@ export class WebMap extends HTMLMapElement {
           container = this._layerControl._container;
         }
         break;
+      case "geolocation":
+        if (this._geolocationButton) {
+          container = this._geolocationButton._container;
+        }
+        break;
     }
     if (container) {
       if (hide) {
@@ -568,6 +581,19 @@ export class WebMap extends HTMLMapElement {
               {target: this}}));
       }
     });
+
+    this._map.on('locationfound',
+      function (e) {
+        this.dispatchEvent(new CustomEvent('maplocationfound', {detail:
+          {latlng: e.latlng,     accuracy: e.accuracy}
+         }));
+      },this);
+    this._map.on('locationerror',
+      function (e) {
+        this.dispatchEvent(new CustomEvent('locationerror', {detail:
+          {error:e.message}
+        }));
+      },this);
     this._map.on('load',
       function () {
         this.dispatchEvent(new CustomEvent('load', {detail: {target: this}}));
@@ -699,6 +725,22 @@ export class WebMap extends HTMLMapElement {
       }
     });   
   }
+
+  locate(options) { //options: https://leafletjs.com/reference.html#locate-options
+    if (this._geolocationButton) {
+      this._geolocationButton.stop();
+    }
+    if (options) {
+      if (options.zoomTo) {
+        options.setView = options.zoomTo;
+        delete options.zoomTo;
+      }
+      this._map.locate(options);
+    } else {
+      this._map.locate({setView: true, maxZoom: 16});
+    }
+  }
+
   toggleDebug(){
     if(this._debug){
       this._debug.remove();