(Re)Implementing the map chooser.

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==",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-      "dev": true
     },
     "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",

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",

src/components/back-forward/BackForward.module.css

@@ -1,6 +1,5 @@
 .common {
-  --opacity: 0.6;
+  opacity: 1;
-  --ion-background-color: white;
   position: fixed !important;
   top: 6px;
   z-index: 1;

src/components/get-location/GetLocation.module.css

@@ -1,6 +1,5 @@
 .getLocation {
-  --opacity: 0.6;
+  opacity: 1;
-  --ion-background-color: white;
   margin-left: calc(50% - 20px) !important;
   position: fixed !important;
   z-index: 1;

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;
+  opacity: 0.8;
-  --ion-background-color: white;
 }
 
 .inputFile {

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],
 });
 

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);
+}

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 <div></div>;
+  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 (
+    <>
+      <div class={style.control}>
+        <IconButton onClick={handleClickOpen}>
+          <LayersIcon />
+        </IconButton>
+      </div>
+      <Dialog onClose={handleClose} open={open()} class={style.dialog}>
+        <DialogTitle class={style.title}>
+          <div class={style['title-text']}>Choose your map</div>
+          <IconButton onClick={handleClose} class={style.close}>
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <RadioGroup
+          defaultValue={params.provider}
+          class={style.body}
+          onChange={handleChange}
+        >
+          <For each={Object.keys(mapTileProviders)}>
+            {(p: string) => (
+              <FormControlLabel
+                value={p}
+                control={<Radio />}
+                label={mapTileProviders[p].name}
+              />
+            )}
+          </For>
+        </RadioGroup>
+      </Dialog>
+    </>
+  );
 };
 
 export default MapTilesProvider;

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',
+      caller: 'Map / setState',
-      params: JSON.stringify({
+      params: {
-        provider: params.provider,
+        ...params,
-        lon: params.lon,
+      },
-        lat: params.lat,
-        rotation: params.rotation,
-        zoom: params.zoom,
-      }),
     });
     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<any> | 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: [
+      layers: [tileLayer, new VectorLayer({ source: new VectorSource() })],
-        new TileLayer({
-          source: mapTileProviders[params.provider].source,
-        }),
-        new VectorLayer({ source: new VectorSource() }),
-      ],
       target: target,
       controls: new Collection<Control>([
         new Attribution({ collapsible: true }),
         new Rotate(),
         new ScaleLine({ bar: true }),
-        // // @ts-ignore
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <GetLocation />
-        //     </div>
-        //   ),
-        // }),
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <Back />
-        //     </div>
-        //   ),
-        // }),
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <Forward />
-        //     </div>
-        //   ),
-        // }),
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <GpxImport />
-        //     </div>
-        //   ),
-        // }),
       ]),
     });
     olMap.on(['moveend'], changeListener);
@@ -197,6 +170,7 @@ const Map: Component = () => {
       <Forward />
       <Back />
       <GpxImport />
+      <MapTileProvider />
       <AllGpxes map={getMap} />
     </div>
   );

src/icons/location-pin-svgrepo-com-red.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="297" height="297" >
+<g color='red' fill='red' >
+	<path d="M148.5,0C87.43,0,37.747,49.703,37.747,110.797c0,91.026,99.729,179.905,103.976,183.645
+		c1.936,1.705,4.356,2.559,6.777,2.559c2.421,0,4.841-0.853,6.778-2.559c4.245-3.739,103.975-92.618,103.975-183.645
+		C259.253,49.703,209.57,0,148.5,0z M148.5,272.689c-22.049-21.366-90.243-93.029-90.243-161.892
+		c0-49.784,40.483-90.287,90.243-90.287s90.243,40.503,90.243,90.287C238.743,179.659,170.549,251.322,148.5,272.689z"/>
+	<path d="M148.5,59.183c-28.273,0-51.274,23.154-51.274,51.614c0,28.461,23.001,51.614,51.274,51.614
+		c28.273,0,51.274-23.153,51.274-51.614C199.774,82.337,176.773,59.183,148.5,59.183z M148.5,141.901
+		c-16.964,0-30.765-13.953-30.765-31.104c0-17.15,13.801-31.104,30.765-31.104c16.964,0,30.765,13.953,30.765,31.104
+		C179.265,127.948,165.464,141.901,148.5,141.901z"/>
+</g>
+</svg>

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,