geolocation button closes issue#780

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']
         }
       }
     },
@@ -87,6 +87,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: {

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",

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,18 @@ export class MapViewer extends HTMLElement {
       totalSize += 49;
       this._fullScreenControl = M.fullscreenButton().addTo(this._map);
     }
+    if (!this._geolocationButton){
+      this._geolocationButton = M.geolocationButton({
+        showPopup: false,
+        strings: {
+          title: "Show my location"
+        },
+        position: "bottomright",
+        locateOptions: {
+          maxZoom: 16
+        },
+      },this._map);
+    }
   }
 
   // Sets controls by hiding/unhiding them based on the map attribute
@@ -372,12 +384,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 +412,9 @@ export class MapViewer extends HTMLElement {
           case 'nozoom':
             this._setControlsVisibility("zoom",true);
           break;
+          case 'geolocation':
+            this._setControlsVisibility("geolocation",false);
+          break;
         }
       });
     }
@@ -431,6 +448,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 +547,24 @@ export class MapViewer extends HTMLElement {
               {target: this}}));
       }
     });
+    this._map.on('locationfound',
+      function (e) {
+        this.dispatchEvent(new CustomEvent('maplocationfound', {detail:
+          {latlng: e.latlng,     radius: e.accuracy}
+         }));
+      },this);
+    this.addEventListener('maplocationfound', function(e) {
+      //'Location found:', e.detail.latlng, 'Radius:', e.detail.radius
+    });
+    this._map.on('locationerror',
+      function (e) {
+        this.dispatchEvent(new CustomEvent('locationerror', {detail:
+          {error:e.message}
+        }));
+      },this);
+    this.addEventListener('locationerror', function(e) {
+      //error:e.detail.error
+    });
     this._map.on('load',
       function () {
         this.dispatchEvent(new CustomEvent('load', {detail: {target: this}}));
@@ -656,6 +696,20 @@ export class MapViewer extends HTMLElement {
       }
     });
   }
+  locate(options){
+    if (this._map) {
+      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();

src/mapml/control/GeolocationButton.js

@@ -0,0 +1,4 @@
+import '../../../dist/L.Control.Locate';
+export var geolocationButton = function (options, map) {
+    return L.control.locate(options).addTo(map);
+};

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;
 

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,18 @@ export class WebMap extends HTMLMapElement {
       totalSize += 49;
       this._fullScreenControl = M.fullscreenButton().addTo(this._map);
     }
+    if (!this._geolocationButton){
+      this._geolocationButton = M.geolocationButton({
+        showPopup: false,
+        strings: {
+          title: "Show my location"
+        },
+        position: "bottomright",
+        locateOptions: {
+          maxZoom: 24
+        },
+      },this._map);
+    }
   }
 
   // Sets controls by hiding/unhiding them based on the map attribute
@@ -415,12 +427,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 +455,9 @@ export class WebMap extends HTMLMapElement {
           case 'nozoom':
             this._setControlsVisibility("zoom",true);
           break;
+          case 'geolocation':
+            this._setControlsVisibility("geolocation",false);
+          break;
         }
       });
     }
@@ -474,6 +491,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) {

test/e2e/api/domApi-mapml-viewer.test.js

@@ -96,6 +96,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
     let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
     let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
     let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+    let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+    expect(geolocation).toEqual(true);
     expect(zoomHidden).toEqual(true);
     expect(reloadHidden).toEqual(true);
     expect(fullscreenHidden).toEqual(true);
@@ -135,6 +137,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
     let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
     let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
     let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+    let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+    expect(geolocation).toEqual(true);
     expect(zoomHidden).toEqual(true);
     expect(reloadHidden).toEqual(true);
     expect(fullscreenHidden).toEqual(true);
@@ -153,6 +157,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
     let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
     let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
     let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+    let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+    expect(geolocation).toEqual(true);
     expect(zoomHidden).toEqual(true);
     expect(reloadHidden).toEqual(true);
     expect(fullscreenHidden).toEqual(true);
@@ -168,6 +174,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
     let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
     let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
     let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+    let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+    expect(geolocation).toEqual(true);
     expect(zoomHidden).toEqual(false);
     expect(reloadHidden).toEqual(false);
     expect(fullscreenHidden).toEqual(false);
@@ -231,6 +239,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
       let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
       let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
       let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+      let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(true);
       expect(zoomHidden).toEqual(true);
       expect(reloadHidden).toEqual(false);
       expect(fullscreenHidden).toEqual(true);
@@ -250,6 +260,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
       let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
       let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
       let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+      let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(true);
       expect(zoomHidden).toEqual(false);
       expect(reloadHidden).toEqual(true);
       expect(fullscreenHidden).toEqual(false);
@@ -264,6 +276,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
       reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
       fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
       layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+      geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(true);
       expect(zoomHidden).toEqual(true);
       expect(reloadHidden).toEqual(true);
       expect(fullscreenHidden).toEqual(false);
@@ -281,6 +295,8 @@ test.describe("mapml-viewer DOM API Tests", () => {
       let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
       let fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
       let layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+      let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(true);
       expect(zoomHidden).toEqual(true);
       expect(reloadHidden).toEqual(true);
       expect(fullscreenHidden).toEqual(true);
@@ -295,12 +311,31 @@ test.describe("mapml-viewer DOM API Tests", () => {
       reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
       fullscreenHidden = await page.$eval(".leaflet-top.leaflet-left > .leaflet-control-fullscreen", (div) => div.hidden);
       layerControlHidden = await page.$eval(".leaflet-top.leaflet-right > .leaflet-control-layers", (div) => div.hidden);
+      geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(true);
       expect(zoomHidden).toEqual(true);
       expect(reloadHidden).toEqual(true);
       expect(fullscreenHidden).toEqual(false);
       expect(layerControlHidden).toEqual(true);
     });
+    test("controlslist geolocations test", async () => {
+      const viewerHandle = await page.evaluateHandle(() => document.querySelector('mapml-viewer'));
+      await page.evaluate( viewer => viewer.setAttribute("controlslist","geolocation"), viewerHandle);
+      let hascontrolslist = await page.evaluate( viewer => viewer.getAttribute("controlslist"), viewerHandle);
+      expect(hascontrolslist).toEqual('geolocation');
+
+      let geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(false);
+      //remove geolocation
+      await page.evaluate( viewer => viewer.controlsList = "noreload", viewerHandle);
+      hascontrolslist = await page.evaluate( viewer => viewer.getAttribute("controlslist"), viewerHandle);
+      expect(hascontrolslist).toEqual('noreload');
 
+      let reloadHidden = await page.$eval(".leaflet-top.leaflet-left > .mapml-reload-button", (div) => div.hidden);
+      geolocation = await page.$eval(".leaflet-bottom.leaflet-right > .leaflet-control-locate", (div) => div.hidden);
+      expect(geolocation).toEqual(true);
+      expect(reloadHidden).toEqual(true);
+    });
     test("controlslist removeAttribute", async () => {
       const viewerHandle = await page.evaluateHandle(() => document.querySelector('mapml-viewer'));
       // removeAttribute