From ca3a8daf534d252ad5a6f27fdb0fff441c71b24e Mon Sep 17 00:00:00 2001 From: Jonathan Lurie Date: Thu, 15 Aug 2024 11:17:34 +0200 Subject: [PATCH 1/5] Updated MapLibre version and adjusted MaptilerGeolocateControl --- CHANGELOG.md | 23 +++++++++++++++++ package-lock.json | 46 ++++++++++++++++++--------------- package.json | 6 ++--- src/MaptilerGeolocateControl.ts | 14 +++++----- 4 files changed, 58 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2328747..5f6c2a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,28 @@ # MapTiler SDK Changelog +## NEXT +### Bug Fixes +- Updating from MapLibre v4.4.1 to v4.5.2, fixing the following bugs: + - Fix (de)serialization of extends of built-ins (currently only AjaxError) not working correctly in web_worker_transfer. Also refactored related web_worker_transfer code and added more tests ([#4024](https://github.com/maplibre/maplibre-gl-js/pull/4211)) + - Fix lag on fast map zoom ([#4366](https://github.com/maplibre/maplibre-gl-js/pull/4366)) + - Fix unguarded read access to possibly undefined object ([#4431](https://github.com/maplibre/maplibre-gl-js/pull/4431)) + - Fix remove hash string when map is removed ([#4427](https://github.com/maplibre/maplibre-gl-js/pull/4427)) + - Fix GeolocateControl may be added twice when calling addControl/removeControl/addControl rapidly ([#4454](https://github.com/maplibre/maplibre-gl-js/pull/4454)) + - Fix `style.loadURL` abort error being logged when removing style ([#4425](https://github.com/maplibre/maplibre-gl-js/pull/4425)) + - Fix vector tiles not loading when html is opened via "resource://android" (i.e., the assets folder) in GeckoView on Android ([#4451](https://github.com/maplibre/maplibre-gl-js/pull/4451)) + - Fix camera being able to move into 3D terrain ([#1542](https://github.com/maplibre/maplibre-gl-js/issues/1542)) +### New Features +- Updating from MapLibre v4.4.1 to v4.5.2, adding the following features: + - Add sky implementation according to spec (https://github.com/maplibre/maplibre-gl-js/pull/3645) + - Allow trackpad pinch gestures to break through the `cooperativeGestures` setting, bringing it in line with other embedded map behaviours, such as Google Maps and Mapbox. ([#4465](https://github.com/maplibre/maplibre-gl-js/pull/4465)) + - Expose projection matrix parameters ([#3136](https://github.com/maplibre/maplibre-gl-js/pull/3136)) + - Add option to position markers at subpixel coordinates to prevent markers jumping on `moveend` ([#4458](https://github.com/maplibre/maplibre-gl-js/pull/4458)) + - Emit events when the cooperative gestures option has prevented a gesture. ([#4470](https://github.com/maplibre/maplibre-gl-js/pull/4470)) + - Enable anisotropic filtering only when the pitch is greater than 20 degrees to preserve image sharpness on flat or slightly tilted maps. +### Others +- Updating from MapLibre v4.4.1 to v4.5.2 +- Updating `MapTilerGeolocateControl` to match latest Maplibre update + ## 2.2.2 ### Bug Fixes - No longer using named imports from Maplibre (https://github.com/maptiler/maptiler-sdk-js/issues/99) diff --git a/package-lock.json b/package-lock.json index 41c9276..5d3d2c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@maptiler/client": "^1.8.1", "events": "^3.3.0", "js-base64": "^3.7.4", - "maplibre-gl": "4.4.1", + "maplibre-gl": "^4.5.2", "uuid": "^9.0.0", "xmldom": "^0.6.0" }, @@ -1159,11 +1159,6 @@ "@types/geojson": "*" } }, - "node_modules/@types/junit-report-builder": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/junit-report-builder/-/junit-report-builder-3.0.2.tgz", - "integrity": "sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==" - }, "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", @@ -2007,9 +2002,9 @@ } }, "node_modules/earcut": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", - "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz", + "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==" }, "node_modules/eastasianwidth": { "version": "0.2.0", @@ -2174,9 +2169,9 @@ } }, "node_modules/geojson-vt": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz", - "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==" + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz", + "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==" }, "node_modules/get-func-name": { "version": "2.0.2", @@ -2520,9 +2515,9 @@ } }, "node_modules/maplibre-gl": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.4.1.tgz", - "integrity": "sha512-tD+wn8qWSLCGhABKBrbewmgFfyopZDz+fkYXeOM8vdBhnf126DvMPyaYGGoKvoF4QuswCsgikETd2c39wK+OQw==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.5.2.tgz", + "integrity": "sha512-vlWL9EY2bSGg5FAt0mKPfYqlfX15uLW5D3kKv4Xjn54nIVn01MKdfUJMAVIr+8fXVqfSX6c095Iy5XnV+T76kQ==", "dependencies": { "@mapbox/geojson-rewind": "^0.5.2", "@mapbox/jsonlint-lines-primitives": "^2.0.2", @@ -2534,22 +2529,21 @@ "@maplibre/maplibre-gl-style-spec": "^20.3.0", "@types/geojson": "^7946.0.14", "@types/geojson-vt": "3.2.5", - "@types/junit-report-builder": "^3.0.2", "@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", + "earcut": "^3.0.0", + "geojson-vt": "^4.0.2", "gl-matrix": "^3.4.3", "global-prefix": "^3.0.0", "kdbush": "^4.0.2", "murmurhash-js": "^1.0.0", - "pbf": "^3.2.1", + "pbf": "^3.3.0", "potpack": "^2.0.0", - "quickselect": "^2.0.0", + "quickselect": "^3.0.0", "supercluster": "^8.0.1", - "tinyqueue": "^2.0.3", + "tinyqueue": "^3.0.0", "vt-pbf": "^3.1.3" }, "engines": { @@ -2560,6 +2554,16 @@ "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1" } }, + "node_modules/maplibre-gl/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/maplibre-gl/node_modules/tinyqueue": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz", + "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==" + }, "node_modules/marked": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", diff --git a/package.json b/package.json index da4ccdd..9399e19 100644 --- a/package.json +++ b/package.json @@ -53,15 +53,15 @@ "terser": "^5.17.1", "typedoc": "^0.24.8", "typescript": "^5.1.6", - "vitest": "^0.34.2", "vite": "^5.3.4", - "vite-plugin-dts": "^4.0.0-beta.0" + "vite-plugin-dts": "^4.0.0-beta.0", + "vitest": "^0.34.2" }, "dependencies": { "@maptiler/client": "^1.8.1", "events": "^3.3.0", "js-base64": "^3.7.4", - "maplibre-gl": "4.4.1", + "maplibre-gl": "^4.5.2", "uuid": "^9.0.0", "xmldom": "^0.6.0" } diff --git a/src/MaptilerGeolocateControl.ts b/src/MaptilerGeolocateControl.ts index 593f84a..43c04c0 100644 --- a/src/MaptilerGeolocateControl.ts +++ b/src/MaptilerGeolocateControl.ts @@ -74,13 +74,12 @@ export class MaptilerGeolocateControl extends GeolocateControl { }); }; - _setupUI = (supported: boolean) => { - this.lastUpdatedCenter = this._map.getCenter(); - - this._container.addEventListener("contextmenu", (e: MouseEvent) => e.preventDefault()); - this._geolocateButton = DOMcreate("button", "maplibregl-ctrl-geolocate", this._container); - DOMcreate("span", "maplibregl-ctrl-icon", this._geolocateButton).setAttribute("aria-hidden", "true"); - this._geolocateButton.type = "button"; + _finishSetupUI = (supported: boolean) => { + // this method is called asynchronously during onAdd + if (!this._map) { + // control has since been removed + return; + } if (supported === false) { // warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.'); @@ -90,6 +89,7 @@ export class MaptilerGeolocateControl extends GeolocateControl { this._geolocateButton.setAttribute("aria-label", title); } else { const title = this._map._getUIString("GeolocateControl.FindMyLocation"); + this._geolocateButton.disabled = false; this._geolocateButton.title = title; this._geolocateButton.setAttribute("aria-label", title); } From e3048050e647048ac465a51275835903982d2102 Mon Sep 17 00:00:00 2001 From: Jonathan Lurie Date: Thu, 15 Aug 2024 11:18:26 +0200 Subject: [PATCH 2/5] removed the zoomAdjust unnecesary value in minimap --- src/Minimap.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Minimap.ts b/src/Minimap.ts index 2c6258a..b1ce5b5 100644 --- a/src/Minimap.ts +++ b/src/Minimap.ts @@ -194,7 +194,7 @@ export default class Minimap implements IControl { this.#container.style.setProperty(key, value); } this.#options.container = this.#container; - this.#options.zoom = parentMap.getZoom() + this.#options.zoomAdjust ?? -4; + this.#options.zoom = parentMap.getZoom() + this.#options.zoomAdjust; this.map = new SDKMap(this.#options); // NOTE: For some reason the DOM doesn't properly update it's size in time @@ -322,7 +322,7 @@ export default class Minimap implements IControl { const from = which === "parent" ? this.#parentMap : this.map; const to = which === "parent" ? this.map : this.#parentMap; const center = from.getCenter(); - const zoom = from.getZoom() + (this.#options.zoomAdjust ?? -4) * (which === "parent" ? 1 : -1); + const zoom = from.getZoom() + this.#options.zoomAdjust * (which === "parent" ? 1 : -1); const bearing = from.getBearing(); const pitch = from.getPitch(); to.jumpTo({ From e5f27fa9b0d3a853bff4f5635ad1df07b9646639 Mon Sep 17 00:00:00 2001 From: Jonathan Lurie Date: Thu, 15 Aug 2024 15:25:37 +0200 Subject: [PATCH 3/5] Adding sky examples --- demos/sky_day.html | 144 ++++++++++++++++++++++++++++++++++++++++++ demos/sky_night.html | 146 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 290 insertions(+) create mode 100644 demos/sky_day.html create mode 100644 demos/sky_night.html diff --git a/demos/sky_day.html b/demos/sky_day.html new file mode 100644 index 0000000..16c3781 --- /dev/null +++ b/demos/sky_day.html @@ -0,0 +1,144 @@ + + + MapTiler JS SDK example + + + + + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/demos/sky_night.html b/demos/sky_night.html new file mode 100644 index 0000000..a6b95ee --- /dev/null +++ b/demos/sky_night.html @@ -0,0 +1,146 @@ + + + MapTiler JS SDK example + + + + + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + + + + \ No newline at end of file From ca1820859b6675160da05a9b5f5a8ee15b99a16e Mon Sep 17 00:00:00 2001 From: Jonathan Lurie Date: Thu, 15 Aug 2024 16:20:46 +0200 Subject: [PATCH 4/5] Now passing the options to the control --- src/MaptilerNavigationControl.ts | 37 +++++++++++++++++--------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/MaptilerNavigationControl.ts b/src/MaptilerNavigationControl.ts index 04a7d65..4684c24 100644 --- a/src/MaptilerNavigationControl.ts +++ b/src/MaptilerNavigationControl.ts @@ -1,3 +1,4 @@ +import type { NavigationControlOptions } from "maplibre-gl"; import { NavigationControl } from "./MLAdapters/NavigationControl"; type HTMLButtonElementPlus = HTMLButtonElement & { @@ -5,31 +6,33 @@ type HTMLButtonElementPlus = HTMLButtonElement & { }; export class MaptilerNavigationControl extends NavigationControl { - constructor() { + constructor(options: NavigationControlOptions = {}) { super({ - showCompass: true, - showZoom: true, - visualizePitch: true, + showCompass: options.showCompass ?? true, + showZoom: options.showZoom ?? true, + visualizePitch: options.visualizePitch ?? true, }); // Removing the default click event - this._compass.removeEventListener("click", (this._compass as HTMLButtonElementPlus).clickFunction); + if (this._compass) { + this._compass.removeEventListener("click", (this._compass as HTMLButtonElementPlus).clickFunction); - // Adding custom click event - this._compass.addEventListener("click", (e) => { - { - const currentPitch = this._map.getPitch(); - if (currentPitch === 0) { - this._map.easeTo({ pitch: Math.min(this._map.getMaxPitch(), 80) }); - } else { - if (this.options.visualizePitch) { - this._map.resetNorthPitch({}, { originalEvent: e }); + // Adding custom click event + this._compass.addEventListener("click", (e) => { + { + const currentPitch = this._map.getPitch(); + if (currentPitch === 0) { + this._map.easeTo({ pitch: Math.min(this._map.getMaxPitch(), 80) }); } else { - this._map.resetNorth({}, { originalEvent: e }); + if (this.options.visualizePitch) { + this._map.resetNorthPitch({}, { originalEvent: e }); + } else { + this._map.resetNorth({}, { originalEvent: e }); + } } } - } - }); + }); + } } /** From 348c2d3787c401546cec41678838c8518c3ca17a Mon Sep 17 00:00:00 2001 From: Jonathan Lurie Date: Fri, 16 Aug 2024 10:49:44 +0200 Subject: [PATCH 5/5] Updated xmldom dep --- package-lock.json | 20 ++++++++++---------- package.json | 6 +++--- test/converters/xml.test.ts | 2 +- vite.config-es.ts | 1 - 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5d3d2c2..4560aef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,11 @@ "license": "BSD-3-Clause", "dependencies": { "@maptiler/client": "^1.8.1", + "@xmldom/xmldom": "^0.8.10", "events": "^3.3.0", "js-base64": "^3.7.4", "maplibre-gl": "^4.5.2", - "uuid": "^9.0.0", - "xmldom": "^0.6.0" + "uuid": "^9.0.0" }, "devDependencies": { "@biomejs/biome": "1.8.3", @@ -1396,6 +1396,14 @@ "integrity": "sha512-ep4mF1IVnX/pYaNwxwOpJHyBtOMKWoKZMbnUyd+z0udqIxLUh7YCCd/JfDna8aUrmnG9SFORyIq2HzEATRrQsg==", "dev": true }, + "node_modules/@xmldom/xmldom": { + "version": "0.8.10", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz", + "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/@zeit/schemas": { "version": "2.36.0", "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.36.0.tgz", @@ -4026,14 +4034,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/xmldom": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.6.0.tgz", - "integrity": "sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg==", - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index 9399e19..433e54e 100644 --- a/package.json +++ b/package.json @@ -55,14 +55,14 @@ "typescript": "^5.1.6", "vite": "^5.3.4", "vite-plugin-dts": "^4.0.0-beta.0", - "vitest": "^0.34.2" + "vitest": "^0.34.2", + "@xmldom/xmldom": "^0.8.10" }, "dependencies": { "@maptiler/client": "^1.8.1", "events": "^3.3.0", "js-base64": "^3.7.4", "maplibre-gl": "^4.5.2", - "uuid": "^9.0.0", - "xmldom": "^0.6.0" + "uuid": "^9.0.0" } } diff --git a/test/converters/xml.test.ts b/test/converters/xml.test.ts index e1a4ea1..b175168 100644 --- a/test/converters/xml.test.ts +++ b/test/converters/xml.test.ts @@ -2,7 +2,7 @@ import fs from "fs"; import { promisify } from "util"; import { test, expect } from "vitest"; import { gpx, kml } from "../../src/converters"; -import { DOMParser, XMLSerializer } from "xmldom"; +import { DOMParser, XMLSerializer } from "@xmldom/xmldom"; const readDir = promisify(fs.readdir); const readFile = promisify(fs.readFile); diff --git a/vite.config-es.ts b/vite.config-es.ts index f0b8035..6437f92 100644 --- a/vite.config-es.ts +++ b/vite.config-es.ts @@ -35,7 +35,6 @@ export default defineConfig({ "events", "js-base64", "geojson-validation", - "xmldom", ], output: { // Provide global variables to use in the UMD build