From 3a089e3d549a601a019ee45f88a8043a8bdb7a63 Mon Sep 17 00:00:00 2001 From: yihong Date: Sun, 17 Sep 2023 21:38:48 +0800 Subject: [PATCH] fix: v2.0 can not zoom (#492) * This commit do these things, cause react update to 18 there is a serious bug for react-map-gl, so we deside to update it to v7. for v7 there's a lot of break change, we fix them as follows: - bring mapbox css to the file. - change the api that break - add two packages in it to fit the change - change viewport name to viewState to fit the api change * fix: git ignore * style: * line blur to smooth * mapStyle using dark-v10 to solve the language problem * FullscreenButton style fix --------- Co-authored-by: ben_29 --- .vercelignore | 1 + package.json | 3 +- pnpm-lock.yaml | 255 +++++---- src/components/Layout/index.tsx | 2 +- src/components/RunMap/RunMaker.tsx | 16 +- src/components/RunMap/index.tsx | 52 +- src/components/RunMap/mapbox.css | 666 ++++++++++++++++++++++++ src/components/RunMap/style.module.scss | 12 +- src/components/RunTable/index.tsx | 4 +- src/pages/index.tsx | 16 +- src/utils/utils.ts | 10 +- 11 files changed, 893 insertions(+), 144 deletions(-) create mode 100644 .vercelignore create mode 100644 src/components/RunMap/mapbox.css diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 00000000000..979f16f7011 --- /dev/null +++ b/.vercelignore @@ -0,0 +1 @@ +requirements.txt diff --git a/package.json b/package.json index f7818162840..d32ec67a5c9 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,13 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet-async": "^1.3.0", - "react-map-gl": "^5.1.22", + "react-map-gl": "^7.1.6", "react-router-dom": "^6.15.0", "sass": "^1.52.3", "sass-mq": "^6.0.0", "tachyons": "^4.12.0", "tachyons-sass": "git+https://github.com/tachyons-css/tachyons-sass.git", + "viewport-mercator-project": "^7.0.4", "vite": "^4.3.9", "vite-plugin-svgr": "^3.2.0", "vite-tsconfig-paths": "^4.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2bc5e9bf7b..f85f54cedd8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,8 +39,8 @@ dependencies: specifier: ^1.3.0 version: 1.3.0(react-dom@18.2.0)(react@18.2.0) react-map-gl: - specifier: ^5.1.22 - version: 5.3.21(react@18.2.0) + specifier: ^7.1.6 + version: 7.1.6(mapbox-gl@2.15.0)(react-dom@18.2.0)(react@18.2.0) react-router-dom: specifier: ^6.15.0 version: 6.15.0(react-dom@18.2.0)(react@18.2.0) @@ -56,6 +56,9 @@ dependencies: tachyons-sass: specifier: git+https://github.com/tachyons-css/tachyons-sass.git version: github.com/tachyons-css/tachyons-sass/2dce89b83729bddb9f4498c7d6f82b73d60d6538 + viewport-mercator-project: + specifier: ^7.0.4 + version: 7.0.4 vite: specifier: ^4.3.9 version: 4.4.9(@types/node@20.5.7)(sass@1.66.1) @@ -632,10 +635,6 @@ packages: minimist: 1.2.8 dev: false - /@mapbox/geojson-types@1.0.2: - resolution: {integrity: sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==} - dev: false - /@mapbox/jsonlint-lines-primitives@2.0.2: resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==} engines: {node: '>= 0.6'} @@ -649,14 +648,6 @@ packages: mapbox-gl: 2.15.0 dev: false - /@mapbox/mapbox-gl-supported@1.5.0(mapbox-gl@1.13.3): - resolution: {integrity: sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==} - peerDependencies: - mapbox-gl: '>=0.32.1 <2.0.0' - dependencies: - mapbox-gl: 1.13.3 - dev: false - /@mapbox/mapbox-gl-supported@2.0.1: resolution: {integrity: sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==} dev: false @@ -672,18 +663,10 @@ packages: meow: 6.1.1 dev: false - /@mapbox/tiny-sdf@1.2.5: - resolution: {integrity: sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw==} - dev: false - /@mapbox/tiny-sdf@2.0.6: resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==} dev: false - /@mapbox/unitbezier@0.0.0: - resolution: {integrity: sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==} - dev: false - /@mapbox/unitbezier@0.0.1: resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==} dev: false @@ -699,6 +682,18 @@ packages: engines: {node: '>=6.0.0'} dev: false + /@maplibre/maplibre-gl-style-spec@19.3.0: + resolution: {integrity: sha512-ZbhX9CTV+Z7vHwkRIasDOwTSzr76e8Q6a55RMsAibjyX6+P0ZNL1qAKNzOjjBDP3+aEfNMl7hHo5knuY6pTAUQ==} + hasBin: true + dependencies: + '@mapbox/jsonlint-lines-primitives': 2.0.2 + '@mapbox/unitbezier': 0.0.1 + json-stringify-pretty-compact: 3.0.0 + minimist: 1.2.8 + rw: 1.3.3 + sort-object: 3.0.3 + dev: false + /@math.gl/web-mercator@3.6.3: resolution: {integrity: sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==} dependencies: @@ -874,10 +869,6 @@ packages: /@types/geojson@7946.0.10: resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==} - /@types/hammerjs@2.0.41: - resolution: {integrity: sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==} - dev: false - /@types/mapbox-gl@2.7.13: resolution: {integrity: sha512-qNffhTdYkeFl8QG9Q1zPPJmcs8PvHgmLa1PcwP1rxvcfMsIgcFr/FnrCttG0ZnH7Kzdd7xfECSRNTWSr4jC3PQ==} dependencies: @@ -1061,6 +1052,11 @@ packages: /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + /arr-union@3.1.0: + resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==} + engines: {node: '>=0.10.0'} + dev: false + /array-buffer-byte-length@1.0.0: resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==} dependencies: @@ -1131,6 +1127,11 @@ packages: engines: {node: '>=0.10.0'} dev: false + /assign-symbols@1.0.0: + resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==} + engines: {node: '>=0.10.0'} + dev: false + /asynciterator.prototype@1.0.0: resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==} dependencies: @@ -1175,6 +1176,19 @@ packages: update-browserslist-db: 1.0.11(browserslist@4.21.10) dev: false + /bytewise-core@1.2.3: + resolution: {integrity: sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==} + dependencies: + typewise-core: 1.2.0 + dev: false + + /bytewise@1.1.0: + resolution: {integrity: sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==} + dependencies: + bytewise-core: 1.2.3 + typewise: 1.0.3 + dev: false + /call-bind@1.0.2: resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==} dependencies: @@ -1653,6 +1667,21 @@ packages: engines: {node: '>=0.10.0'} dev: true + /extend-shallow@2.0.1: + resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==} + engines: {node: '>=0.10.0'} + dependencies: + is-extendable: 0.1.1 + dev: false + + /extend-shallow@3.0.2: + resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==} + engines: {node: '>=0.10.0'} + dependencies: + assign-symbols: 1.0.0 + is-extendable: 1.0.1 + dev: false + /fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true @@ -1803,6 +1832,11 @@ packages: get-intrinsic: 1.2.1 dev: true + /get-value@2.0.6: + resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==} + engines: {node: '>=0.10.0'} + dev: false + /gl-matrix@3.4.3: resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==} dev: false @@ -1880,11 +1914,6 @@ packages: resolution: {integrity: sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==} dev: false - /hammerjs@2.0.8: - resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==} - engines: {node: '>=0.8.0'} - dev: false - /hard-rejection@2.1.0: resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==} engines: {node: '>=6'} @@ -2050,6 +2079,18 @@ packages: has-tostringtag: 1.0.0 dev: true + /is-extendable@0.1.1: + resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==} + engines: {node: '>=0.10.0'} + dev: false + + /is-extendable@1.0.1: + resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==} + engines: {node: '>=0.10.0'} + dependencies: + is-plain-object: 2.0.4 + dev: false + /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} @@ -2103,6 +2144,13 @@ packages: engines: {node: '>=0.10.0'} dev: false + /is-plain-object@2.0.4: + resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==} + engines: {node: '>=0.10.0'} + dependencies: + isobject: 3.0.1 + dev: false + /is-regex@1.1.4: resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==} engines: {node: '>= 0.4'} @@ -2167,6 +2215,11 @@ packages: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} dev: true + /isobject@3.0.1: + resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==} + engines: {node: '>=0.10.0'} + dev: false + /iterator.prototype@1.1.0: resolution: {integrity: sha512-rjuhAk1AJ1fssphHD0IFV6TWL40CwRZ53FrztKx43yk2v6rguBYsY4Bj1VU4HmoMmKwZUlx7mfnhDf9cOp4YTw==} dependencies: @@ -2208,6 +2261,10 @@ packages: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} dev: true + /json-stringify-pretty-compact@3.0.0: + resolution: {integrity: sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==} + dev: false + /json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} @@ -2224,10 +2281,6 @@ packages: object.values: 1.1.7 dev: true - /kdbush@3.0.0: - resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==} - dev: false - /kdbush@4.0.2: resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==} dev: false @@ -2302,34 +2355,6 @@ packages: engines: {node: '>=8'} dev: false - /mapbox-gl@1.13.3: - resolution: {integrity: sha512-p8lJFEiqmEQlyv+DQxFAOG/XPWN0Wp7j/Psq93Zywz7qt9CcUKFYDBOoOEKzqe6gudHVJY8/Bhqw6VDpX2lSBg==} - engines: {node: '>=6.4.0'} - dependencies: - '@mapbox/geojson-rewind': 0.5.2 - '@mapbox/geojson-types': 1.0.2 - '@mapbox/jsonlint-lines-primitives': 2.0.2 - '@mapbox/mapbox-gl-supported': 1.5.0(mapbox-gl@1.13.3) - '@mapbox/point-geometry': 0.1.0 - '@mapbox/tiny-sdf': 1.2.5 - '@mapbox/unitbezier': 0.0.0 - '@mapbox/vector-tile': 1.3.1 - '@mapbox/whoots-js': 3.1.0 - csscolorparser: 1.0.3 - earcut: 2.2.4 - geojson-vt: 3.2.1 - gl-matrix: 3.4.3 - grid-index: 1.1.0 - murmurhash-js: 1.0.0 - pbf: 3.2.1 - potpack: 1.0.2 - quickselect: 2.0.0 - rw: 1.3.3 - supercluster: 7.1.5 - tinyqueue: 2.0.3 - vt-pbf: 3.1.3 - dev: false - /mapbox-gl@2.15.0: resolution: {integrity: sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==} dependencies: @@ -2411,14 +2436,6 @@ packages: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: false - /mjolnir.js@2.7.1: - resolution: {integrity: sha512-72BeUWgTv2cj5aZQKpwL8caNUFhXZ9bDm1hxpNj70XJQ62IBnTZmtv/WPxJvtaVNhzNo+D2U8O6ryNI0zImYcw==} - engines: {node: '>= 4', npm: '>= 3'} - dependencies: - '@types/hammerjs': 2.0.41 - hammerjs: 2.0.8 - dev: false - /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} @@ -2624,10 +2641,6 @@ packages: source-map-js: 1.0.2 dev: false - /potpack@1.0.2: - resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==} - dev: false - /potpack@2.0.0: resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==} dev: false @@ -2711,21 +2724,24 @@ packages: /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - /react-map-gl@5.3.21(react@18.2.0): - resolution: {integrity: sha512-hNVYiPBjgfVIcDV70OU9QnzvNCI1NhLm5OHjyY1rKPOKqzV4m9jjuXEKUaWC72vqIHk1Dzb+gG78xWOpqVi6uw==} - engines: {node: '>= 4', npm: '>= 3'} + /react-map-gl@7.1.6(mapbox-gl@2.15.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-9XbrvpFF67Fyi+e6vRLJFnGpo3UF6ZHifIa8cS/wUYSsnv9sVyzGsN++FJy57zkz3Jh3kmf0xKZemR8K0FZLVw==} peerDependencies: + mapbox-gl: '>=1.13.0' + maplibre-gl: '>=1.13.0' react: '>=16.3.0' + react-dom: '>=16.3.0' + peerDependenciesMeta: + mapbox-gl: + optional: true + maplibre-gl: + optional: true dependencies: - '@babel/runtime': 7.22.11 - '@types/geojson': 7946.0.10 + '@maplibre/maplibre-gl-style-spec': 19.3.0 '@types/mapbox-gl': 2.7.13 - mapbox-gl: 1.13.3 - mjolnir.js: 2.7.1 - prop-types: 15.8.1 + mapbox-gl: 2.15.0 react: 18.2.0 - resize-observer-polyfill: 1.5.1 - viewport-mercator-project: 7.0.4 + react-dom: 18.2.0(react@18.2.0) dev: false /react-refresh@0.14.0: @@ -2822,10 +2838,6 @@ packages: functions-have-names: 1.2.3 dev: true - /resize-observer-polyfill@1.5.1: - resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} - dev: false - /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -2939,6 +2951,16 @@ packages: lru-cache: 6.0.0 dev: true + /set-value@2.0.1: + resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==} + engines: {node: '>=0.10.0'} + dependencies: + extend-shallow: 2.0.1 + is-extendable: 0.1.1 + is-plain-object: 2.0.4 + split-string: 3.1.0 + dev: false + /shallowequal@1.1.0: resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} dev: false @@ -2968,6 +2990,28 @@ packages: engines: {node: '>=8'} dev: true + /sort-asc@0.2.0: + resolution: {integrity: sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==} + engines: {node: '>=0.10.0'} + dev: false + + /sort-desc@0.2.0: + resolution: {integrity: sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==} + engines: {node: '>=0.10.0'} + dev: false + + /sort-object@3.0.3: + resolution: {integrity: sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==} + engines: {node: '>=0.10.0'} + dependencies: + bytewise: 1.1.0 + get-value: 2.0.6 + is-extendable: 0.1.1 + sort-asc: 0.2.0 + sort-desc: 0.2.0 + union-value: 1.0.1 + dev: false + /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} @@ -2995,6 +3039,13 @@ packages: resolution: {integrity: sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==} dev: false + /split-string@3.1.0: + resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==} + engines: {node: '>=0.10.0'} + dependencies: + extend-shallow: 3.0.2 + dev: false + /string.prototype.matchall@4.0.9: resolution: {integrity: sha512-6i5hL3MqG/K2G43mWXWgP+qizFW/QH/7kCNN13JrJS5q48FN5IKksLDscexKP3dnmB6cdm9jlNgAsWNLpSykmA==} dependencies: @@ -3052,12 +3103,6 @@ packages: engines: {node: '>=8'} dev: true - /supercluster@7.1.5: - resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==} - dependencies: - kdbush: 3.0.0 - dev: false - /supercluster@8.0.1: resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==} dependencies: @@ -3215,6 +3260,16 @@ packages: engines: {node: '>=14.17'} hasBin: true + /typewise-core@1.2.0: + resolution: {integrity: sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg==} + dev: false + + /typewise@1.0.3: + resolution: {integrity: sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==} + dependencies: + typewise-core: 1.2.0 + dev: false + /unbox-primitive@1.0.2: resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} dependencies: @@ -3224,6 +3279,16 @@ packages: which-boxed-primitive: 1.0.2 dev: true + /union-value@1.0.1: + resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==} + engines: {node: '>=0.10.0'} + dependencies: + arr-union: 3.1.0 + get-value: 2.0.6 + is-extendable: 0.1.1 + set-value: 2.0.1 + dev: false + /update-browserslist-db@1.0.11(browserslist@4.21.10): resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==} hasBin: true diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index fed9929e7f6..e160474f64a 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -16,7 +16,7 @@ const Layout = ({ children }: React.PropsWithChildren) => { diff --git a/src/components/RunMap/RunMaker.tsx b/src/components/RunMap/RunMaker.tsx index 22ab9736dff..d57bf8f3cd8 100644 --- a/src/components/RunMap/RunMaker.tsx +++ b/src/components/RunMap/RunMaker.tsx @@ -11,11 +11,21 @@ interface IRunMarkerProperties { endLat: number; } -const RunMarker = ({ startLon, startLat, endLon, endLat }: IRunMarkerProperties) => { - const size = 20; +const RunMarker = ({ + startLon, + startLat, + endLon, + endLat, +}: IRunMarkerProperties) => { + const size = 5; return ( <> - +
void; + viewState: IViewState; + setViewState: (_viewState: IViewState) => void; changeYear: (_year: string) => void; geoData: FeatureCollection; thisYear: string; @@ -36,8 +32,8 @@ interface IRunMapProps { const RunMap = ({ title, - viewport, - setViewport, + viewState, + setViewState, changeYear, geoData, thisYear, @@ -68,7 +64,7 @@ const RunMap = ({ // for geojson format filterProvinces.unshift('in', 'name'); - const isBigMap = (viewport.zoom ?? 0) <= 3; + const isBigMap = (viewState.zoom ?? 0) <= 3; if (isBigMap && IS_CHINESE) { geoData = geoJsonForMap(); } @@ -86,19 +82,33 @@ const RunMap = ({ [endLon, endLat] = points[points.length - 1]; } let dash = USE_DASH_LINE && !isSingleRun ? [2, 2] : [2, 0]; + const onMove = React.useCallback(({ viewState }) => { + setViewState(viewState); + }, []); + const style: React.CSSProperties = { + width: '100%', + height: MAP_HEIGHT, + '& .mapboxgl-children': { + display: 'none', + }, + }; + const fullscreenButton: React.CSSProperties = { + position: 'absolute', + marginTop: '29.2px', + right: '10px', + opacity: 0.3, + }; return ( - - )} {title} - + + ); }; diff --git a/src/components/RunMap/mapbox.css b/src/components/RunMap/mapbox.css new file mode 100644 index 00000000000..482a5b301f0 --- /dev/null +++ b/src/components/RunMap/mapbox.css @@ -0,0 +1,666 @@ +/* .mapboxgl-control-container { */ +/* display: none; */ +/* } */ +.mapboxgl-map { + font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif; + overflow: hidden; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.mapboxgl-canvas { + position: absolute; + left: 0; + top: 0; +} +.mapboxgl-map:-webkit-full-screen { + width: 100%; + height: 100%; +} +.mapboxgl-canary { + background-color: salmon; +} +.mapboxgl-canvas-container.mapboxgl-interactive, +.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass { + cursor: grab; + -webkit-user-select: none; + user-select: none; +} +.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer { + cursor: pointer; +} +.mapboxgl-canvas-container.mapboxgl-interactive:active, +.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active { + cursor: grabbing; +} +.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate, +.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas { + touch-action: pan-x pan-y; +} +.mapboxgl-canvas-container.mapboxgl-touch-drag-pan, +.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas { + touch-action: pinch-zoom; +} +.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, +.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan + .mapboxgl-canvas { + touch-action: none; +} +.mapboxgl-ctrl-bottom-left, +.mapboxgl-ctrl-bottom-right, +.mapboxgl-ctrl-top-left, +.mapboxgl-ctrl-top-right { + position: absolute; + pointer-events: none; + z-index: 2; +} +.mapboxgl-ctrl-top-left { + top: 0; + left: 0; +} +.mapboxgl-ctrl-top-right { + top: 0; + right: 0; +} +.mapboxgl-ctrl-bottom-left { + bottom: 0; + left: 0; +} +.mapboxgl-ctrl-bottom-right { + right: 0; + bottom: 0; +} +.mapboxgl-ctrl { + clear: both; + pointer-events: auto; + transform: translate(0); +} +.mapboxgl-ctrl-top-left .mapboxgl-ctrl { + margin: 10px 0 0 10px; + float: left; +} +.mapboxgl-ctrl-top-right .mapboxgl-ctrl { + margin: 10px 10px 0 0; + float: right; +} +.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { + margin: 0 0 10px 10px; + float: left; +} +.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { + margin: 0 10px 10px 0; + float: right; +} +.mapboxgl-ctrl-group { + border-radius: 4px; + background: #fff; +} +.mapboxgl-ctrl-group:not(:empty) { + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); +} +@media (-ms-high-contrast: active) { + .mapboxgl-ctrl-group:not(:empty) { + box-shadow: 0 0 0 2px ButtonText; + } +} +.mapboxgl-ctrl-group button { + width: 29px; + height: 29px; + display: block; + padding: 0; + outline: none; + border: 0; + box-sizing: border-box; + background-color: transparent; + cursor: pointer; + overflow: hidden; +} +.mapboxgl-ctrl-group button + button { + border-top: 1px solid #ddd; +} +.mapboxgl-ctrl button .mapboxgl-ctrl-icon { + display: block; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-position: 50%; +} +@media (-ms-high-contrast: active) { + .mapboxgl-ctrl-icon { + background-color: transparent; + } + .mapboxgl-ctrl-group button + button { + border-top: 1px solid ButtonText; + } +} +.mapboxgl-ctrl-attrib-button:focus, +.mapboxgl-ctrl-group button:focus { + box-shadow: 0 0 2px 2px #0096ff; +} +.mapboxgl-ctrl button:disabled { + cursor: not-allowed; +} +.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon { + opacity: 0.25; +} +.mapboxgl-ctrl button:not(:disabled):hover { + background-color: rgba(0, 0, 0, 0.05); +} +.mapboxgl-ctrl-group button:focus:focus-visible { + box-shadow: 0 0 2px 2px #0096ff; +} +.mapboxgl-ctrl-group button:focus:not(:focus-visible) { + box-shadow: none; +} +.mapboxgl-ctrl-group button:focus:first-child { + border-radius: 4px 4px 0 0; +} +.mapboxgl-ctrl-group button:focus:last-child { + border-radius: 0 0 4px 4px; +} +.mapboxgl-ctrl-group button:focus:only-child { + border-radius: inherit; +} +.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E"); +} +@media (-ms-high-contrast: active) { + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E"); + } +} +@media (-ms-high-contrast: black-on-white) { + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E"); + } +} +.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E"); +} +@media (-ms-high-contrast: active) { + .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E"); + } +} +@media (-ms-high-contrast: black-on-white) { + .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E"); + } +} +.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E"); +} +@media (-ms-high-contrast: active) { + .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E"); + } +} +@media (-ms-high-contrast: black-on-white) { + .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E"); + } +} +.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); +} +.mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting + .mapboxgl-ctrl-icon { + animation: mapboxgl-spin 2s linear infinite; +} +@media (-ms-high-contrast: active) { + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl + button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error + .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); + } +} +@media (-ms-high-contrast: black-on-white) { + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E"); + } + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E"); + } +} +@keyframes mapboxgl-spin { + 0% { + transform: rotate(0deg); + } + to { + transform: rotate(1turn); + } +} +a.mapboxgl-ctrl-logo { + width: 88px; + height: 23px; + margin: 0 0 -4px -4px; + display: block; + background-repeat: no-repeat; + cursor: pointer; + overflow: hidden; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E"); +} +a.mapboxgl-ctrl-logo.mapboxgl-compact { + width: 23px; +} +@media (-ms-high-contrast: active) { + a.mapboxgl-ctrl-logo { + background-color: transparent; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E"); + } +} +@media (-ms-high-contrast: black-on-white) { + a.mapboxgl-ctrl-logo { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E"); + } +} +.mapboxgl-ctrl.mapboxgl-ctrl-attrib { + padding: 0 5px; + background-color: hsla(0, 0%, 100%, 0.5); + margin: 0; +} +@media screen { + .mapboxgl-ctrl-attrib.mapboxgl-compact { + min-height: 20px; + padding: 2px 24px 2px 0; + margin: 10px; + position: relative; + background-color: #fff; + border-radius: 12px; + } + .mapboxgl-ctrl-attrib.mapboxgl-compact-show { + padding: 2px 28px 2px 8px; + visibility: visible; + } + .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show, + .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show { + padding: 2px 8px 2px 28px; + border-radius: 12px; + } + .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner { + display: none; + } + .mapboxgl-ctrl-attrib-button { + display: none; + cursor: pointer; + position: absolute; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E"); + background-color: hsla(0, 0%, 100%, 0.5); + width: 24px; + height: 24px; + box-sizing: border-box; + border-radius: 12px; + outline: none; + top: 0; + right: 0; + border: 0; + } + .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button, + .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button { + left: 0; + } + .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner, + .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button { + display: block; + } + .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button { + background-color: rgba(0, 0, 0, 0.05); + } + .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { + bottom: 0; + right: 0; + } + .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { + top: 0; + right: 0; + } + .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { + top: 0; + left: 0; + } + .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after { + bottom: 0; + left: 0; + } +} +@media screen and (-ms-high-contrast: active) { + .mapboxgl-ctrl-attrib.mapboxgl-compact:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E"); + } +} +@media screen and (-ms-high-contrast: black-on-white) { + .mapboxgl-ctrl-attrib.mapboxgl-compact:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E"); + } +} +.mapboxgl-ctrl-attrib a { + color: rgba(0, 0, 0, 0.75); + text-decoration: none; +} +.mapboxgl-ctrl-attrib a:hover { + color: inherit; + text-decoration: underline; +} +.mapboxgl-ctrl-attrib .mapbox-improve-map { + font-weight: 700; + margin-left: 2px; +} +.mapboxgl-attrib-empty { + display: none; +} +.mapboxgl-ctrl-scale { + background-color: hsla(0, 0%, 100%, 0.75); + font-size: 10px; + border: 2px solid #333; + border-top: #333; + padding: 0 5px; + color: #333; + box-sizing: border-box; +} +.mapboxgl-popup { + position: absolute; + top: 0; + left: 0; + display: flex; + will-change: transform; + pointer-events: none; +} +.mapboxgl-popup-anchor-top, +.mapboxgl-popup-anchor-top-left, +.mapboxgl-popup-anchor-top-right { + flex-direction: column; +} +.mapboxgl-popup-anchor-bottom, +.mapboxgl-popup-anchor-bottom-left, +.mapboxgl-popup-anchor-bottom-right { + flex-direction: column-reverse; +} +.mapboxgl-popup-anchor-left { + flex-direction: row; +} +.mapboxgl-popup-anchor-right { + flex-direction: row-reverse; +} +.mapboxgl-popup-tip { + width: 0; + height: 0; + border: 10px solid transparent; + z-index: 1; +} +.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { + align-self: center; + border-top: none; + border-bottom-color: #fff; +} +.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip { + align-self: flex-start; + border-top: none; + border-left: none; + border-bottom-color: #fff; +} +.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { + align-self: flex-end; + border-top: none; + border-right: none; + border-bottom-color: #fff; +} +.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { + align-self: center; + border-bottom: none; + border-top-color: #fff; +} +.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip { + align-self: flex-start; + border-bottom: none; + border-left: none; + border-top-color: #fff; +} +.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { + align-self: flex-end; + border-bottom: none; + border-right: none; + border-top-color: #fff; +} +.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { + align-self: center; + border-left: none; + border-right-color: #fff; +} +.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { + align-self: center; + border-right: none; + border-left-color: #fff; +} +.mapboxgl-popup-close-button { + position: absolute; + right: 0; + top: 0; + border: 0; + border-radius: 0 3px 0 0; + cursor: pointer; + background-color: transparent; +} +.mapboxgl-popup-close-button:hover { + background-color: rgba(0, 0, 0, 0.05); +} +.mapboxgl-popup-content { + position: relative; + background: #fff; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + padding: 10px 10px 15px; + pointer-events: auto; +} +.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content { + border-top-left-radius: 0; +} +.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content { + border-top-right-radius: 0; +} +.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content { + border-bottom-left-radius: 0; +} +.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content { + border-bottom-right-radius: 0; +} +.mapboxgl-popup-track-pointer { + display: none; +} +.mapboxgl-popup-track-pointer * { + pointer-events: none; + user-select: none; +} +.mapboxgl-map:hover .mapboxgl-popup-track-pointer { + display: flex; +} +.mapboxgl-map:active .mapboxgl-popup-track-pointer { + display: none; +} +.mapboxgl-marker { + position: absolute; + top: 0; + left: 0; + will-change: transform; + opacity: 1; + transition: opacity 0.2s; +} +.mapboxgl-user-location-dot, +.mapboxgl-user-location-dot:before { + background-color: #1da1f2; + width: 15px; + height: 15px; + border-radius: 50%; +} +.mapboxgl-user-location-dot:before { + content: ''; + position: absolute; + animation: mapboxgl-user-location-dot-pulse 2s infinite; +} +.mapboxgl-user-location-dot:after { + border-radius: 50%; + border: 2px solid #fff; + content: ''; + height: 19px; + left: -2px; + position: absolute; + top: -2px; + width: 19px; + box-sizing: border-box; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.35); +} +.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading { + width: 0; + height: 0; +} +.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after, +.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before { + content: ''; + border-bottom: 7.5px solid #4aa1eb; + position: absolute; +} +.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before { + border-left: 7.5px solid transparent; + transform: translateY(-28px) skewY(-20deg); +} +.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after { + border-right: 7.5px solid transparent; + transform: translate(7.5px, -28px) skewY(20deg); +} +@keyframes mapboxgl-user-location-dot-pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 70% { + transform: scale(3); + opacity: 0; + } + to { + transform: scale(1); + opacity: 0; + } +} +.mapboxgl-user-location-dot-stale { + background-color: #aaa; +} +.mapboxgl-user-location-dot-stale:after { + display: none; +} +.mapboxgl-user-location-accuracy-circle { + background-color: rgba(29, 161, 242, 0.2); + width: 1px; + height: 1px; + border-radius: 100%; +} +.mapboxgl-crosshair, +.mapboxgl-crosshair .mapboxgl-interactive, +.mapboxgl-crosshair .mapboxgl-interactive:active { + cursor: crosshair; +} +.mapboxgl-boxzoom { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + background: #fff; + border: 2px dotted #202020; + opacity: 0.5; +} +@media print { + .mapbox-improve-map { + display: none; + } +} +.mapboxgl-scroll-zoom-blocker, +.mapboxgl-touch-pan-blocker { + color: #fff; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, + sans-serif; + justify-content: center; + text-align: center; + position: absolute; + display: flex; + align-items: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + opacity: 0; + pointer-events: none; + transition: opacity 0.75s ease-in-out; + transition-delay: 1s; +} +.mapboxgl-scroll-zoom-blocker-show, +.mapboxgl-touch-pan-blocker-show { + opacity: 1; + transition: opacity 0.1s ease-in-out; +} +.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page, +.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page + .mapboxgl-canvas { + touch-action: pan-x pan-y; +} diff --git a/src/components/RunMap/style.module.scss b/src/components/RunMap/style.module.scss index 0618e0109b3..c2cc83c7f82 100644 --- a/src/components/RunMap/style.module.scss +++ b/src/components/RunMap/style.module.scss @@ -9,6 +9,9 @@ } .buttons { + position: absolute; + top: 10px; + left: 10px; margin: 0 auto; padding-right: 70px; } @@ -29,15 +32,6 @@ color: $nike; } -.fullscreenButton { - display: inline-block; - position: absolute; - top: 0rem; - right: 0rem; - opacity: 0.3; - padding: 0.8rem; -} - .runTitle { height: 29px; width: 710px; diff --git a/src/components/RunTable/index.tsx b/src/components/RunTable/index.tsx index eee99356b67..64b2b7910a6 100644 --- a/src/components/RunTable/index.tsx +++ b/src/components/RunTable/index.tsx @@ -37,7 +37,7 @@ const RunTable = ({ return sortFuncInfo === 'BPM' ? a.average_heartrate ?? 0 - (b.average_heartrate ?? 0) : b.average_heartrate ?? 0 - (a.average_heartrate ?? 0); - } + }; const sortRunTimeFunc: SortFunc = (a, b) => { const aTotalSeconds = convertMovingTime2Sec(a.moving_time); const bTotalSeconds = convertMovingTime2Sec(b.moving_time); @@ -59,7 +59,7 @@ const RunTable = ({ const funcName = (e.target as HTMLElement).innerHTML; const f = sortFuncMap.get(funcName); - setRunIndex(-1) + setRunIndex(-1); setSortFuncInfo(sortFuncInfo === funcName ? '' : funcName); setActivity(runs.sort(f)); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2045d6b03cf..38d2e56c0db 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,7 +11,7 @@ import useSiteMetadata from '@/hooks/useSiteMetadata'; import { IS_CHINESE } from '@/utils/const'; import { Activity, - IViewport, + IViewState, filterAndSortRuns, filterCityRuns, filterTitleRuns, @@ -37,7 +37,7 @@ const Index = () => { const bounds = getBoundsForGeoData(geoData); const [intervalId, setIntervalId] = useState(); - const [viewport, setViewport] = useState({ + const [viewState, setViewState] = useState({ ...bounds, }); @@ -56,8 +56,8 @@ const Index = () => { // default year setYear(y); - if ((viewport.zoom ?? 0) > 3) { - setViewport({ + if ((viewState.zoom ?? 0) > 3) { + setViewState({ ...bounds, }); } @@ -99,7 +99,7 @@ const Index = () => { }; useEffect(() => { - setViewport({ + setViewState({ ...bounds, }); }, [geoData]); @@ -157,7 +157,7 @@ const Index = () => {

{siteTitle}

- {(viewport.zoom ?? 0) <= 3 && IS_CHINESE ? ( + {(viewState.zoom ?? 0) <= 3 && IS_CHINESE ? ( {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 7de9c247e39..be88ef09385 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,6 +1,6 @@ import * as mapboxPolyline from '@mapbox/polyline'; import gcoord from 'gcoord'; -import { WebMercatorViewport } from 'react-map-gl'; +import { WebMercatorViewport } from 'viewport-mercator-project'; import { chinaGeojson } from '@/static/run_countries'; import { chinaCities } from '@/static/city'; import { MUNICIPALITY_CITIES_ARR, NEED_FIX_MAP, RUN_TITLES } from './const'; @@ -200,7 +200,7 @@ const titleForRun = (run: Activity): string => { return RUN_TITLES.NIGHT_RUN_TITLE; }; -export interface IViewport { +export interface IViewState { longitude?: number; latitude?: number; zoom?: number; @@ -208,7 +208,7 @@ export interface IViewport { const getBoundsForGeoData = ( geoData: FeatureCollection -): IViewport => { +): IViewState => { const { features } = geoData; let points: Coordinate[] = []; // find first have data @@ -228,11 +228,11 @@ const getBoundsForGeoData = ( [Math.min(...pointsLong), Math.min(...pointsLat)], [Math.max(...pointsLong), Math.max(...pointsLat)], ]; - const viewport = new WebMercatorViewport({ + const viewState = new WebMercatorViewport({ width: 800, height: 600, }).fitBounds(cornersLongLat, { padding: 200 }); - let { longitude, latitude, zoom } = viewport; + let { longitude, latitude, zoom } = viewState; if (features.length > 1) { zoom = 11.5; }