diff --git a/docs/backwardcompatibility.html b/docs/backwardcompatibility.html
new file mode 100644
index 0000000..4770e15
--- /dev/null
+++ b/docs/backwardcompatibility.html
@@ -0,0 +1,206 @@
+
+
+
+
+
+
+
+ @geolonia/embed
+
+
+
+ @geolonia/embed
+
+ 後方互換性テストのためのサンプルコードです。
+
+ loadImage
+ MapLibre GL JS v4.4.1 の から、loadImage の呼び出し方が以下のように変更になりました。Embed API では後方互換性を保つため、v4.4.1 以前の書き方も引き続きサポートしています。
+ 関連する ISSUE: Remove callback from loadImage
+
+
+
+ // v4.4.1 以降
+ map.loadImage(url)
+
+ // v4.4.1 以前
+ map.loadImage(url, callback)
+
+
+
+
v4.4.1 以降
+
+
+ var map1 = new geolonia.Map('my-map1');
+ map1.on('load', async () => {
+ image = await map1.loadImage('https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png');
+ map1.addImage('cat', image.data);
+ map1.addSource('point', {
+ 'type': 'geojson',
+ 'data': {
+ 'type': 'FeatureCollection',
+ 'features': [
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'Point',
+ 'coordinates': [139.767125, 35.681236]
+ }
+ }
+ ]
+ }
+ });
+ map1.addLayer({
+ 'id': 'points',
+ 'type': 'symbol',
+ 'source': 'point',
+ 'layout': {
+ 'icon-image': 'cat',
+ 'icon-size': 0.25
+ }
+ });
+ });
+
+
+
v4.4.1 以前
+
+
+ var map2 = new geolonia.Map('my-map2');
+ map2.on('load', () => {
+ map2.loadImage(
+ 'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
+ (error, image) => {
+ if (error) throw error;
+ map2.addImage('cat', image);
+ }
+ );
+ map2.addSource('point', {
+ 'type': 'geojson',
+ 'data': {
+ 'type': 'FeatureCollection',
+ 'features': [
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'Point',
+ 'coordinates': [139.767125, 35.681236]
+ }
+ }
+ ]
+ }
+ });
+ map2.addLayer({
+ 'id': 'points',
+ 'type': 'symbol',
+ 'source': 'point',
+ 'layout': {
+ 'icon-image': 'cat',
+ 'icon-size': 0.25
+ }
+ });
+ });
+
+
+
+
+
+
+
+
diff --git a/docs/embed.js.LICENSE.txt b/docs/embed.js.LICENSE.txt
index ae386fb..eb26a49 100644
--- a/docs/embed.js.LICENSE.txt
+++ b/docs/embed.js.LICENSE.txt
@@ -1 +1,4 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+/**
+ * MapLibre GL JS
+ * @license 3-Clause BSD. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v4.4.1/LICENSE.txt
+ */
diff --git a/package.json b/package.json
index 750696d..0aef1a0 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"homepage": "https://github.com/geolonia/embed#readme",
"devDependencies": {
"@geolonia/eslint-config": "latest",
+ "@types/jsdom": "^21.1.7",
"@types/mocha": "^10.0.1",
"babel-loader": "^9.1.0",
"css-loader": "^6.7.2",
diff --git a/src/lib/geolonia-map.ts b/src/lib/geolonia-map.ts
index e71d5a3..0df34c8 100644
--- a/src/lib/geolonia-map.ts
+++ b/src/lib/geolonia-map.ts
@@ -8,9 +8,9 @@ import parseAtts from './parse-atts';
import { SimpleStyle } from './simplestyle';
import SimpleStyleVector from './simplestyle-vector';
-import { getContainer, getOptions, getSessionId, getStyle, handleRestrictedMode, isScrollable, parseControlOption, parseSimpleVector, handleErrorMode } from './util';
+import { getContainer, getOptions, getSessionId, getStyle, handleRestrictedMode, isScrollable, parseControlOption, parseSimpleVector, handleErrorMode, loadImageCompatibility, GetImageCallback } from './util';
-import type { MapOptions, PointLike, StyleOptions, StyleSpecification, StyleSwapOptions } from 'maplibre-gl';
+import type { MapOptions, PointLike, StyleOptions, StyleSpecification, StyleSwapOptions, GetResourceResponse } from 'maplibre-gl';
export type GeoloniaMapOptions = MapOptions & { interactive?: boolean };
@@ -319,4 +319,23 @@ export default class GeoloniaMap extends maplibregl.Map {
super.remove.call(this);
delete (container as HTMLElement & { geoloniaMap: GeoloniaMap }).geoloniaMap;
}
+
+ /**
+ * Backward compatibility for breaking change of loadImage() in MapLibre GL JS v4.0.0.
+ * Related to https://github.com/maplibre/maplibre-gl-js/pull/3422/
+ * @param url
+ * @param callback
+ */
+ loadImage(url: string, callback: GetImageCallback): void;
+ loadImage(url: string): Promise>;
+ loadImage(url: string, callback?: GetImageCallback): Promise> | void {
+
+ const promise = super.loadImage(url);
+
+ if (callback) {
+ loadImageCompatibility(promise, callback);
+ } else {
+ return promise;
+ }
+ }
}
diff --git a/src/lib/parse-atts.test.ts b/src/lib/parse-atts.test.ts
index e4e8240..92abd85 100644
--- a/src/lib/parse-atts.test.ts
+++ b/src/lib/parse-atts.test.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
import parseAtts from './parse-atts';
import assert from 'assert';
import { JSDOM } from 'jsdom';
diff --git a/src/lib/simplestyle.ts b/src/lib/simplestyle.ts
index ab845c0..58fac60 100644
--- a/src/lib/simplestyle.ts
+++ b/src/lib/simplestyle.ts
@@ -297,17 +297,14 @@ export class SimpleStyle {
},
});
- this.map.on('click', `${this.options.id}-clusters`, (e) => {
+ this.map.on('click', `${this.options.id}-clusters`, async (e) => {
const features = this.map.queryRenderedFeatures(e.point, { layers: [`${this.options.id}-clusters`] });
const clusterId = features[0].properties.cluster_id;
- this.map.getSource(`${this.options.id}-points`).getClusterExpansionZoom(clusterId, (err, zoom) => {
- if (err)
- return;
-
- this.map.easeTo({
- center: features[0].geometry.coordinates,
- zoom: zoom,
- });
+ const zoom = await this.map.getSource(`${this.options.id}-points`).getClusterExpansionZoom(clusterId);
+
+ this.map.easeTo({
+ center: features[0].geometry.coordinates,
+ zoom: zoom,
});
});
diff --git a/src/lib/util.test.ts b/src/lib/util.test.ts
index dd85310..68b77e2 100644
--- a/src/lib/util.test.ts
+++ b/src/lib/util.test.ts
@@ -1,8 +1,8 @@
-'use strict';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
import assert from 'assert';
import { JSDOM } from 'jsdom';
-import { getContainer, getLang, getOptions, getStyle, handleMarkerOptions, isDomElement, isURL, parseControlOption, parseSimpleVector, sanitizeDescription } from './util';
+import { getContainer, getLang, getOptions, getStyle, handleMarkerOptions, isDomElement, isURL, parseControlOption, parseSimpleVector, sanitizeDescription, loadImageCompatibility } from './util';
const base = 'https://base.example.com/parent/';
@@ -62,6 +62,7 @@ describe('Tests for util.js', () => {