diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..fccd125 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "Bash(cat:*)" + ], + "deny": [], + "ask": [] + } +} diff --git a/package-lock.json b/package-lock.json index 6de5046..a7caa70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,19 +8,15 @@ "name": "app4", "version": "0.0.1", "dependencies": { + "@sakitam-gis/maplibre-wind": "^2.0.3", "@sveltestrap/sveltestrap": "^7.1.0", - "@types/leaflet": "^1.9.19", "bootstrap-icons": "^1.13.1", "chart.js": "^4.5.0", "chartjs-adapter-luxon": "^1.3.1", "chartjs-plugin-dragdata": "^2.3.1", "js-cookie": "^3.0.5", - "leaflet": "^1.9.4", - "leaflet-heatmap": "^1.0.0", - "leaflet-timedimension": "^1.1.1", - "leaflet-velocity": "^2.1.4", - "leaflet.heat": "^0.2.0", "luxon": "^3.6.1", + "maplibre-gl": "^4.0.0", "svelte5-chartjs": "^1.0.0" }, "devDependencies": { @@ -495,6 +491,81 @@ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==" }, + "node_modules/@mapbox/geojson-rewind": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz", + "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==", + "dependencies": { + "get-stream": "^6.0.1", + "minimist": "^1.2.6" + }, + "bin": { + "geojson-rewind": "geojson-rewind" + } + }, + "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/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/tiny-sdf": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.7.tgz", + "integrity": "sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==" + }, + "node_modules/@mapbox/unitbezier": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz", + "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==" + }, + "node_modules/@mapbox/vector-tile": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz", + "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==", + "dependencies": { + "@mapbox/point-geometry": "~0.1.0" + } + }, + "node_modules/@mapbox/whoots-js": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz", + "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@maplibre/maplibre-gl-style-spec": { + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz", + "integrity": "sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==", + "dependencies": { + "@mapbox/jsonlint-lines-primitives": "~2.0.2", + "@mapbox/unitbezier": "^0.0.1", + "json-stringify-pretty-compact": "^4.0.0", + "minimist": "^1.2.8", + "quickselect": "^2.0.0", + "rw": "^1.3.3", + "tinyqueue": "^3.0.0" + }, + "bin": { + "gl-style-format": "dist/gl-style-format.mjs", + "gl-style-migrate": "dist/gl-style-migrate.mjs", + "gl-style-validate": "dist/gl-style-validate.mjs" + } + }, + "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", + "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==" + }, "node_modules/@polka/url": { "version": "1.0.0-next.28", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz", @@ -770,6 +841,47 @@ "win32" ] }, + "node_modules/@sakitam-gis/maplibre-wind": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@sakitam-gis/maplibre-wind/-/maplibre-wind-2.0.3.tgz", + "integrity": "sha512-KeBlh2EJ13+MsFck2l8sKXKz/ogezvnontarSCTmpfzNzB3b9nA+ydzXLFfqqUMrnZwEhsuEG+pKTFMyPv1shg==", + "dependencies": { + "@mapbox/geojson-rewind": "^0.5.2", + "@sakitam-gis/rbush": "3.1.2", + "@sakitam-gis/vis-engine": "^1.5.3", + "gl-matrix": "^3.4.3", + "wind-gl-core": "2.0.2" + }, + "peerDependencies": { + "maplibre-gl": ">=3.0.0" + } + }, + "node_modules/@sakitam-gis/rbush": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@sakitam-gis/rbush/-/rbush-3.1.2.tgz", + "integrity": "sha512-pnNaLnxFBBMnHgGjFX+h2jkpZQg2vXquvDv1BUKfU72uJzJqPcS8smaLydJqcbXp8p7GruoPrQzUpqYG0MYyIg==", + "dependencies": { + "quickselect": "^2.0.0" + } + }, + "node_modules/@sakitam-gis/rbush/node_modules/quickselect": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", + "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==" + }, + "node_modules/@sakitam-gis/vis-engine": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@sakitam-gis/vis-engine/-/vis-engine-1.5.3.tgz", + "integrity": "sha512-IpuZwi0XRflJiP1mNTwOSjlAJZRCczOuVh6s/feVOpXctiAoSWrAuhK0HVITLpCWAQF1bN6CRKA3LW0z1nCr0g==", + "dependencies": { + "colord": "^2.9.3", + "gl-matrix": "^3.4.3" + }, + "engines": { + "node": ">= 14.18.1", + "npm": ">= 6.14.15" + } + }, "node_modules/@sveltejs/acorn-typescript": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz", @@ -887,10 +999,10 @@ "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==" }, - "node_modules/@types/leaflet": { - "version": "1.9.19", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.19.tgz", - "integrity": "sha512-pB+n2daHcZPF2FDaWa+6B0a0mSDf4dPU35y5iTXsx7x/PzzshiX5atYiS1jlBn43X7XvM8AP+AB26lnSk0J4GA==", + "node_modules/@types/geojson-vt": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz", + "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==", "dependencies": { "@types/geojson": "*" } @@ -901,6 +1013,34 @@ "integrity": "sha512-R/BdP7OxEMc44l2Ex5lSXHoIXTB2JLNa3y2QISIbr58U/YcsffyQrYW//hZSdrfxrjRZj3GcUoxMPGdO8gSYuw==", "dev": true }, + "node_modules/@types/mapbox__point-geometry": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz", + "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==" + }, + "node_modules/@types/mapbox__vector-tile": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz", + "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==", + "dependencies": { + "@types/geojson": "*", + "@types/mapbox__point-geometry": "*", + "@types/pbf": "*" + } + }, + "node_modules/@types/pbf": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz", + "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==" + }, + "node_modules/@types/supercluster": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz", + "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@vincjo/datatables": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/@vincjo/datatables/-/datatables-2.5.0.tgz", @@ -1007,6 +1147,11 @@ "node": ">=6" } }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" + }, "node_modules/cookie": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", @@ -1076,6 +1221,11 @@ "integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==", "dev": true }, + "node_modules/earcut": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.2.tgz", + "integrity": "sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==" + }, "node_modules/esbuild": { "version": "0.25.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz", @@ -1129,6 +1279,11 @@ "@jridgewell/sourcemap-codec": "^1.4.15" } }, + "node_modules/exifr": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/exifr/-/exifr-7.1.3.tgz", + "integrity": "sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw==" + }, "node_modules/fdir": { "version": "6.4.6", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz", @@ -1157,10 +1312,58 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, - "node_modules/heatmap.js": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/heatmap.js/-/heatmap.js-2.0.5.tgz", - "integrity": "sha512-CG2gYFP5Cv9IQCXEg3ZRxnJDyAilhWnQlAuHYGuWVzv6mFtQelS1bR9iN80IyDmFECbFPbg6I0LR5uAFHgCthw==" + "node_modules/geojson-vt": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz", + "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==" + }, + "node_modules/get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/gl-matrix": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz", + "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==" + }, + "node_modules/global-prefix": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz", + "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==", + "dependencies": { + "ini": "^4.1.3", + "kind-of": "^6.0.3", + "which": "^4.0.0" + }, + "engines": { + "node": ">=16" + } + }, + "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/import-meta-resolve": { "version": "4.1.0", @@ -1172,6 +1375,14 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/ini": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz", + "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==", + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/is-reference": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz", @@ -1180,10 +1391,13 @@ "@types/estree": "^1.0.6" } }, - "node_modules/iso8601-js-period": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/iso8601-js-period/-/iso8601-js-period-0.2.1.tgz", - "integrity": "sha512-iDyz2TQFBd5WhCZjruOwHj01JkQGu7YbVLCVdpA7lCGEcBzE3ffCPAhLh/M8TAp//kCixPpYN4XU54WHCxvD2Q==" + "node_modules/isexe": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz", + "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==", + "engines": { + "node": ">=16" + } }, "node_modules/js-cookie": { "version": "3.0.5", @@ -1193,6 +1407,24 @@ "node": ">=14" } }, + "node_modules/json-stringify-pretty-compact": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz", + "integrity": "sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==" + }, + "node_modules/kdbush": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", + "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" + }, + "node_modules/kind-of": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/kleur": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", @@ -1202,39 +1434,6 @@ "node": ">=6" } }, - "node_modules/leaflet": { - "version": "1.9.4", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", - "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" - }, - "node_modules/leaflet-heatmap": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/leaflet-heatmap/-/leaflet-heatmap-1.0.0.tgz", - "integrity": "sha512-WP/emZYwjWaEnWMcE2dftuJvtjp53zmJcHtVTHUqPN7AQEowHxDTLH5j1BJjE4uL1K5dJclBLX4oLpnOGS/qTw==", - "dependencies": { - "heatmap.js": "*", - "leaflet": "*" - } - }, - "node_modules/leaflet-timedimension": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/leaflet-timedimension/-/leaflet-timedimension-1.1.1.tgz", - "integrity": "sha512-ejXldN94veRsWka1vpC+4rbH+2+3d3ztn2xYx4jcXtjYDrKC/sNnoqCmyH2UEYIy51PI2851aI2k8uGdOEbhlw==", - "dependencies": { - "iso8601-js-period": "^0.2.1", - "leaflet": "~0.7.4 || ~1" - } - }, - "node_modules/leaflet-velocity": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/leaflet-velocity/-/leaflet-velocity-2.1.4.tgz", - "integrity": "sha512-uTmSb2/Kn28S0itlmJBMy2ZRKsisWUr2wm9rtkKXjpq9Sai7tqKdTRHKfLgTOgEdWFf5Ctt2bQoB7kb50qC7eg==" - }, - "node_modules/leaflet.heat": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz", - "integrity": "sha512-Cd5PbAA/rX3X3XKxfDoUGi9qp78FyhWYurFg3nsfhntcM/MCNK08pRkf4iEenO1KNqwVPKCmkyktjW3UD+h9bQ==" - }, "node_modules/locate-character": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", @@ -1256,6 +1455,54 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/maplibre-gl": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.1.tgz", + "integrity": "sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==", + "dependencies": { + "@mapbox/geojson-rewind": "^0.5.2", + "@mapbox/jsonlint-lines-primitives": "^2.0.2", + "@mapbox/point-geometry": "^0.1.0", + "@mapbox/tiny-sdf": "^2.0.6", + "@mapbox/unitbezier": "^0.0.1", + "@mapbox/vector-tile": "^1.3.1", + "@mapbox/whoots-js": "^3.1.0", + "@maplibre/maplibre-gl-style-spec": "^20.3.1", + "@types/geojson": "^7946.0.14", + "@types/geojson-vt": "3.2.5", + "@types/mapbox__point-geometry": "^0.1.4", + "@types/mapbox__vector-tile": "^1.3.4", + "@types/pbf": "^3.0.5", + "@types/supercluster": "^7.1.3", + "earcut": "^3.0.0", + "geojson-vt": "^4.0.2", + "gl-matrix": "^3.4.3", + "global-prefix": "^4.0.0", + "kdbush": "^4.0.2", + "murmurhash-js": "^1.0.0", + "pbf": "^3.3.0", + "potpack": "^2.0.0", + "quickselect": "^3.0.0", + "supercluster": "^8.0.1", + "tinyqueue": "^3.0.0", + "vt-pbf": "^3.1.3" + }, + "engines": { + "node": ">=16.14.0", + "npm": ">=8.1.0" + }, + "funding": { + "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -1280,6 +1527,11 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true }, + "node_modules/murmurhash-js": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz", + "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==" + }, "node_modules/nanoid": { "version": "3.3.11", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", @@ -1298,6 +1550,18 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/pbf": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz", + "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==", + "dependencies": { + "ieee754": "^1.1.12", + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -1344,6 +1608,21 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/potpack": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.1.0.tgz", + "integrity": "sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==" + }, + "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/quickselect": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz", + "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==" + }, "node_modules/readdirp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", @@ -1357,6 +1636,14 @@ "url": "https://paulmillr.com/funding/" } }, + "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/rollup": { "version": "4.39.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.39.0.tgz", @@ -1396,6 +1683,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/sade": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", @@ -1437,6 +1729,14 @@ "node": ">=0.10.0" } }, + "node_modules/supercluster": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", + "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", + "dependencies": { + "kdbush": "^4.0.2" + } + }, "node_modules/svelte": { "version": "5.34.8", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.34.8.tgz", @@ -1509,6 +1809,11 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tinyqueue": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz", + "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==" + }, "node_modules/totalist": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", @@ -1619,6 +1924,53 @@ } } }, + "node_modules/vt-pbf": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz", + "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==", + "dependencies": { + "@mapbox/point-geometry": "0.1.0", + "@mapbox/vector-tile": "^1.3.1", + "pbf": "^3.2.1" + } + }, + "node_modules/which": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz", + "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==", + "dependencies": { + "isexe": "^3.1.1" + }, + "bin": { + "node-which": "bin/which.js" + }, + "engines": { + "node": "^16.13.0 || >=18.0.0" + } + }, + "node_modules/wind-gl-core": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/wind-gl-core/-/wind-gl-core-2.0.2.tgz", + "integrity": "sha512-EUnUQsbucaPCFns7p6BlPE5xXiXQpb2hXMmE4t/FG4W+rKlYHjtIMWzM0wAD4M6g4Wg6JzSft7SGocPJAqjssA==", + "dependencies": { + "@sakitam-gis/vis-engine": "^1.5.3", + "earcut": "^2.2.4", + "wind-gl-worker": "2.0.2" + } + }, + "node_modules/wind-gl-core/node_modules/earcut": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", + "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==" + }, + "node_modules/wind-gl-worker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/wind-gl-worker/-/wind-gl-worker-2.0.2.tgz", + "integrity": "sha512-uEMHjQtX5w+Kn+MT0RWGyYYqou6brZMe9BMOYAqoJh74tKGpuBx0+i+4J2XppAZmD8r7KYn/UvhjGHfpOq0UlQ==", + "dependencies": { + "exifr": "^7.1.3" + } + }, "node_modules/zimmerframe": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", diff --git a/package.json b/package.json index bd83ec5..25b506e 100644 --- a/package.json +++ b/package.json @@ -23,19 +23,15 @@ "vite": "^6.2.5" }, "dependencies": { + "@sakitam-gis/maplibre-wind": "^2.0.3", "@sveltestrap/sveltestrap": "^7.1.0", - "@types/leaflet": "^1.9.19", "bootstrap-icons": "^1.13.1", "chart.js": "^4.5.0", "chartjs-adapter-luxon": "^1.3.1", "chartjs-plugin-dragdata": "^2.3.1", "js-cookie": "^3.0.5", - "leaflet": "^1.9.4", - "leaflet-heatmap": "^1.0.0", - "leaflet-timedimension": "^1.1.1", - "leaflet-velocity": "^2.1.4", - "leaflet.heat": "^0.2.0", "luxon": "^3.6.1", + "maplibre-gl": "^4.0.0", "svelte5-chartjs": "^1.0.0" } } diff --git a/src/app.html b/src/app.html index 2c70eb0..98a86d5 100644 --- a/src/app.html +++ b/src/app.html @@ -5,7 +5,6 @@ - diff --git a/src/lib/components/Map.svelte b/src/lib/components/Map.svelte index ae1bd1a..adbef69 100644 --- a/src/lib/components/Map.svelte +++ b/src/lib/components/Map.svelte @@ -1,9 +1,8 @@
@@ -156,3 +404,25 @@ {/if}
+ + diff --git a/src/lib/components/TimeLine.svelte b/src/lib/components/TimeLine.svelte new file mode 100644 index 0000000..df9642e --- /dev/null +++ b/src/lib/components/TimeLine.svelte @@ -0,0 +1,310 @@ + + +
+
e.key === 'Enter' && handleToggleCollapse()} + > + Flight Timeline + +
+ + {#if !isCollapsed} +
+
+
+ Time: + {timeElapsed} +
+ {#if currentPosition} +
+ Altitude: + {Math.round(currentPosition.alt)} m +
+
+ Position: + {currentPosition.lat.toFixed(4)}, {currentPosition.lng.toFixed(4)} +
+ {/if} +
+ +
+
+ + + {#if !isPlaying} + + {:else} + + {/if} + + +
+ +
+ +
+
+
+ {/if} +
+ + diff --git a/src/lib/components/WindVisualisation.svelte b/src/lib/components/WindVisualisation.svelte index 6a297f2..3807385 100644 --- a/src/lib/components/WindVisualisation.svelte +++ b/src/lib/components/WindVisualisation.svelte @@ -1,244 +1,64 @@ - + + Wind visualization requires tile/image source + + + See WindVisualisation.svelte for implementation notes + + + --> diff --git a/src/lib/ext/leaflet-ruler/leaflet-ruler.ts b/src/lib/ext/leaflet-ruler/leaflet-ruler.ts deleted file mode 100644 index 40ef2be..0000000 --- a/src/lib/ext/leaflet-ruler/leaflet-ruler.ts +++ /dev/null @@ -1,286 +0,0 @@ -import * as L from "leaflet"; -import { distHaversine, bearingHaversine } from "$lib/mathutil"; - -// Define an interface for the control's options for type safety. -export interface RulerOptions extends L.ControlOptions { - events?: { - onToggle?: (isActive: boolean) => void; - }; - circleMarker?: L.CircleMarkerOptions; - lineStyle?: L.PolylineOptions; - lengthUnit?: { - display?: string; - decimal?: number; - factor?: number | null; - label?: string; - }; - angleUnit?: { - display?: string; - decimal?: number; - factor?: number | null; - label?: string; - }; -} - -// Define an interface for the measurement result. -interface MeasurementResult { - Bearing: number; - Distance: number; -} - -// Use a modern TypeScript class that extends L.Control. -export class Ruler extends L.Control { - // Override the default options with our custom ones. - public options: RulerOptions = { - position: "topright", - events: { - onToggle: () => {}, - }, - circleMarker: { - color: "red", - radius: 2, - }, - lineStyle: { - color: "red", - dashArray: "1,6", - }, - lengthUnit: { - display: "km", - decimal: 2, - factor: null, - label: "Distance:", - }, - angleUnit: { - display: "°", - decimal: 2, - factor: null, - label: "Bearing:", - }, - }; - - // Declare class properties with types. - private _lastClickTime = 0; - private _map?: L.Map; - private _container?: HTMLElement; - private _choice = false; - private _defaultCursor = ""; - private _allLayers: L.LayerGroup = L.layerGroup(); - private _clickedLatLong: L.LatLng | null = null; - private _clickedPoints: L.LatLng[] = []; - private _totalLength = 0; - private _clickCount = 0; - private _tempLine: L.FeatureGroup = L.featureGroup(); - private _tempPoint: L.FeatureGroup = L.featureGroup(); - private _pointLayer: L.FeatureGroup = L.featureGroup(); - private _polylineLayer: L.FeatureGroup = L.featureGroup(); - private _movingLatLong: L.LatLng | null = null; - private _result: MeasurementResult = { Bearing: 0, Distance: 0 }; - private _addedLength = 0; - - constructor(options?: RulerOptions) { - super(options); - L.Util.setOptions(this, options); - } - - public isActive(): boolean { - return this._choice; - } - - public onAdd(map: L.Map): HTMLElement { - this._map = map; - this._container = L.DomUtil.create("div", "leaflet-bar leaflet-ruler"); - L.DomEvent.disableClickPropagation(this._container); - L.DomEvent.on(this._container, "click", this._toggleMeasure, this); - this._defaultCursor = this._map.getContainer().style.cursor; - this._allLayers = L.layerGroup(); - return this._container; - } - - public onRemove(): void { - if (this._container) { - L.DomEvent.off(this._container, "click", this._toggleMeasure, this); - } - if (this._choice) { - this._toggleMeasure(); // Turn off measurements - } - } - - private _toggleMeasure(): void { - this._choice = !this._choice; - this.options.events?.onToggle?.(this._choice); - - this._clickedLatLong = null; - this._clickedPoints = []; - this._totalLength = 0; - - if (!this._map || !this._container) return; - - const mapContainer = this._map.getContainer(); - - if (this._choice) { - this._map.doubleClickZoom.disable(); - L.DomEvent.on(mapContainer, "keydown", this._escape, this); - L.DomEvent.on(mapContainer, "dblclick", this._closePath, this); - this._container.classList.add("leaflet-ruler-clicked"); - this._clickCount = 0; - this._tempLine = L.featureGroup().addTo(this._allLayers); - this._tempPoint = L.featureGroup().addTo(this._allLayers); - this._pointLayer = L.featureGroup().addTo(this._allLayers); - this._polylineLayer = L.featureGroup().addTo(this._allLayers); - this._allLayers.addTo(this._map); - mapContainer.style.cursor = "crosshair"; - this._map.on("click", this._clicked, this); - this._map.on("mousemove", this._moving, this); - } else { - this._map.doubleClickZoom.enable(); - L.DomEvent.off(mapContainer, "keydown", this._escape, this); - L.DomEvent.off(mapContainer, "dblclick", this._closePath, this); - this._container.classList.remove("leaflet-ruler-clicked"); - this._map.removeLayer(this._allLayers); - this._allLayers = L.layerGroup(); - mapContainer.style.cursor = this._defaultCursor; - this._map.off("click", this._clicked, this); - this._map.off("mousemove", this._moving, this); - } - } - - private _clicked(e: L.LeafletMouseEvent): void { - // hack to prevent adding the same point twice on double click - let clickTime = Date.now(); - if (clickTime - this._lastClickTime < 200) { - this._closePath(); - return; - } - - this._lastClickTime = clickTime; - - this._clickedLatLong = e.latlng; - this._clickedPoints.push(this._clickedLatLong); - L.circleMarker(this._clickedLatLong, this.options.circleMarker).addTo(this._pointLayer); - - if (this._clickCount > 0 && !e.latlng.equals(this._clickedPoints[this._clickedPoints.length - 2], 0.0001)) { - if (this._movingLatLong) { - L.polyline( - [this._clickedPoints[this._clickCount - 1], this._movingLatLong], - this.options.lineStyle - ).addTo(this._polylineLayer); - } - let text: string; - this._totalLength += this._result.Distance; - const angleUnit = this.options.angleUnit!; - const lengthUnit = this.options.lengthUnit!; - - if (this._clickCount > 1) { - text = `${angleUnit.label} ${this._result.Bearing.toFixed(angleUnit.decimal)} ${ - angleUnit.display - }
${lengthUnit.label} ${this._totalLength.toFixed(lengthUnit.decimal)} ${ - lengthUnit.display - }`; - } else { - text = `${angleUnit.label} ${this._result.Bearing.toFixed(angleUnit.decimal)} ${ - angleUnit.display - }
${lengthUnit.label} ${this._result.Distance.toFixed(lengthUnit.decimal)} ${ - lengthUnit.display - }`; - } - L.circleMarker(this._clickedLatLong, this.options.circleMarker) - .bindTooltip(text, { permanent: true, className: "result-tooltip" }) - .addTo(this._pointLayer) - .openTooltip(); - } - this._clickCount++; - } - - private _moving(e: L.LeafletMouseEvent): void { - if (this._clickedLatLong && this._map) { - this._movingLatLong = e.latlng; - - this._tempLine.clearLayers(); - this._tempPoint.clearLayers(); - - this._calculateBearingAndDistance(); - this._addedLength = this._result.Distance + this._totalLength; - - L.polyline([this._clickedLatLong, this._movingLatLong], this.options.lineStyle).addTo(this._tempLine); - - const angleUnit = this.options.angleUnit!; - const lengthUnit = this.options.lengthUnit!; - let text: string; - - if (this._clickCount > 1) { - text = `${angleUnit.label} ${this._result.Bearing.toFixed(angleUnit.decimal)} ${ - angleUnit.display - }
${lengthUnit.label} ${this._addedLength.toFixed(lengthUnit.decimal)} ${ - lengthUnit.display - }
(+${this._result.Distance.toFixed(lengthUnit.decimal)})
`; - } else { - text = `${angleUnit.label} ${this._result.Bearing.toFixed(angleUnit.decimal)} ${ - angleUnit.display - }
${lengthUnit.label} ${this._result.Distance.toFixed(lengthUnit.decimal)} ${ - lengthUnit.display - }`; - } - L.circleMarker(this._movingLatLong, this.options.circleMarker) - .bindTooltip(text, { sticky: true, offset: L.point(0, -40), className: "moving-tooltip" }) - .addTo(this._tempPoint) - .openTooltip(); - } - } - - private _escape(e: Event): void { - if ((e as KeyboardEvent).key === "Escape") { - if (this._clickCount > 0) { - this._closePath(); - } else { - this._toggleMeasure(); - } - } - } - - private _calculateBearingAndDistance(): void { - if (!this._clickedLatLong || !this._movingLatLong) return; - - const f1 = this._clickedLatLong.lat; - const l1 = this._clickedLatLong.lng; - const f2 = this._movingLatLong.lat; - const l2 = this._movingLatLong.lng; - - const angleUnit = this.options.angleUnit!; - const lengthUnit = this.options.lengthUnit!; - - const brng = bearingHaversine({ lat: f1, lng: l1 }, { lat: f2, lng: l2 }); - - const distance = distHaversine({ lat: f1, lng: l1 }, { lat: f2, lng: l2 }); - - if (angleUnit.factor) { - this._result.Bearing = brng * angleUnit.factor; - } else { - this._result.Bearing = brng; - } - - if (lengthUnit.factor) { - this._result.Distance = distance * lengthUnit.factor; - } else { - this._result.Distance = distance; - } - - this._result = { - Bearing: brng, - Distance: distance, - }; - } - - private _closePath(): void { - if (!this._map || !this._container) return; - - this._map.removeLayer(this._tempLine); - this._map.removeLayer(this._tempPoint); - this._choice = false; - this._toggleMeasure(); - } -} - -// Factory function for creating the control, maintaining the Leaflet convention. -export const ruler = (options?: RulerOptions) => { - return new Ruler(options); -}; diff --git a/src/lib/prediction.ts b/src/lib/prediction.ts index 2dc4da5..afd31cc 100644 --- a/src/lib/prediction.ts +++ b/src/lib/prediction.ts @@ -1,6 +1,5 @@ import { writable } from "svelte/store"; -import type { LatLngExpression } from "leaflet"; -import L from "leaflet"; +import type { LatLngExpression } from "./types"; import { getCsrfToken } from "./auth"; import type { PredictionStage, RawPrediction, Prediction, Point } from "./types"; @@ -129,7 +128,7 @@ export function parsePrediction(prediction: PredictionStage[]): Prediction { if (lon > 180.0) { lon -= 360.0; } - launch.latlng = L.latLng([launchObj.latitude, lon, launchObj.altitude]); + launch.latlng = { lat: launchObj.latitude, lng: lon, alt: launchObj.altitude }; launch.datetime = new Date(launchObj.datetime); const burstObj = descent[0]; @@ -137,7 +136,7 @@ export function parsePrediction(prediction: PredictionStage[]): Prediction { if (lon > 180.0) { lon -= 360.0; } - burst.latlng = L.latLng([burstObj.latitude, lon, burstObj.altitude]); + burst.latlng = { lat: burstObj.latitude, lng: lon, alt: burstObj.altitude }; burst.datetime = new Date(burstObj.datetime); const landingObj = descent[descent.length - 1]; @@ -145,7 +144,7 @@ export function parsePrediction(prediction: PredictionStage[]): Prediction { if (lon > 180.0) { lon -= 360.0; } - landing.latlng = L.latLng([landingObj.latitude, lon, landingObj.altitude]); + landing.latlng = { lat: landingObj.latitude, lng: lon, alt: landingObj.altitude }; landing.datetime = new Date(landingObj.datetime); const profile = prediction[1].stage === "descent" ? "standard_profile" : "float_profile"; diff --git a/src/lib/telemetry.ts b/src/lib/telemetry.ts index b320f74..384493b 100644 --- a/src/lib/telemetry.ts +++ b/src/lib/telemetry.ts @@ -1,5 +1,4 @@ import { writable } from "svelte/store" -import L from "leaflet"; import type { TelemetryPoint, Telemetry } from "./types"; @@ -11,7 +10,7 @@ export function parseTelemetry(telemetry: TelemetryPoint[]): Telemetry { ]); const launch = { - latlng: L.latLng(telemetry[0].latitude, telemetry[0].longitude), + latlng: { lat: telemetry[0].latitude, lng: telemetry[0].longitude }, datetime: new Date(telemetry[0].datetime) }; diff --git a/src/lib/types.ts b/src/lib/types.ts index 45aeb5b..15b4df1 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -1,4 +1,11 @@ -import type { LatLngExpression, LatLngLiteral } from "leaflet"; +// Define coordinate types (previously from Leaflet) +export type LatLngTuple = [number, number] | [number, number, number]; // Support 2D and 3D coordinates +export interface LatLngLiteral { + lat: number; + lng: number; + alt?: number; // Optional altitude +} +export type LatLngExpression = LatLngTuple | LatLngLiteral; export const PROFILE_MAP = { "Обычный": "standard_profile", diff --git a/src/routes/predict/+page.svelte b/src/routes/predict/+page.svelte index 5de2ec6..4f486d3 100644 --- a/src/routes/predict/+page.svelte +++ b/src/routes/predict/+page.svelte @@ -10,8 +10,8 @@ import { PredictionStore } from "$lib/stores"; import { addToast, removeToast } from "$lib/components/ui/Toast.svelte"; import ToastContainer from '$lib/components/ui/Toast.svelte'; - import L, { point } from "leaflet"; import GenericPanel from "$lib/components/GenericPanel.svelte"; + import TimeLine from "$lib/components/TimeLine.svelte"; let map: Map | null = null; let panelContainer: PanelContainer | null = null; @@ -32,8 +32,13 @@ if (panelContainer) { let element = panelContainer.getElement(); if (!element) return; - L.DomEvent.disableClickPropagation(element); - L.DomEvent.disableScrollPropagation(element); + + // Disable click and scroll propagation to prevent map interaction + element.addEventListener('click', (e) => e.stopPropagation()); + element.addEventListener('dblclick', (e) => e.stopPropagation()); + element.addEventListener('mousedown', (e) => e.stopPropagation()); + element.addEventListener('touchstart', (e) => e.stopPropagation()); + element.addEventListener('wheel', (e) => e.stopPropagation()); } }); @@ -67,7 +72,10 @@ } } - + function handleTimeUpdate(event: CustomEvent<{ index: number; lat: number; lng: number; alt: number; datetime: Date }>) { + const { lat, lng } = event.detail; + map?.updateAnimatedMarker(lat, lng); + } @@ -111,11 +119,12 @@ {:else if activeTabRight === 'layers'} - {:else if activeTabLeft === 'settings'} - {/if} + {#if $PredictionStore} + + {/if} diff --git a/static/css/custom.css b/static/css/custom.css index d2b7c08..b2939ef 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -86,36 +86,17 @@ z-index: 1001; } -.panel-container-right { - position: absolute; - top: var(--panel-top); - right: var(--panel-left); - width: 23rem; - max-height: 90vh; - max-width: calc(100vw - var(--panel-left) - var(--panel-left)); - overflow-y: auto; - z-index: 1001; -} - -.leaflet-bar { +/* MapLibre control styles */ +.maplibregl-ctrl-group { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-radius: var(--bs-border-radius) !important; } -.leaflet-tooltip-top::before { +.maplibregl-popup-tip { border-top-color: var(--bs-border-color) !important; } -.leaflet-tooltip-bottom::before { - border-bottom-color: var(--bs-border-color) !important; -} -.leaflet-tooltip-left::before { - border-left-color: var(--bs-border-color) !important; -} -.leaflet-tooltip-right::before { - border-right-color: var(--bs-border-color) !important; -} -.leaflet-tooltip { +.maplibregl-popup-content { background-color: var(--bs-body-bg) !important; border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-radius: var(--bs-border-radius) !important; @@ -123,6 +104,10 @@ box-shadow: none !important; } +.maplibregl-popup-close-button { + color: var(--bs-body-color); +} + .modal-backdrop { opacity: var(--bs-backdrop-opacity) !important; }