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: "Locate"
+        },
+        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) {

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: "Locate"
+        },
+        position: "bottomright",
+        locateOptions: {
+          maxZoom: 16
+        },
+      },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

@@ -300,7 +300,24 @@ test.describe("mapml-viewer DOM API Tests", () => {
       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

test/e2e/api/domApi-web-map.test.js

@@ -304,7 +304,24 @@ test.describe("web-map DOM API Tests", () => {
       expect(fullscreenHidden).toEqual(false);
       expect(layerControlHidden).toEqual(true);
     });
+    test("controlslist geolocations test", async () => {
+      const viewerHandle = await page.evaluateHandle(() => document.querySelector('map'));
+      await page.evaluate( map => map.setAttribute("controlslist","geolocation"), viewerHandle);
+      let hascontrolslist = await page.evaluate( map => map.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( map => map.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 mapHandle = await page.evaluateHandle(() => document.querySelector('map'));
       // removeAttribute