From f2a6225c80284f44bc2fd789269ea5d33f7c8fd8 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 21 Mar 2024 12:16:00 +0100 Subject: [PATCH] Feature: add Protomaps as background layers --- package-lock.json | 195 ++++++++++++++++++--------- package.json | 18 ++- public/css/index-tailwind-output.css | 16 ++- src/Models/RasterLayerProperties.ts | 7 +- src/UI/Map/MapLibreAdaptor.ts | 13 +- src/UI/Map/RasterLayerHandler.ts | 59 +++++--- src/assets/global-raster-layers.json | 65 ++++++++- test.html | 3 - 8 files changed, 272 insertions(+), 104 deletions(-) diff --git a/package-lock.json b/package-lock.json index 60e061e8a..3e64bbd68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mapcomplete", - "version": "0.40.5", + "version": "0.40.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mapcomplete", - "version": "0.40.5", + "version": "0.40.6", "license": "GPL-3.0-or-later", "dependencies": { "@rgossiaux/svelte-headlessui": "^1.0.2", @@ -44,7 +44,7 @@ "libphonenumber-js": "^1.10.8", "lz-string": "^1.4.4", "mangrove-reviews-typescript": "^1.1.0", - "maplibre-gl": "^3.5.0", + "maplibre-gl": "^4.1.1", "monaco-editor": "^0.46.0", "nano-markdown": "^1.2.2", "opening_hours": "^3.6.0", @@ -55,6 +55,7 @@ "pbf": "^3.2.1", "pg": "^8.11.3", "pic4carto": "^2.1.15", + "pmtiles": "^3.0.5", "prompt-sync": "^4.2.0", "qrcode-generator": "^1.4.4", "showdown": "^2.1.0", @@ -2343,13 +2344,13 @@ } }, "node_modules/@maplibre/maplibre-gl-style-spec": { - "version": "19.3.2", - "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.2.tgz", - "integrity": "sha512-C2JAk64XUz9v78+bpyTk1zvgjjnDsB8CCjNumyAYdWK2dvdDtILzh1AGBMdS/llX3KaHjGYxAE5wOwfdwq4Pog==", + "version": "20.1.1", + "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.1.1.tgz", + "integrity": "sha512-z85ARNPCBI2Cs5cPOS3DSbraTN+ue8zrcYVoSWBuNrD/mA+2SKAJ+hIzI22uN7gac6jBMnCdpPKRxS/V0KSZVQ==", "dependencies": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", "@mapbox/unitbezier": "^0.0.1", - "json-stringify-pretty-compact": "^3.0.0", + "json-stringify-pretty-compact": "^4.0.0", "minimist": "^1.2.8", "rw": "^1.3.3", "sort-object": "^3.0.3" @@ -4157,9 +4158,17 @@ "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==" }, "node_modules/@types/geojson": { - "version": "7946.0.11", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.11.tgz", - "integrity": "sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg==" + "version": "7946.0.14", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz", + "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==" + }, + "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": "*" + } }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", @@ -4194,6 +4203,14 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/leaflet": { + "version": "1.9.8", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz", + "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/lz-string": { "version": "1.3.34", "resolved": "https://registry.npmjs.org/@types/lz-string/-/lz-string-1.3.34.tgz", @@ -4201,14 +4218,14 @@ "dev": true }, "node_modules/@types/mapbox__point-geometry": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz", - "integrity": "sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==" + "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.1", - "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.1.tgz", - "integrity": "sha512-RpwGE57xM4a/YCH6XWzfcPVRPAu/jiCll0bEGRn6a4iubN2k4xZizskQoRj8fuXyo9BpI7F3bwz3uxs0pWbGNw==", + "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": "*", @@ -4236,9 +4253,9 @@ } }, "node_modules/@types/pbf": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.3.tgz", - "integrity": "sha512-hw6bDMjvm+QTvEC+pRLpnTknQXoPu8Fnf+A+zX9HB7j/7RfYajFSbdukabo3adPwvvEHhIMafQl0R0Tpej7clQ==" + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz", + "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==" }, "node_modules/@types/pg": { "version": "8.10.9", @@ -4350,9 +4367,9 @@ "integrity": "sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==" }, "node_modules/@types/supercluster": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.1.tgz", - "integrity": "sha512-dNK02GO1UApgo+1KpY4jOfm3uWb2eBCMB/VMM2y8cMoF49FiqVVcOawEg19wxYcaX7SvEs370incOuFtFGrVLg==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz", + "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==", "dependencies": { "@types/geojson": "*" } @@ -8792,9 +8809,9 @@ "dev": true }, "node_modules/json-stringify-pretty-compact": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz", - "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==" + "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/json-stringify-safe": { "version": "5.0.1", @@ -9158,9 +9175,9 @@ } }, "node_modules/maplibre-gl": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.5.0.tgz", - "integrity": "sha512-kPEBz6r1LBOZjUpFy+4wZU5Nvnkr60wBtYN/JD6N7oaA4Prpe21afYKxi1oWzSPSfspS1tWNF18GlpF2XcmNSA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.1.tgz", + "integrity": "sha512-DmHru9FTHCOngNHzIx9W2+MlUziYPfPxd2qjyeWwczBYNx2SDpmH394MkuCvSgnfUm5Zvs4NaYCqMu44jUga1Q==", "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", @@ -9169,12 +9186,13 @@ "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^1.3.1", "@mapbox/whoots-js": "^3.1.0", - "@maplibre/maplibre-gl-style-spec": "^19.3.2", - "@types/geojson": "^7946.0.11", - "@types/mapbox__point-geometry": "^0.1.2", - "@types/mapbox__vector-tile": "^1.3.1", - "@types/pbf": "^3.0.3", - "@types/supercluster": "^7.1.1", + "@maplibre/maplibre-gl-style-spec": "^20.1.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": "^2.2.4", "geojson-vt": "^3.2.1", "gl-matrix": "^3.4.3", @@ -10196,6 +10214,20 @@ "pathe": "^1.0.0" } }, + "node_modules/pmtiles": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.0.5.tgz", + "integrity": "sha512-K6NxVvW/vXE3052VZKF2ppyjdyhLx41FidR5yV8L/+El+lcMJpXS0vHBSPFmjdag5zkYv2XGDdq+3VjB2K7l6w==", + "dependencies": { + "@types/leaflet": "^1.9.8", + "fflate": "^0.8.0" + } + }, + "node_modules/pmtiles/node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==" + }, "node_modules/point-in-polygon": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz", @@ -15592,13 +15624,13 @@ "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==" }, "@maplibre/maplibre-gl-style-spec": { - "version": "19.3.2", - "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.2.tgz", - "integrity": "sha512-C2JAk64XUz9v78+bpyTk1zvgjjnDsB8CCjNumyAYdWK2dvdDtILzh1AGBMdS/llX3KaHjGYxAE5wOwfdwq4Pog==", + "version": "20.1.1", + "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.1.1.tgz", + "integrity": "sha512-z85ARNPCBI2Cs5cPOS3DSbraTN+ue8zrcYVoSWBuNrD/mA+2SKAJ+hIzI22uN7gac6jBMnCdpPKRxS/V0KSZVQ==", "requires": { "@mapbox/jsonlint-lines-primitives": "~2.0.2", "@mapbox/unitbezier": "^0.0.1", - "json-stringify-pretty-compact": "^3.0.0", + "json-stringify-pretty-compact": "^4.0.0", "minimist": "^1.2.8", "rw": "^1.3.3", "sort-object": "^3.0.3" @@ -17008,9 +17040,17 @@ "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==" }, "@types/geojson": { - "version": "7946.0.11", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.11.tgz", - "integrity": "sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg==" + "version": "7946.0.14", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz", + "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==" + }, + "@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==", + "requires": { + "@types/geojson": "*" + } }, "@types/istanbul-lib-coverage": { "version": "2.0.4", @@ -17045,6 +17085,14 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "@types/leaflet": { + "version": "1.9.8", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz", + "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==", + "requires": { + "@types/geojson": "*" + } + }, "@types/lz-string": { "version": "1.3.34", "resolved": "https://registry.npmjs.org/@types/lz-string/-/lz-string-1.3.34.tgz", @@ -17052,14 +17100,14 @@ "dev": true }, "@types/mapbox__point-geometry": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz", - "integrity": "sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==" + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz", + "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==" }, "@types/mapbox__vector-tile": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.1.tgz", - "integrity": "sha512-RpwGE57xM4a/YCH6XWzfcPVRPAu/jiCll0bEGRn6a4iubN2k4xZizskQoRj8fuXyo9BpI7F3bwz3uxs0pWbGNw==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz", + "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==", "requires": { "@types/geojson": "*", "@types/mapbox__point-geometry": "*", @@ -17087,9 +17135,9 @@ } }, "@types/pbf": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.3.tgz", - "integrity": "sha512-hw6bDMjvm+QTvEC+pRLpnTknQXoPu8Fnf+A+zX9HB7j/7RfYajFSbdukabo3adPwvvEHhIMafQl0R0Tpej7clQ==" + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz", + "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==" }, "@types/pg": { "version": "8.10.9", @@ -17187,9 +17235,9 @@ "integrity": "sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==" }, "@types/supercluster": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.1.tgz", - "integrity": "sha512-dNK02GO1UApgo+1KpY4jOfm3uWb2eBCMB/VMM2y8cMoF49FiqVVcOawEg19wxYcaX7SvEs370incOuFtFGrVLg==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz", + "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==", "requires": { "@types/geojson": "*" } @@ -20480,9 +20528,9 @@ "dev": true }, "json-stringify-pretty-compact": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz", - "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==" + "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==" }, "json-stringify-safe": { "version": "5.0.1", @@ -20767,9 +20815,9 @@ } }, "maplibre-gl": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.5.0.tgz", - "integrity": "sha512-kPEBz6r1LBOZjUpFy+4wZU5Nvnkr60wBtYN/JD6N7oaA4Prpe21afYKxi1oWzSPSfspS1tWNF18GlpF2XcmNSA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.1.tgz", + "integrity": "sha512-DmHru9FTHCOngNHzIx9W2+MlUziYPfPxd2qjyeWwczBYNx2SDpmH394MkuCvSgnfUm5Zvs4NaYCqMu44jUga1Q==", "requires": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", @@ -20778,12 +20826,13 @@ "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^1.3.1", "@mapbox/whoots-js": "^3.1.0", - "@maplibre/maplibre-gl-style-spec": "^19.3.2", - "@types/geojson": "^7946.0.11", - "@types/mapbox__point-geometry": "^0.1.2", - "@types/mapbox__vector-tile": "^1.3.1", - "@types/pbf": "^3.0.3", - "@types/supercluster": "^7.1.1", + "@maplibre/maplibre-gl-style-spec": "^20.1.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": "^2.2.4", "geojson-vt": "^3.2.1", "gl-matrix": "^3.4.3", @@ -21568,6 +21617,22 @@ "pathe": "^1.0.0" } }, + "pmtiles": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-3.0.5.tgz", + "integrity": "sha512-K6NxVvW/vXE3052VZKF2ppyjdyhLx41FidR5yV8L/+El+lcMJpXS0vHBSPFmjdag5zkYv2XGDdq+3VjB2K7l6w==", + "requires": { + "@types/leaflet": "^1.9.8", + "fflate": "^0.8.0" + }, + "dependencies": { + "fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==" + } + } + }, "point-in-polygon": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz", diff --git a/package.json b/package.json index e264fe923..27be7da03 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mapcomplete", - "version": "0.40.6", + "version": "0.41.0", "repository": "https://github.com/pietervdvn/MapComplete", "description": "A small website to edit OSM easily", "bugs": "https://github.com/pietervdvn/MapComplete/issues", @@ -40,7 +40,18 @@ "https://overpass.openstreetmap.ru/cgi/interpreter" ], "country_coder_host": "https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/latlon2country", - "nominatimEndpoint": "https://geocoding.geofabrik.de/b75350b1cfc34962ac49824fe5b582dc/" + "nominatimEndpoint": "https://geocoding.geofabrik.de/b75350b1cfc34962ac49824fe5b582dc/", + "protomaps": { + "api-key": "2af8b969a9e8b692", + "endpoint": "https://api.protomaps.com/tiles/", + "styles": [ + "https://api.protomaps.com/styles/v2/light.json", + "https://api.protomaps.com/styles/v2/dark.json", + "https://api.protomaps.com/styles/v2/white.json", + "https://api.protomaps.com/styles/v2/grayscale.json", + "https://api.protomaps.com/styles/v2/black.json" + ] + } }, "scripts": { "start": "npm run generate:layeroverview && npm run strt", @@ -145,7 +156,7 @@ "libphonenumber-js": "^1.10.8", "lz-string": "^1.4.4", "mangrove-reviews-typescript": "^1.1.0", - "maplibre-gl": "^3.5.0", + "maplibre-gl": "^4.1.1", "monaco-editor": "^0.46.0", "nano-markdown": "^1.2.2", "opening_hours": "^3.6.0", @@ -156,6 +167,7 @@ "pbf": "^3.2.1", "pg": "^8.11.3", "pic4carto": "^2.1.15", + "pmtiles": "^3.0.5", "prompt-sync": "^4.2.0", "qrcode-generator": "^1.4.4", "showdown": "^2.1.0", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index e250a690b..a883377cd 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -900,6 +900,10 @@ video { margin-bottom: 1rem; } +.mb-8 { + margin-bottom: 2rem; +} + .mt-4 { margin-top: 1rem; } @@ -964,10 +968,6 @@ video { margin-top: 2rem; } -.mb-8 { - margin-bottom: 2rem; -} - .-ml-6 { margin-left: -1.5rem; } @@ -1111,6 +1111,10 @@ video { height: fit-content; } +.h-96 { + height: 24rem; +} + .h-0 { height: 0px; } @@ -1552,6 +1556,10 @@ video { align-self: center; } +.self-stretch { + align-self: stretch; +} + .justify-self-start { justify-self: start; } diff --git a/src/Models/RasterLayerProperties.ts b/src/Models/RasterLayerProperties.ts index e489f76c4..6132d0626 100644 --- a/src/Models/RasterLayerProperties.ts +++ b/src/Models/RasterLayerProperties.ts @@ -7,6 +7,10 @@ export type EliCategory = | "qa" | "elevation" | "other" + +/** + * This class has grown beyond the point of only containing Raster Layers + */ export interface RasterLayerProperties { /** * The name of the imagery source @@ -19,7 +23,8 @@ export interface RasterLayerProperties { readonly url: string readonly category?: string | EliCategory - readonly type?: "vector" | string + readonly type?: "vector" | "raster" | string + readonly style?: string, readonly attribution?: { readonly url?: string diff --git a/src/UI/Map/MapLibreAdaptor.ts b/src/UI/Map/MapLibreAdaptor.ts index 0b9886443..c343ebc78 100644 --- a/src/UI/Map/MapLibreAdaptor.ts +++ b/src/UI/Map/MapLibreAdaptor.ts @@ -1,6 +1,7 @@ import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource" -import type { Map as MLMap } from "maplibre-gl" +import { Map as MLMap } from "maplibre-gl" import { Map as MlMap, SourceSpecification } from "maplibre-gl" +import maplibregl from "maplibre-gl"; import { RasterLayerPolygon } from "../../Models/RasterLayers" import { Utils } from "../../Utils" import { BBox } from "../../Logic/BBox" @@ -11,7 +12,7 @@ import { RasterLayerProperties } from "../../Models/RasterLayerProperties" import * as htmltoimage from "html-to-image" import RasterLayerHandler from "./RasterLayerHandler" import Constants from "../../Models/Constants" - +import { Protocol } from "pmtiles"; /** * The 'MapLibreAdaptor' bridges 'MapLibre' with the various properties of the `MapProperties` */ @@ -46,6 +47,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { readonly pitch: UIEventSource readonly useTerrain: Store + private static pmtilesInited = false /** * Functions that are called when one of those actions has happened * @private @@ -55,6 +57,10 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { private readonly _maplibreMap: Store constructor(maplibreMap: Store, state?: Partial) { + if(!MapLibreAdaptor.pmtilesInited){ + maplibregl.addProtocol("pmtiles",new Protocol().tile); + MapLibreAdaptor.pmtilesInited = true + } this._maplibreMap = maplibreMap this.location = state?.location ?? new UIEventSource(undefined) @@ -103,6 +109,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { } maplibreMap.addCallbackAndRunD((map) => { + map.on("load", () => { self.MoveMapToCurrentLoc(self.location.data) self.SetZoom(self.zoom.data) @@ -212,7 +219,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { } public static prepareWmsSource(layer: RasterLayerProperties): SourceSpecification { - return RasterLayerHandler.prepareWmsSource(layer) + return RasterLayerHandler.prepareSource(layer) } /** diff --git a/src/UI/Map/RasterLayerHandler.ts b/src/UI/Map/RasterLayerHandler.ts index 7123ca769..3a01d0a8e 100644 --- a/src/UI/Map/RasterLayerHandler.ts +++ b/src/UI/Map/RasterLayerHandler.ts @@ -1,8 +1,9 @@ -import { Map as MLMap, SourceSpecification } from "maplibre-gl" +import { Map as MLMap, RasterSourceSpecification, VectorTileSource } from "maplibre-gl" import { Store, Stores, UIEventSource } from "../../Logic/UIEventSource" import { RasterLayerPolygon } from "../../Models/RasterLayers" import { RasterLayerProperties } from "../../Models/RasterLayerProperties" import { Utils } from "../../Utils" +import { VectorSourceSpecification } from "@maplibre/maplibre-gl-style-spec" class SingleBackgroundHandler { // Value between 0 and 1.0 @@ -17,6 +18,7 @@ class SingleBackgroundHandler { */ public static readonly DEACTIVATE_AFTER = 60 private fadeStep = 0.1 + constructor( map: Store, targetLayer: RasterLayerPolygon, @@ -75,6 +77,7 @@ class SingleBackgroundHandler { this.fadeIn() } } + private async awaitStyleIsLoaded(): Promise { const map = this._map.data if (!map) { @@ -85,11 +88,11 @@ class SingleBackgroundHandler { } } - private async enable(){ + private async enable() { let ttl = 15 await this.awaitStyleIsLoaded() - while(!this.tryEnable() && ttl > 0){ - ttl --; + while (!this.tryEnable() && ttl > 0) { + ttl-- await Utils.waitFor(250) } } @@ -110,9 +113,10 @@ class SingleBackgroundHandler { // The background layer is already an OSM-based map or another map, so we don't want anything from the baselayer addLayerBeforeId = undefined } + if (!map.getSource(background.id)) { try { - map.addSource(background.id, RasterLayerHandler.prepareWmsSource(background)) + map.addSource(background.id, RasterLayerHandler.prepareSource(background)) } catch (e) { return false } @@ -122,21 +126,25 @@ class SingleBackgroundHandler { .getStyle() .layers.find((l) => l.id.startsWith("mapcomplete_"))?.id - map.addLayer( - { - id: background.id, - type: "raster", - source: background.id, - paint: { - "raster-opacity": 0, - }, - }, - addLayerBeforeId - ) + if (background.type === "vector") { + map.setStyle(background["style"]) + } else { - this.opacity.addCallbackAndRun((o) => { - map.setPaintProperty(background.id, "raster-opacity", o) - }) + map.addLayer( + { + id: background.id, + type: "raster", + source: background.id, + paint: { + "raster-opacity": 0 + } + }, + addLayerBeforeId + ) + this.opacity.addCallbackAndRun((o) => { + map.setPaintProperty(background.id, "raster-opacity", o) + }) + } } return true } @@ -168,7 +176,14 @@ export default class RasterLayerHandler { }) } - public static prepareWmsSource(layer: RasterLayerProperties): SourceSpecification { + public static prepareSource(layer: RasterLayerProperties): RasterSourceSpecification | VectorSourceSpecification { + if (layer.type === "vector") { + const vs: VectorSourceSpecification = { + type: "vector", + url: layer.url + } + return vs + } return { type: "raster", // use the tiles option to specify a 256WMS tile source URL @@ -178,7 +193,7 @@ export default class RasterLayerHandler { minzoom: layer["min_zoom"] ?? 1, maxzoom: layer["max_zoom"] ?? 25, // Bit of a hack, but seems to work - scheme: layer.url.includes("{-y}") ? "tms" : "xyz", + scheme: layer.url.includes("{-y}") ? "tms" : "xyz" } } @@ -192,7 +207,7 @@ export default class RasterLayerHandler { "{width}": "" + size, "{height}": "" + size, "{zoom}": "{z}", - "{-y}": "{y}", + "{-y}": "{y}" } for (const key in toReplace) { diff --git a/src/assets/global-raster-layers.json b/src/assets/global-raster-layers.json index 7099d062a..17b4538d3 100644 --- a/src/assets/global-raster-layers.json +++ b/src/assets/global-raster-layers.json @@ -88,7 +88,8 @@ "text": "Stamen/Stadiamaps", "url": "https://stadiamaps.com/" } - }, { + }, + { "name": "Stamen Watercolor", "url": "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg?key=14c5a900-7137-42f7-9cb9-fff0f4696f75", "category": "osmbasedmap", @@ -142,8 +143,6 @@ "url": "https://carto.com/" } }, - - { "url": "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json?key=eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfdW4ybmhlbTciLCJqdGkiOiIwZGQxNjJmNyJ9.uATJpa6QcrtXhph3Bzvk2nX3QsxEw-Q8dj5khUG6hGk", "name": "Carto Positron (no labels)", @@ -176,6 +175,66 @@ "text": "CARTO", "url": "https://carto.com/" } + }, + { + "url": "pmtiles://https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=2af8b969a9e8b692", + "style": "https://api.protomaps.com/styles/v2/white.json?key=2af8b969a9e8b692", + "id": "protomaps.white", + "name": "Protomaps White", + "type": "vector", + "category": "osmbasedmap", + "attribution": { + "text": "Protomaps", + "url": "https://protomaps.com/" + } + }, + { + "url": "pmtiles://https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=2af8b969a9e8b692", + "style": "https://api.protomaps.com/styles/v2/light.json?key=2af8b969a9e8b692", + "id": "protomaps.light", + "name": "Protomaps Light", + "type": "vector", + "category": "osmbasedmap", + "attribution": { + "text": "Protomaps", + "url": "https://protomaps.com/" + } + }, + { + "url": "pmtiles://https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=2af8b969a9e8b692", + "style": "https://api.protomaps.com/styles/v2/grayscale.json?key=2af8b969a9e8b692", + "id": "protomaps.grayscale", + "name": "Protomaps Grayscale", + "type": "vector", + "category": "osmbasedmap", + "attribution": { + "text": "Protomaps", + "url": "https://protomaps.com/" + } + }, + { + "url": "pmtiles://https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=2af8b969a9e8b692", + "style": "https://api.protomaps.com/styles/v2/dark.json?key=2af8b969a9e8b692", + "id": "protomaps.dark", + "name": "Protomaps Dark", + "type": "vector", + "category": "osmbasedmap", + "attribution": { + "text": "Protomaps", + "url": "https://protomaps.com/" + } + }, + { + "url": "pmtiles://https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=2af8b969a9e8b692", + "style": "https://api.protomaps.com/styles/v2/black.json?key=2af8b969a9e8b692", + "id": "protomaps.black", + "name": "Protomaps Black", + "type": "vector", + "category": "osmbasedmap", + "attribution": { + "text": "Protomaps", + "url": "https://protomaps.com/" + } } ] } diff --git a/test.html b/test.html index 107992b16..1ecb87c01 100644 --- a/test.html +++ b/test.html @@ -2,9 +2,6 @@ Small tests - - -