From ea3958932eb1bbe0f854cfa598f42f620e92b98a Mon Sep 17 00:00:00 2001 From: Brandon Liu Date: Wed, 8 May 2024 11:13:18 +0800 Subject: [PATCH] Remove ol add local sprites checkbox (#242) * remove openlayers; add local sprites UI * remove OL as this lets us focus this repo on the MapLibre style for the majority of users. * add UI for using local sprites instead of spritesheet from GitHub pages. * onClick -> onChange --- app/package-lock.json | 184 ----------------------------------- app/package.json | 3 - app/src/MapViewComponent.tsx | 109 ++++++++------------- app/vite.config.ts | 21 +++- 4 files changed, 60 insertions(+), 257 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 4f307c5b..feb2ce74 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -9,9 +9,6 @@ "version": "0.0.0", "dependencies": { "maplibre-gl": "^4.1.3", - "ol": "^8.1.0", - "ol-mapbox-style": "^12.0.0", - "ol-pmtiles": "^0.2.0", "pixelmatch": "^5.3.0", "pmtiles": "^3.0.5", "react": "^18.2.0", @@ -974,65 +971,6 @@ "node": ">= 0.6" } }, - "node_modules/@mapbox/mapbox-gl-style-spec": { - "version": "13.28.0", - "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz", - "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==", - "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/mapbox-gl-style-spec/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/@mapbox/mapbox-gl-style-spec/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/@mapbox/mapbox-gl-style-spec/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/@mapbox/mapbox-gl-style-spec/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/@mapbox/mapbox-gl-style-spec/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/@mapbox/point-geometry": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", @@ -1082,11 +1020,6 @@ "gl-style-validate": "dist/gl-style-validate.mjs" } }, - "node_modules/@petamoriken/float16": { - "version": "3.8.3", - "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.3.tgz", - "integrity": "sha512-an2OZ7/6er9Jja8EDUvU/tmtGIutdlb6LwXOwgjzoCjDRAsUd8sRZMBjoPEy78Xa9iOp+Kglk2CHgVwZuZbWbw==" - }, "node_modules/@polka/url": { "version": "1.0.0-next.23", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz", @@ -1519,11 +1452,6 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "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/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -1689,23 +1617,6 @@ "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==" }, - "node_modules/geotiff": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz", - "integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==", - "dependencies": { - "@petamoriken/float16": "^3.4.7", - "lerc": "^3.0.0", - "pako": "^2.0.4", - "parse-headers": "^2.0.2", - "quick-lru": "^6.1.1", - "web-worker": "^1.2.0", - "xml-utils": "^1.0.2" - }, - "engines": { - "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", @@ -1890,11 +1801,6 @@ "node": ">=0.10.0" } }, - "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/local-pkg": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz", @@ -1948,11 +1854,6 @@ "node": ">=12" } }, - "node_modules/mapbox-to-css-font": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz", - "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA==" - }, "node_modules/maplibre-gl": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.3.tgz", @@ -2064,62 +1965,6 @@ "node": ">=0.10.0" } }, - "node_modules/ol": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/ol/-/ol-8.1.0.tgz", - "integrity": "sha512-cx3SH2plpFS9fM8pp1nCypgQXGJD7Mcb1E3mEySmy5XEw1DUEo+kkNzgtAZz5qupekqi7aU9iBJEjCoMfqvO2Q==", - "dependencies": { - "earcut": "^2.2.3", - "geotiff": "^2.0.7", - "pbf": "3.2.1", - "rbush": "^3.0.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/openlayers" - } - }, - "node_modules/ol-mapbox-style": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-12.0.0.tgz", - "integrity": "sha512-rrIFh1BuXdMfl9XwKobpz7sKLAVchseowQlGdgN3WRbCnovSdTeC5RSw1lgnC334kY74y9CQ7cY2WOR5nbnpHg==", - "dependencies": { - "@mapbox/mapbox-gl-style-spec": "^13.23.1", - "mapbox-to-css-font": "^2.4.1" - }, - "peerDependencies": { - "ol": "8.x || 7.x" - } - }, - "node_modules/ol-pmtiles": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/ol-pmtiles/-/ol-pmtiles-0.2.0.tgz", - "integrity": "sha512-PPDc77kJ+GlDNFjCcoAQ5MTHQTDfxuBN4fL1x/TXnAEPmUT/DAyQsHZZtU3PXnw2NimlgCX7v/Plr9SVivPpAQ==", - "dependencies": { - "pmtiles": "^2.10.0" - }, - "peerDependencies": { - "ol": ">=7.3.0" - } - }, - "node_modules/ol-pmtiles/node_modules/pmtiles": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/pmtiles/-/pmtiles-2.11.0.tgz", - "integrity": "sha512-dU9SzzaqmCGpdEuTnIba6bDHT6j09ZJFIXxwGpvkiEnce3ZnBB1VKt6+EOmJGueriweaZLAMTUmKVElU2CBe0g==", - "dependencies": { - "fflate": "^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/pathe": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz", @@ -2272,30 +2117,11 @@ "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==" }, - "node_modules/quick-lru": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz", - "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "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": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -2839,11 +2665,6 @@ "pbf": "^3.2.1" } }, - "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/why-is-node-running": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz", @@ -2860,11 +2681,6 @@ "node": ">=8" } }, - "node_modules/xml-utils": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.7.0.tgz", - "integrity": "sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw==" - }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/app/package.json b/app/package.json index 8dfab240..0eb2f09f 100644 --- a/app/package.json +++ b/app/package.json @@ -12,9 +12,6 @@ }, "dependencies": { "maplibre-gl": "^4.1.3", - "ol": "^8.1.0", - "ol-mapbox-style": "^12.0.0", - "ol-pmtiles": "^0.2.0", "pixelmatch": "^5.3.0", "pmtiles": "^3.0.5", "react": "^18.2.0", diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx index ec6fa8b8..a0d7266e 100644 --- a/app/src/MapViewComponent.tsx +++ b/app/src/MapViewComponent.tsx @@ -1,9 +1,6 @@ import maplibregl from "maplibre-gl"; import { MapGeoJSONFeature, StyleSpecification } from "maplibre-gl"; import "maplibre-gl/dist/maplibre-gl.css"; -import { Map as OpenLayersMap, View } from "ol"; -import VectorTile from "ol/layer/VectorTile"; -import "ol/ol.css"; import * as pmtiles from "pmtiles"; import { FormEvent, @@ -19,11 +16,6 @@ import layers from "../../styles/src/index.ts"; import { LayerSpecification } from "@maplibre/maplibre-gl-style-spec"; -import { stylefunction } from "ol-mapbox-style"; -// @ts-ignore -import { PMTilesVectorSource } from "ol-pmtiles"; -import { useGeographic } from "ol/proj"; - import { FileSource, PMTiles, Protocol } from "pmtiles"; import { createHash, parseHash } from "./hash"; @@ -76,6 +68,7 @@ export const isValidPMTiles = (tiles?: string): boolean => { function getMaplibreStyle( theme: string, + localSprites: boolean, tiles?: string, npmLayers?: LayerSpecification[], droppedArchive?: PMTiles, @@ -95,6 +88,13 @@ function getMaplibreStyle( tilesWithProtocol = tiles; } style.layers = []; + + if (localSprites) { + // style.sprite = `${location.protocol}//${location.host}/${theme}`; + } else { + // style.sprite = `https://protomaps.github.io/basemaps-assets/sprites/v3/${theme}`; + } + style.glyphs = "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf"; @@ -128,9 +128,8 @@ function getMaplibreStyle( } function StyleJsonPane(props: { theme: string }) { - // TODO: wrong structure for OpenLayers const stringified = JSON.stringify( - getMaplibreStyle(props.theme, "https://example.com/tiles.json"), + getMaplibreStyle(props.theme, false, "https://example.com/tiles.json"), null, 4, ); @@ -152,6 +151,7 @@ function StyleJsonPane(props: { theme: string }) { function MapLibreView(props: { theme: string; + localSprites: boolean; tiles?: string; npmLayers: LayerSpecification[]; droppedArchive?: PMTiles; @@ -174,7 +174,12 @@ function MapLibreView(props: { const map = new maplibregl.Map({ hash: "map", container: "map", - style: getMaplibreStyle(props.theme, props.tiles, props.npmLayers), + style: getMaplibreStyle( + props.theme, + props.localSprites, + props.tiles, + props.npmLayers, + ), }); map.addControl(new maplibregl.NavigationControl()); @@ -218,7 +223,7 @@ function MapLibreView(props: { maplibregl.removeProtocol("pmtiles"); map.remove(); }; - }, [props.npmLayers, props.theme, props.tiles]); + }, [props.npmLayers, props.theme, props.tiles, props.localSprites]); useEffect(() => { if (protocolRef.current) { @@ -252,6 +257,7 @@ function MapLibreView(props: { mapRef.current.setStyle( getMaplibreStyle( props.theme, + props.localSprites, props.tiles, props.npmLayers, props.droppedArchive, @@ -261,44 +267,13 @@ function MapLibreView(props: { ); } })(); - }, [props.tiles, props.theme, props.npmLayers, props.droppedArchive]); - - return
; -} - -// TODO: does not sync map hash state -function OpenLayersView(props: { theme: string; tiles?: string }) { - useEffect(() => { - useGeographic(); - - const layer = new VectorTile({ - declutter: true, - source: new PMTilesVectorSource({ - url: "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles", - attributions: ["© OpenStreetMap"], - }), - style: null, - }); - - stylefunction( - layer, - { - version: "8", - layers: layers("protomaps", props.theme), - sources: { protomaps: { type: "vector" } }, - }, - "protomaps", - ); - - new OpenLayersMap({ - target: "map", - layers: [layer], - view: new View({ - center: [0, 0], - zoom: 0, - }), - }); - }, [props.theme]); + }, [ + props.tiles, + props.theme, + props.localSprites, + props.npmLayers, + props.droppedArchive, + ]); return
; } @@ -308,8 +283,8 @@ export default function MapViewComponent() { const hash = parseHash(location.hash); const [theme, setTheme] = useState(hash.theme || "light"); const [tiles, setTiles] = useState(hash.tiles); - const [renderer, setRenderer] = useState( - hash.renderer || "maplibregl", + const [localSprites, setLocalSprites] = useState( + hash.local_sprites === "true", ); const [showStyleJson, setShowStyleJson] = useState(false); const [publishedStyleVersion, setPublishedStyleVersion] = useState< @@ -323,7 +298,7 @@ export default function MapViewComponent() { const record = { theme: theme, tiles: tiles, - renderer: renderer, + local_sprites: localSprites ? "true" : undefined, npm_version: publishedStyleVersion, }; location.hash = createHash(location.hash, record); @@ -419,10 +394,13 @@ export default function MapViewComponent() { - + setLocalSprites(e.currentTarget.checked)} + /> + {knownNpmVersions.length === 0 ? (
diff --git a/app/vite.config.ts b/app/vite.config.ts index 17d362c3..0107cdd7 100644 --- a/app/vite.config.ts +++ b/app/vite.config.ts @@ -3,14 +3,29 @@ import sirv from "sirv"; import react from "@vitejs/plugin-react"; import { resolve } from "path"; -const serve = sirv("../tiles", { dev: true }); +const serveTiles = sirv("../tiles", { dev: true }); const servePmtilesInTilesDir = () => ({ name: "serve-pmtiles-in-tiles-dir", configureServer(server) { server.middlewares.use((req, res, next) => { if (req.url.split("?")[0].endsWith(".pmtiles")) { - return serve(req, res); + return serveTiles(req, res); + } else { + next(); + } + }); + }, +}); + +const serveSprites = sirv("../sprites/dist", { dev: true }); + +const serveSpritesInSpritesDir = () => ({ + name: "serve-sprites-in-sprites-dir", + configureServer(server) { + server.middlewares.use((req, res, next) => { + if (req.url.endsWith(".png") || req.url.endsWith(".json")) { + return serveSprites(req, res); } else { next(); } @@ -20,7 +35,7 @@ const servePmtilesInTilesDir = () => ({ // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react(), servePmtilesInTilesDir()], + plugins: [react(), servePmtilesInTilesDir(), serveSpritesInSpritesDir()], build: { rollupOptions: { input: {