From 42d66ecfa52b5ea9d205d8c456d3fb207093aab4 Mon Sep 17 00:00:00 2001 From: evlist Date: Mon, 28 Nov 2022 19:33:02 +0100 Subject: [PATCH] (Re)Implementing the map chooser. --- package-lock.json | 91 ++++++++----------- package.json | 1 + .../back-forward/BackForward.module.css | 3 +- .../get-location/GetLocation.module.css | 3 +- .../gpx-import/GpxImport.module.css | 5 +- src/components/gpx/styles.ts | 7 +- .../MapTileProvider.module.css | 26 ++++++ .../map-tile-provider/MapTileProvider.tsx | 68 +++++++++++++- src/components/map/Map.tsx | 72 +++++---------- src/icons/location-pin-svgrepo-com-red.svg | 14 +++ vite.config.ts | 3 +- 11 files changed, 180 insertions(+), 113 deletions(-) create mode 100644 src/components/map-tile-provider/MapTileProvider.module.css create mode 100644 src/icons/location-pin-svgrepo-com-red.svg diff --git a/package-lock.json b/package-lock.json index 71e5fd5..0917392 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@solidjs/router": "^0.5.1", "@suid/icons-material": "^0.5.1", "@suid/material": "^0.8.0", + "@suid/vite-plugin": "^0.1.0", "isomorphic-xml2js": "^0.1.3", "lodash": "^4.17.21", "ol": "^7.1.0", @@ -85,7 +86,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", - "dev": true, "dependencies": { "@babel/highlight": "^7.18.6" }, @@ -145,7 +145,6 @@ "version": "7.20.4", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.4.tgz", "integrity": "sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==", - "dev": true, "dependencies": { "@babel/types": "^7.20.2", "@jridgewell/gen-mapping": "^0.3.2", @@ -159,7 +158,6 @@ "version": "0.3.2", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", - "dev": true, "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -233,7 +231,6 @@ "version": "7.18.9", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -242,7 +239,6 @@ "version": "7.19.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", - "dev": true, "dependencies": { "@babel/template": "^7.18.10", "@babel/types": "^7.19.0" @@ -255,7 +251,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -359,7 +354,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -371,7 +365,6 @@ "version": "7.19.4", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -380,7 +373,6 @@ "version": "7.19.1", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -412,7 +404,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.18.6", "chalk": "^2.0.0", @@ -426,7 +417,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -438,7 +428,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -452,7 +441,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -460,14 +448,12 @@ "node_modules/@babel/highlight/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/@babel/highlight/node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -476,7 +462,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -485,7 +470,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -497,7 +481,6 @@ "version": "7.20.3", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.3.tgz", "integrity": "sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==", - "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -585,7 +568,6 @@ "version": "7.18.10", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.18.6", "@babel/parser": "^7.18.10", @@ -599,7 +581,6 @@ "version": "7.20.1", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.1.tgz", "integrity": "sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.18.6", "@babel/generator": "^7.20.1", @@ -620,7 +601,6 @@ "version": "7.20.2", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.2.tgz", "integrity": "sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==", - "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.19.4", "@babel/helper-validator-identifier": "^7.19.1", @@ -944,7 +924,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", - "dev": true, "engines": { "node": ">=6.0.0" } @@ -953,7 +932,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", - "dev": true, "engines": { "node": ">=6.0.0" } @@ -961,14 +939,12 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", - "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", - "dev": true + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.17", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", - "dev": true, "dependencies": { "@jridgewell/resolve-uri": "3.1.0", "@jridgewell/sourcemap-codec": "1.4.14" @@ -1139,6 +1115,22 @@ "solid-js": "^1.6.2" } }, + "node_modules/@suid/vite-plugin": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@suid/vite-plugin/-/vite-plugin-0.1.0.tgz", + "integrity": "sha512-XlLxKxosM3PFsvj8DASPEymbgcAtAMYQUGkZDxwh14cs4GIwsvgLrK8Fz45xoTcaM7n898nZUcmc6RfxrYsHhw==", + "dependencies": { + "@babel/generator": "^7.19.6", + "@babel/parser": "^7.19.6", + "@babel/traverse": "^7.19.6", + "@babel/types": "^7.19.4", + "@types/babel__generator": "^7.6.4", + "@types/babel__traverse": "^7.18.2" + }, + "peerDependencies": { + "vite": "^3.0.0" + } + }, "node_modules/@testing-library/dom": { "version": "8.19.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz", @@ -1243,6 +1235,22 @@ "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==", "dev": true }, + "node_modules/@types/babel__generator": { + "version": "7.6.4", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz", + "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.2.tgz", + "integrity": "sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==", + "dependencies": { + "@babel/types": "^7.3.0" + } + }, "node_modules/@types/chai": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz", @@ -1894,7 +1902,6 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -2656,7 +2663,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2669,8 +2675,7 @@ "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "node_modules/functions-have-names": { "version": "1.2.3", @@ -2735,7 +2740,6 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, "engines": { "node": ">=4" } @@ -2762,7 +2766,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "dependencies": { "function-bind": "^1.1.1" }, @@ -2991,7 +2994,6 @@ "version": "2.11.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", - "dev": true, "dependencies": { "has": "^1.0.3" }, @@ -3361,8 +3363,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/jsdom": { "version": "20.0.3", @@ -3413,7 +3414,6 @@ "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true, "bin": { "jsesc": "bin/jsesc" }, @@ -3778,14 +3778,12 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", - "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -4027,8 +4025,7 @@ "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "node_modules/pathval": { "version": "1.1.1", @@ -4060,8 +4057,7 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -4092,7 +4088,6 @@ "version": "8.4.19", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", - "dev": true, "funding": [ { "type": "opencollective", @@ -4474,7 +4469,6 @@ "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", - "dev": true, "dependencies": { "is-core-module": "^2.9.0", "path-parse": "^1.0.7", @@ -4499,7 +4493,6 @@ "version": "2.79.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", - "dev": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -4759,7 +4752,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -4869,7 +4861,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -4937,7 +4928,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, "engines": { "node": ">=4" } @@ -5106,7 +5096,6 @@ "version": "3.2.4", "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.4.tgz", "integrity": "sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==", - "dev": true, "dependencies": { "esbuild": "^0.15.9", "postcss": "^8.4.18", diff --git a/package.json b/package.json index 62c3178..be198cc 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@solidjs/router": "^0.5.1", "@suid/icons-material": "^0.5.1", "@suid/material": "^0.8.0", + "@suid/vite-plugin": "^0.1.0", "isomorphic-xml2js": "^0.1.3", "lodash": "^4.17.21", "ol": "^7.1.0", diff --git a/src/components/back-forward/BackForward.module.css b/src/components/back-forward/BackForward.module.css index 1df966c..641c021 100644 --- a/src/components/back-forward/BackForward.module.css +++ b/src/components/back-forward/BackForward.module.css @@ -1,6 +1,5 @@ .common { - --opacity: 0.6; - --ion-background-color: white; + opacity: 1; position: fixed !important; top: 6px; z-index: 1; diff --git a/src/components/get-location/GetLocation.module.css b/src/components/get-location/GetLocation.module.css index 3c7c93a..5c89e9a 100644 --- a/src/components/get-location/GetLocation.module.css +++ b/src/components/get-location/GetLocation.module.css @@ -1,6 +1,5 @@ .getLocation { - --opacity: 0.6; - --ion-background-color: white; + opacity: 1; margin-left: calc(50% - 20px) !important; position: fixed !important; z-index: 1; diff --git a/src/components/gpx-import/GpxImport.module.css b/src/components/gpx-import/GpxImport.module.css index a391397..4e1d289 100644 --- a/src/components/gpx-import/GpxImport.module.css +++ b/src/components/gpx-import/GpxImport.module.css @@ -1,12 +1,11 @@ .container { position: fixed !important; top: 6px; - margin-left: calc(100% - 80px) !important; + margin-left: calc(100% - 100px) !important; z-index: 1; } .label { - --opacity: 0.6; - --ion-background-color: white; + opacity: 0.8; } .inputFile { diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index e72515a..9bb5889 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -1,12 +1,13 @@ import { Circle, Fill, Text, Icon, Stroke, Style } from 'ol/style'; import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg'; import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg'; -import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg'; +import wptIcon from '../../icons/location-pin-svgrepo-com-red.svg'; import { Feature } from 'ol'; const trackStrokeStyle = new Stroke({ color: 'blue', - width: 2, + width: 3, + }); const trtksegStartImageStyle = new Icon({ @@ -26,7 +27,7 @@ const trtksegFinishImageStyle = new Icon({ const wptImageStyle = new Icon({ src: wptIcon, scale: 0.1, - opacity: 0.8, + opacity: 0.9, anchor: [0.5, 1], }); diff --git a/src/components/map-tile-provider/MapTileProvider.module.css b/src/components/map-tile-provider/MapTileProvider.module.css new file mode 100644 index 0000000..41b200c --- /dev/null +++ b/src/components/map-tile-provider/MapTileProvider.module.css @@ -0,0 +1,26 @@ +.control { + opacity: 1; + position: fixed !important; + top: 0px; + margin-left: calc(100% - 70px) !important; + z-index: 1; +} + +.title { + background-color: rgba(14, 116, 144, 0.7); + color: white; + clear: both; +} + +.title-text { + float: left; +} + +.close { + float: right; +} + +.body { + padding: 20px; + background-color: rgba(255, 255, 255, 0.7); +} diff --git a/src/components/map-tile-provider/MapTileProvider.tsx b/src/components/map-tile-provider/MapTileProvider.tsx index 6c9f10f..4a1db29 100644 --- a/src/components/map-tile-provider/MapTileProvider.tsx +++ b/src/components/map-tile-provider/MapTileProvider.tsx @@ -1,6 +1,19 @@ import OSM from 'ol/source/OSM'; import XYZ from 'ol/source/XYZ'; -import { Component } from 'solid-js'; +import { Component, createSignal, For } from 'solid-js'; + +import style from './MapTileProvider.module.css'; +import LayersIcon from '@suid/icons-material/Layers'; +import CloseIcon from '@suid/icons-material/Close'; +import { + Dialog, + DialogTitle, + FormControlLabel, + IconButton, + Radio, + RadioGroup, +} from '@suid/material'; +import { useNavigate, useParams } from '@solidjs/router'; interface TileProvider { name: string; @@ -58,7 +71,58 @@ export const mapTileProviders: TileProviders = { }; const MapTilesProvider: Component<{}> = (props) => { - return
; + const [open, setOpen] = createSignal(false); + + const navigate = useNavigate(); + + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + }; + + const params = useParams(); + + const handleChange = (ev: any) => { + navigate( + `/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}` + ); + setOpen(false); + }; + + return ( + <> +
+ + + +
+ + +
Choose your map
+ + + + + + + {(p: string) => ( + } + label={mapTileProviders[p].name} + /> + )} + + + + + ); }; export default MapTilesProvider; diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 6e6346e..ad6f4fc 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -23,7 +23,7 @@ import ShowLocationIcon from '../get-location/ShowLocationIcon.svg'; import { Back, Forward } from '../back-forward'; import GpxImport from '../gpx-import'; import AllGpxes from '../all-gpxes'; -import { mapTileProviders } from '../map-tile-provider'; +import MapTileProvider, { mapTileProviders } from '../map-tile-provider'; const [getState, setState] = createSignal({ lon: 0, @@ -44,14 +44,10 @@ const Map: Component = () => { createEffect(() => { console.log({ - caller: 'Map', - params: JSON.stringify({ - provider: params.provider, - lon: params.lon, - lat: params.lat, - rotation: params.rotation, - zoom: params.zoom, - }), + caller: 'Map / setState', + params: { + ...params, + }, }); setState({ provider: params.provider, @@ -61,6 +57,14 @@ const Map: Component = () => { zoom: +params.zoom, }); const map = getMap(); + + const layers = map?.getLayers(); + const tileLayer = layers?.item(0) as TileLayer | undefined; + if (tileLayer?.get('provider') !== params.provider) { + tileLayer?.set('provider', params.provider, true); + tileLayer?.setSource(mapTileProviders[params.provider].source); + } + const view = map?.getView(); view?.animate({ center: [getState().lon, getState().lat], @@ -128,61 +132,30 @@ const Map: Component = () => { console.log({ caller: 'Map / changeListener', event, - params, + params: { + ...params, + }, map, }); }; + const tileLayer = new TileLayer({ + source: mapTileProviders[params.provider].source, + }); + tileLayer.set('provider', params.provider, true); + const olMap = new OlMap({ view: new View({ center: [+getState().lon, +getState().lat], zoom: +getState().zoom, rotation: +getState().rotation, }), - layers: [ - new TileLayer({ - source: mapTileProviders[params.provider].source, - }), - new VectorLayer({ source: new VectorSource() }), - ], + layers: [tileLayer, new VectorLayer({ source: new VectorSource() })], target: target, controls: new Collection([ new Attribution({ collapsible: true }), new Rotate(), new ScaleLine({ bar: true }), - // // @ts-ignore - // new Control({ - // // @ts-ignore - // element: ( - //
- // - //
- // ), - // }), - // new Control({ - // // @ts-ignore - // element: ( - //
- // - //
- // ), - // }), - // new Control({ - // // @ts-ignore - // element: ( - //
- // - //
- // ), - // }), - // new Control({ - // // @ts-ignore - // element: ( - //
- // - //
- // ), - // }), ]), }); olMap.on(['moveend'], changeListener); @@ -197,6 +170,7 @@ const Map: Component = () => { + ); diff --git a/src/icons/location-pin-svgrepo-com-red.svg b/src/icons/location-pin-svgrepo-com-red.svg new file mode 100644 index 0000000..7fe5d42 --- /dev/null +++ b/src/icons/location-pin-svgrepo-com-red.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/vite.config.ts b/vite.config.ts index 0ddd9e3..4d8bb51 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,7 @@ import { defineConfig } from 'vite'; import solidPlugin from 'vite-plugin-solid'; +import suidPlugin from "@suid/vite-plugin"; // yarn add --dev @esbuild-plugins/node-globals-polyfill import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'; @@ -12,7 +13,7 @@ import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfil import rollupNodePolyFill from 'rollup-plugin-node-polyfills'; export default defineConfig(({ command, mode, ssrBuild }) => ({ - plugins: [solidPlugin()], + plugins: [suidPlugin(), solidPlugin()], test: { environment: 'jsdom', globals: true,