feat: upgraded maplibre-gl-js to v3 (#36)

.changeset/popular-numbers-juggle.md

@@ -0,0 +1,5 @@
+---
+"@watergis/maplibre-gl-export": major
+---
+
+[**breaking change**] feat: upgraded maplibre-gl-js to v3

packages/maplibre-gl-export/package.json

@@ -50,25 +50,25 @@
 	"homepage": "https://github.com/watergis/maplibre-gl-export/tree/main/packages/maplibre-gl-export#readme",
 	"devDependencies": {
 		"@types/geojson": "^7946.0.10",
-		"@types/node": "^18.15.11",
-		"@typescript-eslint/eslint-plugin": "^5.58.0",
-		"@typescript-eslint/parser": "^5.58.0",
+		"@types/node": "^20.2.4",
+		"@typescript-eslint/eslint-plugin": "^5.59.7",
+		"@typescript-eslint/parser": "^5.59.7",
 		"autoprefixer": "^10.4.14",
-		"eslint": "^8.38.0",
+		"eslint": "^8.41.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-import": "^2.27.5",
 		"path": "^0.12.7",
-		"postcss": "^8.4.21",
+		"postcss": "^8.4.23",
 		"postcss-cli": "^10.1.0",
-		"prettier": "^2.8.7",
-		"sass": "^1.62.0",
-		"sass-loader": "^13.2.2",
+		"prettier": "^2.8.8",
+		"sass": "^1.62.1",
+		"sass-loader": "^13.3.0",
 		"typescript": "^5.0.4",
-		"vite": "^4.2.1"
+		"vite": "^4.3.8"
 	},
 	"dependencies": {
 		"js-loading-overlay": "^1.2.0",
 		"jspdf": "^2.5.1",
-		"maplibre-gl": "^2.4.0"
+		"maplibre-gl": "^3.0.0"
 	}
 }

packages/maplibre-gl-export/src/lib/export-control.ts

@@ -90,8 +90,8 @@ export default class MaplibreExportControl implements IControl {
 	public onAdd(map: MaplibreMap): HTMLElement {
 		this.map = map;
 		this.controlContainer = document.createElement('div');
-		this.controlContainer.classList.add('mapboxgl-ctrl');
-		this.controlContainer.classList.add('mapboxgl-ctrl-group');
+		this.controlContainer.classList.add('maplibregl-ctrl');
+		this.controlContainer.classList.add('maplibregl-ctrl-group');
 		this.exportContainer = document.createElement('div');
 		this.exportContainer.classList.add('maplibregl-export-list');
 		this.exportButton = document.createElement('button');

packages/maplibre-gl-export/src/lib/map-generator.ts

@@ -176,10 +176,6 @@ export default class MapGenerator {
 				});
 			});
 		}
-		if (style && style.sprite) {
-			// delete sprite property. It looks like sprite is already loaded in the main map object, and maplibre complains sprite image is already loaded.
-			delete style.sprite;
-		}
 
 		// Render map
 		const renderMap = new MaplibreMap({
@@ -197,10 +193,13 @@ export default class MapGenerator {
 			transformRequest: (this.map as any)._requestManager._transformRequestFn
 		});
 
-		const images = (this.map.style.imageManager || {}).images || [];
-		Object.keys(images).forEach((key) => {
-			renderMap.addImage(key, images[key].data);
-		});
+		// comment this statement because an error is occured since maplibre v3. images[key].data has no value (null)
+		// it looks working well in my style. let's see how it works without this code
+		// the below code was added by https://github.com/watergis/maplibre-gl-export/pull/18.
+		// const images = (this.map.style.imageManager || {}).images || [];
+		// Object.keys(images).forEach((key) => {
+		// 	renderMap.addImage(key, images[key].data);
+		// });
 
 		renderMap.once('idle', () => {
 			const canvas = renderMap.getCanvas();

packages/maplibre-gl-export/src/scss/maplibre-gl-export.scss

@@ -2,7 +2,7 @@
 	display: none;
 }
 
-.mapboxgl-ctrl-group .maplibregl-export-list button {
+.maplibregl-ctrl-group .maplibregl-export-list button {
 	background: none;
 	border: none;
 	cursor: pointer;

packages/maplibre-gl-export/tsconfig.json

@@ -19,7 +19,8 @@
 		"strictNullChecks": true,
 		"sourceMap": true,
 		"target": "ESNext",
-		"esModuleInterop": true
+		"esModuleInterop": true,
+		"skipLibCheck": true
 	},
 	"include": ["src/lib"]
 }