Getting stuff done in the sandbox.

package-lock.json

@@ -13,6 +13,8 @@
         "@capacitor/android": ">3.4.3",
         "@capacitor/core": ">3.4.3",
         "@capacitor/ios": ">3.4.3",
+        "@solidjs/router": "^0.5.1",
+        "ol": "^7.1.0",
         "solid-js": "^1.3.12"
       },
       "devDependencies": {
@@ -910,12 +912,64 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-style-spec": {
+      "version": "13.27.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.27.0.tgz",
+      "integrity": "sha512-wQSJCGRyf7pWknQgeGBArHEk8898UcI1BnAam7IRa3AGmHRFzlJ6DzoU24Hld9zJ0tgkNQ7OP5sJT/9hKHzavg==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      },
+      "bin": {
+        "gl-style-composite": "bin/gl-style-composite.js",
+        "gl-style-format": "bin/gl-style-format.js",
+        "gl-style-migrate": "bin/gl-style-migrate.js",
+        "gl-style-validate": "bin/gl-style-validate.js"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+    },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
+      "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg=="
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.51",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
       "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
       "dev": true
     },
+    "node_modules/@solidjs/router": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.5.1.tgz",
+      "integrity": "sha512-igyrwUqm/9T26Lb6l7oXwpc4lLUVqbhbN92wOL3NgLoLVmkQlUNTZciuAe+Su8XeJXlrWjl6oxDJDLt+6pws/g==",
+      "peerDependencies": {
+        "solid-js": "^1.5.3"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
@@ -1550,6 +1604,11 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -1721,6 +1780,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.284",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
@@ -2350,6 +2414,24 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "engines": {
+        "browsers": "defaults",
+        "node": ">=10.19"
+      }
+    },
     "node_modules/get-func-name": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
@@ -2546,6 +2628,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -3061,6 +3162,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+    },
     "node_modules/json5": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
@@ -3094,6 +3200,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+    },
     "node_modules/levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -3138,7 +3249,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -3155,6 +3265,11 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/mapbox-to-css-font": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
+      "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow=="
+    },
     "node_modules/merge-anything": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-5.1.3.tgz",
@@ -3225,6 +3340,14 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/minipass": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
@@ -3369,6 +3492,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ol": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.1.0.tgz",
+      "integrity": "sha512-mAeV5Ca4mFhYaJoGWNZnIMN5VNnFTf63FgZjBiYu/DjQDGKNsD5QyvvqVziioVdOOgl6b8rPB/ypj2XNBinPwA==",
+      "dependencies": {
+        "earcut": "^2.2.3",
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "9.1.0",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol-mapbox-style": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz",
+      "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==",
+      "dependencies": {
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3412,6 +3560,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
+    "node_modules/parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -3457,6 +3615,18 @@
         "node": "*"
       }
     },
+    "node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -3575,6 +3745,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -3596,6 +3771,19 @@
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "dev": true
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dependencies": {
+        "quickselect": "^2.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -3675,6 +3863,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -3705,6 +3901,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3874,6 +4075,34 @@
         "solid-js": ">=1.0.0"
       }
     },
+    "node_modules/sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "dependencies": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4365,6 +4594,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
+      "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -4536,6 +4770,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/xml-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.3.0.tgz",
+      "integrity": "sha512-i4PIrX33Wd66dvwo4syicwlwmnr6wuvvn4f2ku9hA67C2Uk62Xubczuhct+Evnd12/DV71qKNeDdJwES8HX1RA=="
+    },
     "node_modules/xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
@@ -4576,8 +4815,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-      "dev": true
     },
     "node_modules/yauzl": {
       "version": "2.10.0",

package.json

@@ -26,6 +26,8 @@
     "@capacitor/android": ">3.4.3",
     "@capacitor/core": ">3.4.3",
     "@capacitor/ios": ">3.4.3",
+    "@solidjs/router": "^0.5.1",
+    "ol": "^7.1.0",
     "solid-js": "^1.3.12"
   }
 }

src/App.module.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.logo {
+  animation: logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.link {
+  color: #b318f0;
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.tsx

@@ -0,0 +1,14 @@
+import type { Component } from 'solid-js';
+import { Routes, Route, Navigate } from '@solidjs/router';
+import Map from './components/map';
+
+const App: Component = () => {
+  return (
+    <Routes>
+      <Route path='/map/:lon/:lat/:zoom/:rotation' component={Map} />
+      <Route path='/*' element={<Navigate href='/map/0/0/1/0' />} />
+    </Routes>
+  );
+};
+
+export default App;

src/components/map/Map.css

@@ -0,0 +1,17 @@
+.ol-map {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.ol-control {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  padding: 2px;
+}
+.ol-full-screen {
+  top: 0.5em;
+  right: 0.5em;
+}

src/components/map/Map.tsx

@@ -0,0 +1,89 @@
+import { Component, createEffect, createSignal, onMount } from 'solid-js';
+import {
+  useParams,
+  useNavigate,
+  useRouteData,
+  useBeforeLeave,
+} from '@solidjs/router';
+import OlMap from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
+import Attribution from 'ol/control/Attribution';
+import Rotate from 'ol/control/Rotate';
+import ScaleLine from 'ol/control/ScaleLine';
+import Control from 'ol/control/Control';
+import OSM from 'ol/source/OSM';
+import { useGeographic as olUseGeographic } from 'ol/proj';
+
+import 'ol/ol.css';
+import './Map.css';
+
+const Map: Component = () => {
+  const [getMap, setMap] = createSignal<OlMap | null>(null);
+  const params = useParams();
+  const [state, setState] = createSignal(params);
+  createEffect(() => {
+    setState(params);
+    const map = getMap();
+    const view = map?.getView();
+    view?.setCenter([+state().lon, +state().lat]);
+    view?.setRotation(+state().rotation);
+    view?.setZoom(+state().zoom);
+  });
+  const navigate = useNavigate();
+  let target: HTMLDivElement;
+  console.log({ caller: 'Map', center: params.center });
+
+  onMount(() => {
+    olUseGeographic();
+
+    const changeListener = (event: any) => {
+      const map = getMap();
+      const view = map?.getView();
+      const center = view?.getCenter();
+      if (center) {
+        navigate(
+          `/map/${center[0]}/${
+            center[1]
+          }/${view?.getZoom()}/${view?.getRotation()}`
+        );
+      }
+      console.log({
+        caller: 'Map / changeListener',
+        event,
+        params,
+        map,
+      });
+    };
+
+    const olMap = new OlMap({
+      view: new View({
+        center: [+state().lon, +state().lat],
+        zoom: +state().zoom,
+        rotation: +state().rotation,
+      }),
+      layers: [
+        new TileLayer({
+          source: new OSM(),
+        }),
+        //new VectorLayer({ source: newSource }),
+      ],
+      target: target,
+      //    controls,
+    });
+    olMap.on(['moveend'], changeListener);
+    setMap(olMap);
+  });
+
+  useBeforeLeave((event) => {
+    console.log({ caller: 'Map / useBeforeLeave', event });
+  });
+
+  // @ts-ignore
+  return <div class='ol-map' ref={target} />;
+};
+
+export default Map;

src/components/map/index.tsx

@@ -0,0 +1 @@
+export { default } from './Map';

src/index.tsx

@@ -1,5 +1,13 @@
+/* @refresh reload */
 import { render } from 'solid-js/web';
-
+import { Router, hashIntegration } from '@solidjs/router';
-import { TodoList } from './todo-list';
+import App from './App';
-
+//source={hashIntegration()}
-render(() => <TodoList />, document.getElementById('root'));
+render(
+  () => (
+    <Router >
+      <App />
+    </Router>
+  ),
+  document.getElementById('root') as HTMLElement
+);

src/todo-list.test.tsx

@@ -1,46 +0,0 @@
-import { describe, expect, test } from 'vitest';
-
-import { render, fireEvent } from 'solid-testing-library';
-
-import { TodoList } from './todo-list';
-
-describe('<TodoList />', () => {
-  test('it will render an text input and a button', () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => (
-      <TodoList />
-    ));
-    expect(getByPlaceholderText('new todo here')).toBeInTheDocument();
-    expect(getByText('Add Todo')).toBeInTheDocument();
-    unmount();
-  });
-
-  test('it will add a new todo', async () => {
-    const { getByPlaceholderText, getByText, unmount } = render(() => (
-      <TodoList />
-    ));
-    const input = getByPlaceholderText('new todo here') as HTMLInputElement;
-    const button = getByText('Add Todo');
-    input.value = 'test new todo';
-    fireEvent.click(button as HTMLInputElement);
-    expect(input.value).toBe('');
-    expect(getByText(/test new todo/)).toBeInTheDocument();
-    unmount();
-  });
-
-  test('it will mark a todo as completed', async () => {
-    const { getByPlaceholderText, findByRole, getByText, unmount } = render(
-      () => <TodoList />,
-    );
-    const input = getByPlaceholderText('new todo here') as HTMLInputElement;
-    const button = getByText('Add Todo') as HTMLButtonElement;
-    input.value = 'mark new todo as completed';
-    fireEvent.click(button);
-    const completed = (await findByRole('checkbox')) as HTMLInputElement;
-    expect(completed?.checked).toBe(false);
-    fireEvent.click(completed);
-    expect(completed?.checked).toBe(true);
-    const text = getByText('mark new todo as completed') as HTMLSpanElement;
-    expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
-    unmount();
-  });
-});

src/todo-list.tsx

@@ -1,57 +0,0 @@
-import { For, createSignal } from 'solid-js';
-
-type Todo = { id: number; text: string; completed: boolean };
-
-export const TodoList = () => {
-  let input!: HTMLInputElement;
-  let todoId = 0;
-  const [todos, setTodos] = createSignal<Todo[]>([]);
-  const addTodo = (text: string) => {
-    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
-  };
-  const toggleTodo = (id: number) => {
-    setTodos(
-      todos().map((todo) =>
-        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-      ),
-    );
-  };
-
-  return (
-    <>
-      <div>
-        <input placeholder="new todo here" ref={input} />
-        <button
-          onClick={() => {
-            if (!input.value.trim()) return;
-            addTodo(input.value);
-            input.value = '';
-          }}
-        >
-          Add Todo
-        </button>
-      </div>
-      <For each={todos()}>
-        {(todo) => {
-          const { id, text } = todo;
-          return (
-            <div>
-              <input
-                type="checkbox"
-                checked={todo.completed}
-                onchange={[toggleTodo, id]}
-              />
-              <span
-                style={{
-                  'text-decoration': todo.completed ? 'line-through' : 'none',
-                }}
-              >
-                {text}
-              </span>
-            </div>
-          );
-        }}
-      </For>
-    </>
-  );
-};