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

@@ -36,6 +36,7 @@
     "jest": "jest --verbose --noStackTrace"
   },
   "devDependencies": {
+    "@playwright/test": "^1.24.2",
     "diff": "^5.1.0",
     "express": "^4.17.1",
     "grunt": "^1.4.0",
@@ -54,7 +55,6 @@
     "jest-playwright-preset": "^1.7.0",
     "leaflet": "^1.9.3",
     "path": "^0.12.7",
-    "@playwright/test": "^1.24.2",
     "playwright": "^1.24.2",
     "proj4": "^2.6.2",
     "proj4leaflet": "^1.0.2",
@@ -63,5 +63,8 @@
   "files": [
     "dist",
     "*.md"
-  ]
+  ],
+  "dependencies": {
+    "leaflet.locatecontrol": "^0.79.0"
+  }
 }

src/mapml-viewer.js

@@ -354,6 +354,19 @@ export class MapViewer extends HTMLElement {
       totalSize += 49;
       this._fullScreenControl = M.fullscreenButton().addTo(this._map);
     }
+    if (this.getAttribute("controlslist") === "geolocation" && !this._geolocationButton && (totalSize + 49) <= mapSize){
+      totalSize += 49;
+      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

src/mapml/control/GeolocationButton.js

@@ -0,0 +1,4 @@
+import '../../../dist/L.Control.Locate';
+export var geolocationButton = function (options, map) {
+    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;