From 9e5d1cf14abe55480424c665285debb90693159d Mon Sep 17 00:00:00 2001 From: Harsh Pande Date: Sat, 22 Apr 2023 18:02:26 +0530 Subject: [PATCH] Added "Locate Me" button --- package-lock.json | 181 +++++++++++++++++++++++++--------------------- package.json | 3 +- src/Map/Map.css | 13 ++++ src/Map/Map.jsx | 40 ++++++++++ 4 files changed, 154 insertions(+), 83 deletions(-) diff --git a/package-lock.json b/package-lock.json index ba99869..ac11e49 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,13 +11,14 @@ "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@geoman-io/leaflet-geoman-free": "^2.13.1", - "@mui/material": "^5.10.14", + "@mui/material": "^5.12.1", "@turf/turf": "^6.5.0", "axios": "^1.1.3", "date-fns": "^2.29.3", "jquery-ui-bundle": "^1.12.1-migrate", "json-format": "^1.0.1", "leaflet": "^1.9.3", + "leaflet-easybutton": "^2.4.0", "leaflet-extra-markers": "^1.2.1", "leaflet.heightgraph": "^1.4.0", "prop-types": "^15.8.1", @@ -3156,14 +3157,14 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, "node_modules/@mui/base": { - "version": "5.0.0-alpha.124", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.124.tgz", - "integrity": "sha512-I6M+FrjRCybQCr8I8JTu6L2MkUobSQFgNIpOJyDNKL5zq/73LvZIQXvsKumAzthVGvI1PYaarM9vGDrDYbumKA==", + "version": "5.0.0-alpha.126", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.126.tgz", + "integrity": "sha512-I5e52A0Muv9Gaoy2GcqbYrQ6dpRyC2UXeA00brT3HuW0nF0E4fiTOIqdNTN+N5gyaYK0z3O6jtLt/97CCrIxVA==", "dependencies": { "@babel/runtime": "^7.21.0", "@emotion/is-prop-valid": "^1.2.0", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.12.0", "@popperjs/core": "^2.11.7", "clsx": "^1.2.1", "prop-types": "^15.8.1", @@ -3188,25 +3189,25 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.16.tgz", - "integrity": "sha512-GxRfZ/HquQ/1nUc9qQVGReP6oOMS8/3QjPJ+23a7TMrxl2wjlmXrMNn7tRa30vZcGcDgEG+J0aseefUN0AoawQ==", + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.1.tgz", + "integrity": "sha512-rNiQYHtkXljcvCEnhWrJzie1ifff5O98j3uW7ZlchFgD8HWxEcz/QoxZvo+sCKC9aayAgxi9RsVn2VjCyp5CrA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" } }, "node_modules/@mui/material": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.16.tgz", - "integrity": "sha512-++glQqbZ3rMzOWB77yOvqRG+k8+scYTUKVWZpWff+GWsf6L10g9L2wgRhhAS8bDLuxCbXZlPNbSZowXDDw6z6Q==", + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.1.tgz", + "integrity": "sha512-m+G9J6+FzIMhRqKV2y30yONH97wX107z9EWgiNCeS1/+y1CnytFZNG1ENdOuaJo1NimCRnmB/iXPvoOaSo6dOg==", "dependencies": { "@babel/runtime": "^7.21.0", - "@mui/base": "5.0.0-alpha.124", - "@mui/core-downloads-tracker": "^5.11.16", - "@mui/system": "^5.11.16", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", + "@mui/base": "5.0.0-alpha.126", + "@mui/core-downloads-tracker": "^5.12.1", + "@mui/system": "^5.12.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.12.0", "@types/react-transition-group": "^4.4.5", "clsx": "^1.2.1", "csstype": "^3.1.2", @@ -3241,12 +3242,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.11.13", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.13.tgz", - "integrity": "sha512-PJnYNKzW5LIx3R+Zsp6WZVPs6w5sEKJ7mgLNnUXuYB1zo5aX71FVLtV7geyPXRcaN2tsoRNK7h444ED0t7cIjA==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.0.tgz", + "integrity": "sha512-w5dwMen1CUm1puAtubqxY9BIzrBxbOThsg2iWMvRJmWyJAPdf3Z583fPXpqeA2lhTW79uH2jajk5Ka4FuGlTPg==", "dependencies": { "@babel/runtime": "^7.21.0", - "@mui/utils": "^5.11.13", + "@mui/utils": "^5.12.0", "prop-types": "^15.8.1" }, "engines": { @@ -3267,12 +3268,12 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.16.tgz", - "integrity": "sha512-8dJRR/LqtGGaZN21p1vU9euwrKERlgtQIWyuzBKZ8/cuSlW5rIzlp46liP+Uh0+7d9NcHU0H4hBMoPt3ax64PA==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.0.tgz", + "integrity": "sha512-frh8L7CRnvD0RDmIqEv6jFeKQUIXqW90BaZ6OrxJ2j4kIsiVLu29Gss4SbBvvrWwwatR72sBmC3w1aG4fjp9mQ==", "dependencies": { "@babel/runtime": "^7.21.0", - "@emotion/cache": "^11.10.5", + "@emotion/cache": "^11.10.7", "csstype": "^3.1.2", "prop-types": "^15.8.1" }, @@ -3298,15 +3299,15 @@ } }, "node_modules/@mui/system": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.16.tgz", - "integrity": "sha512-JY7CNm7ik2Gr4kQpz1+C9N/f4ET3QjVBo/iaHcmlSOgjdxnOzFbv+vCdb1DMzBGew+UbqckppZpZwbgbrBE2Rw==", + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.1.tgz", + "integrity": "sha512-Po+sicdV3bbRYXdU29XZaHPZrW7HUYUqU1qCu77GCCEMbahC756YpeyefdIYuPMUg0OdO3gKIUfDISBrkjJL+w==", "dependencies": { "@babel/runtime": "^7.21.0", - "@mui/private-theming": "^5.11.13", - "@mui/styled-engine": "^5.11.16", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", + "@mui/private-theming": "^5.12.0", + "@mui/styled-engine": "^5.12.0", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.12.0", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -3337,9 +3338,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz", - "integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==", + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", + "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", "peerDependencies": { "@types/react": "*" }, @@ -3350,9 +3351,9 @@ } }, "node_modules/@mui/utils": { - "version": "5.11.13", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz", - "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.0.tgz", + "integrity": "sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==", "dependencies": { "@babel/runtime": "^7.21.0", "@types/prop-types": "^15.7.5", @@ -14359,6 +14360,14 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz", "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==" }, + "node_modules/leaflet-easybutton": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/leaflet-easybutton/-/leaflet-easybutton-2.4.0.tgz", + "integrity": "sha512-O+qsQq4zTF6ds8VClnytobTH/MKalctlPpiA8L+bNKHP14J3lgJpvEd/jSpq9mHTI6qOzRAvbQX6wS6qNwThvg==", + "dependencies": { + "leaflet": "^1.0.1" + } + }, "node_modules/leaflet-extra-markers": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/leaflet-extra-markers/-/leaflet-extra-markers-1.2.1.tgz", @@ -19802,16 +19811,16 @@ } }, "node_modules/typescript": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", - "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=12.20" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { @@ -23164,14 +23173,14 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, "@mui/base": { - "version": "5.0.0-alpha.124", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.124.tgz", - "integrity": "sha512-I6M+FrjRCybQCr8I8JTu6L2MkUobSQFgNIpOJyDNKL5zq/73LvZIQXvsKumAzthVGvI1PYaarM9vGDrDYbumKA==", + "version": "5.0.0-alpha.126", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.126.tgz", + "integrity": "sha512-I5e52A0Muv9Gaoy2GcqbYrQ6dpRyC2UXeA00brT3HuW0nF0E4fiTOIqdNTN+N5gyaYK0z3O6jtLt/97CCrIxVA==", "requires": { "@babel/runtime": "^7.21.0", "@emotion/is-prop-valid": "^1.2.0", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.12.0", "@popperjs/core": "^2.11.7", "clsx": "^1.2.1", "prop-types": "^15.8.1", @@ -23179,21 +23188,21 @@ } }, "@mui/core-downloads-tracker": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.16.tgz", - "integrity": "sha512-GxRfZ/HquQ/1nUc9qQVGReP6oOMS8/3QjPJ+23a7TMrxl2wjlmXrMNn7tRa30vZcGcDgEG+J0aseefUN0AoawQ==" + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.1.tgz", + "integrity": "sha512-rNiQYHtkXljcvCEnhWrJzie1ifff5O98j3uW7ZlchFgD8HWxEcz/QoxZvo+sCKC9aayAgxi9RsVn2VjCyp5CrA==" }, "@mui/material": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.16.tgz", - "integrity": "sha512-++glQqbZ3rMzOWB77yOvqRG+k8+scYTUKVWZpWff+GWsf6L10g9L2wgRhhAS8bDLuxCbXZlPNbSZowXDDw6z6Q==", + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.1.tgz", + "integrity": "sha512-m+G9J6+FzIMhRqKV2y30yONH97wX107z9EWgiNCeS1/+y1CnytFZNG1ENdOuaJo1NimCRnmB/iXPvoOaSo6dOg==", "requires": { "@babel/runtime": "^7.21.0", - "@mui/base": "5.0.0-alpha.124", - "@mui/core-downloads-tracker": "^5.11.16", - "@mui/system": "^5.11.16", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", + "@mui/base": "5.0.0-alpha.126", + "@mui/core-downloads-tracker": "^5.12.1", + "@mui/system": "^5.12.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.12.0", "@types/react-transition-group": "^4.4.5", "clsx": "^1.2.1", "csstype": "^3.1.2", @@ -23203,51 +23212,51 @@ } }, "@mui/private-theming": { - "version": "5.11.13", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.13.tgz", - "integrity": "sha512-PJnYNKzW5LIx3R+Zsp6WZVPs6w5sEKJ7mgLNnUXuYB1zo5aX71FVLtV7geyPXRcaN2tsoRNK7h444ED0t7cIjA==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.0.tgz", + "integrity": "sha512-w5dwMen1CUm1puAtubqxY9BIzrBxbOThsg2iWMvRJmWyJAPdf3Z583fPXpqeA2lhTW79uH2jajk5Ka4FuGlTPg==", "requires": { "@babel/runtime": "^7.21.0", - "@mui/utils": "^5.11.13", + "@mui/utils": "^5.12.0", "prop-types": "^15.8.1" } }, "@mui/styled-engine": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.16.tgz", - "integrity": "sha512-8dJRR/LqtGGaZN21p1vU9euwrKERlgtQIWyuzBKZ8/cuSlW5rIzlp46liP+Uh0+7d9NcHU0H4hBMoPt3ax64PA==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.0.tgz", + "integrity": "sha512-frh8L7CRnvD0RDmIqEv6jFeKQUIXqW90BaZ6OrxJ2j4kIsiVLu29Gss4SbBvvrWwwatR72sBmC3w1aG4fjp9mQ==", "requires": { "@babel/runtime": "^7.21.0", - "@emotion/cache": "^11.10.5", + "@emotion/cache": "^11.10.7", "csstype": "^3.1.2", "prop-types": "^15.8.1" } }, "@mui/system": { - "version": "5.11.16", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.16.tgz", - "integrity": "sha512-JY7CNm7ik2Gr4kQpz1+C9N/f4ET3QjVBo/iaHcmlSOgjdxnOzFbv+vCdb1DMzBGew+UbqckppZpZwbgbrBE2Rw==", + "version": "5.12.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.1.tgz", + "integrity": "sha512-Po+sicdV3bbRYXdU29XZaHPZrW7HUYUqU1qCu77GCCEMbahC756YpeyefdIYuPMUg0OdO3gKIUfDISBrkjJL+w==", "requires": { "@babel/runtime": "^7.21.0", - "@mui/private-theming": "^5.11.13", - "@mui/styled-engine": "^5.11.16", - "@mui/types": "^7.2.3", - "@mui/utils": "^5.11.13", + "@mui/private-theming": "^5.12.0", + "@mui/styled-engine": "^5.12.0", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.12.0", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" } }, "@mui/types": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz", - "integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==", + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", + "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", "requires": {} }, "@mui/utils": { - "version": "5.11.13", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz", - "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.0.tgz", + "integrity": "sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==", "requires": { "@babel/runtime": "^7.21.0", "@types/prop-types": "^15.7.5", @@ -31379,6 +31388,14 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz", "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==" }, + "leaflet-easybutton": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/leaflet-easybutton/-/leaflet-easybutton-2.4.0.tgz", + "integrity": "sha512-O+qsQq4zTF6ds8VClnytobTH/MKalctlPpiA8L+bNKHP14J3lgJpvEd/jSpq9mHTI6qOzRAvbQX6wS6qNwThvg==", + "requires": { + "leaflet": "^1.0.1" + } + }, "leaflet-extra-markers": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/leaflet-extra-markers/-/leaflet-extra-markers-1.2.1.tgz", @@ -35167,9 +35184,9 @@ } }, "typescript": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", - "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true }, "unbox-primitive": { diff --git a/package.json b/package.json index b4dcf39..90c8ce0 100644 --- a/package.json +++ b/package.json @@ -7,13 +7,14 @@ "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@geoman-io/leaflet-geoman-free": "^2.13.1", - "@mui/material": "^5.10.14", + "@mui/material": "^5.12.1", "@turf/turf": "^6.5.0", "axios": "^1.1.3", "date-fns": "^2.29.3", "jquery-ui-bundle": "^1.12.1-migrate", "json-format": "^1.0.1", "leaflet": "^1.9.3", + "leaflet-easybutton": "^2.4.0", "leaflet-extra-markers": "^1.2.1", "leaflet.heightgraph": "^1.4.0", "prop-types": "^15.8.1", diff --git a/src/Map/Map.css b/src/Map/Map.css index 83c6408..03a7002 100644 --- a/src/Map/Map.css +++ b/src/Map/Map.css @@ -9,4 +9,17 @@ .map-style{ width: 100%; height: 100vh; +} + +.icon-container{ + font-size: 20px; +} + +.leaflet-control-easy-button { + border: none; + background-color: #188e3b; + height: 40px; + width: 45px; + color: rgb(231, 231, 231); + } \ No newline at end of file diff --git a/src/Map/Map.jsx b/src/Map/Map.jsx index 31e8389..37d5d71 100644 --- a/src/Map/Map.jsx +++ b/src/Map/Map.jsx @@ -2,6 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom' import { connect } from 'react-redux' import L from 'leaflet' +import 'leaflet-easybutton' import * as $ from 'jquery' import 'jquery-ui-bundle' import 'jquery-ui-bundle/jquery-ui.css' @@ -33,6 +34,7 @@ import { import { colorMappings, buildHeightgraphData } from 'utils/heightgraph' import formatDuration from 'utils/date_time' import './Map.css' +import { green } from '@mui/material/colors' const OSMTiles = L.tileLayer(process.env.REACT_APP_TILE_SERVER_URL, { attribution: 'About this service and privacy policy | © OpenStreetMap contributors', @@ -161,6 +163,44 @@ class Map extends React.Component { this.layerControl = L.control.layers(baseMaps, overlayMaps).addTo(this.map) + //Adding locate button + const locateButton = L.easyButton({ + position: 'topright', + color: green, + states: [ + { + stateName: 'unlocated', + icon: '
', + title: 'Locate me', + onClick: () => { + // get the user's current location + // navigator.geolocation is part of the Web API, + // which is a set of standardized APIs provided by web browsers to enable + // web applications to interact with the browser and the device on which it is running. + // Find more at https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + if (navigator.geolocation) { + const confirmed = window.confirm( + 'This website would like to use your location. Do you give permission?' + ) + if (confirmed) { + navigator.geolocation.getCurrentPosition((position) => { + const lat = position.coords.latitude + const lng = position.coords.longitude + this.map.flyTo([lat, lng], 16) + }) + } else { + alert('Permission denied') + } + } else { + console.log('Geolocation is not supported by this browser.') + } + }, + }, + ], + }) + locateButton.button.classList.add('leaflet-control-easy-button') + locateButton.addTo(this.map) + // we do want a zoom control L.control .zoom({