diff --git a/package-lock.json b/package-lock.json index e3d6de0..a97edc7 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/yauzl": { "version": "2.10.0", diff --git a/package.json b/package.json index 03be4bf..3450588 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.module.css b/src/App.module.css new file mode 100644 index 0000000..48308b2 --- /dev/null +++ b/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); + } +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..881d783 --- /dev/null +++ b/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 ( + + + } /> + + ); +}; + +export default App; diff --git a/src/components/map/Map.css b/src/components/map/Map.css new file mode 100644 index 0000000..cc1165f --- /dev/null +++ b/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; +} diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx new file mode 100644 index 0000000..38e044d --- /dev/null +++ b/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(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
; +}; + +export default Map; diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx new file mode 100644 index 0000000..84bebe9 --- /dev/null +++ b/src/components/map/index.tsx @@ -0,0 +1 @@ +export { default } from './Map'; diff --git a/src/index.tsx b/src/index.tsx index 97be0b9..e77a4e9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,13 @@ +/* @refresh reload */ import { render } from 'solid-js/web'; - -import { TodoList } from './todo-list'; - -render(() => , document.getElementById('root')); +import { Router, hashIntegration } from '@solidjs/router'; +import App from './App'; +//source={hashIntegration()} +render( + () => ( + + + + ), + document.getElementById('root') as HTMLElement +); diff --git a/src/todo-list.test.tsx b/src/todo-list.test.tsx deleted file mode 100644 index 7ca8d61..0000000 --- a/src/todo-list.test.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { describe, expect, test } from 'vitest'; - -import { render, fireEvent } from 'solid-testing-library'; - -import { TodoList } from './todo-list'; - -describe('', () => { - test('it will render an text input and a button', () => { - const { getByPlaceholderText, getByText, unmount } = render(() => ( - - )); - 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(() => ( - - )); - 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( - () => , - ); - 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(); - }); -}); diff --git a/src/todo-list.tsx b/src/todo-list.tsx deleted file mode 100644 index 38f0548..0000000 --- a/src/todo-list.tsx +++ /dev/null @@ -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([]); - 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 ( - <> -
- - -
- - {(todo) => { - const { id, text } = todo; - return ( -
- - - {text} - -
- ); - }} - - - ); -};