diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b3fbe3564..9481a52bcd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### ✨ Features and improvements +⚠️ Changed the `GeoJSONSource`'s `getClusterExpansionZoom`, `getClusterChildren`, `getClusterLeaves` methods to return a `Promise` instead of a callback usage ([#3421](https://github.com/maplibre/maplibre-gl-js/pull/3421)) - ⚠️ Changed the `setRTLTextPlugin` function to return a promise instead of using callback ([#3418](https://github.com/maplibre/maplibre-gl-js/pull/3418)) this also changed how the RTL pluing code is handled internally by splitting the main thread and worker thread code. - _...Add new stuff here..._ @@ -16,7 +17,7 @@ - ⚠️ Changed the undeling worker communication from callbacks to promises. This has a breaking effect on the implementation of custom `WorkerSource` and how it behaves ([#3233](https://github.com/maplibre/maplibre-gl-js/pull/3233)) - ⚠️ Changed the `Source` interface to return promises instead of callbacks ([#3233](https://github.com/maplibre/maplibre-gl-js/pull/3233)) - ⚠️ Changed all the sources to be promises based. ([#3233](https://github.com/maplibre/maplibre-gl-js/pull/3233)) -- ⚠️ Changed the `map.loadImage` method to return a `Promise` ([#3233](https://github.com/maplibre/maplibre-gl-js/pull/3233)) +- ⚠️ Changed the `map.loadImage` method to return a `Promise` instead of a callback usage ([#3233](https://github.com/maplibre/maplibre-gl-js/pull/3233)) ### 🐞 Bug fixes diff --git a/src/source/geojson_source.ts b/src/source/geojson_source.ts index 4799e1891d..ee0b3ba0dc 100644 --- a/src/source/geojson_source.ts +++ b/src/source/geojson_source.ts @@ -10,7 +10,6 @@ import type {Map} from '../ui/map'; import type {Dispatcher} from '../util/dispatcher'; import type {Tile} from './tile'; import type {Actor} from '../util/actor'; -import type {Callback} from '../types/callback'; import type {GeoJSONSourceSpecification, PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec'; import type {GeoJSONSourceDiff} from './geojson_source_diff'; import type {GeoJSONWorkerOptions, LoadGeoJSONParameters} from './geojson_worker_source'; @@ -255,27 +254,20 @@ export class GeoJSONSource extends Evented implements Source { * * @param clusterId - The value of the cluster's `cluster_id` property. * @param callback - A callback to be called when the zoom value is retrieved (`(error, zoom) => { ... }`). - * @returns `this` + * @returns a promise that is resolved with the zoom number */ - getClusterExpansionZoom(clusterId: number, callback: Callback): this { - this.actor.sendAsync({type: 'getClusterExpansionZoom', data: {type: this.type, clusterId, source: this.id}}) - .then((v) => callback(null, v)) - .catch((e) => callback(e)); - return this; + getClusterExpansionZoom(clusterId: number): Promise { + return this.actor.sendAsync({type: 'getClusterExpansionZoom', data: {type: this.type, clusterId, source: this.id}}); } /** * For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features). * * @param clusterId - The value of the cluster's `cluster_id` property. - * @param callback - A callback to be called when the features are retrieved (`(error, features) => { ... }`). - * @returns `this` + * @returns a promise that is resolved when the features are retrieved */ - getClusterChildren(clusterId: number, callback: Callback>): this { - this.actor.sendAsync({type: 'getClusterChildren', data: {type: this.type, clusterId, source: this.id}}) - .then((v) => callback(null, v)) - .catch((e) => callback(e)); - return this; + getClusterChildren(clusterId: number): Promise> { + return this.actor.sendAsync({type: 'getClusterChildren', data: {type: this.type, clusterId, source: this.id}}); } /** @@ -284,12 +276,11 @@ export class GeoJSONSource extends Evented implements Source { * @param clusterId - The value of the cluster's `cluster_id` property. * @param limit - The maximum number of features to return. * @param offset - The number of features to skip (e.g. for pagination). - * @param callback - A callback to be called when the features are retrieved (`(error, features) => { ... }`). - * @returns `this` + * @returns a promise that is resolved when the features are retreived * @example * Retrieve cluster leaves on click * ```ts - * map.on('click', 'clusters', function(e) { + * map.on('click', 'clusters', (e) => { * let features = map.queryRenderedFeatures(e.point, { * layers: ['clusters'] * }); @@ -298,23 +289,20 @@ export class GeoJSONSource extends Evented implements Source { * let pointCount = features[0].properties.point_count; * let clusterSource = map.getSource('clusters'); * - * clusterSource.getClusterLeaves(clusterId, pointCount, 0, function(error, features) { - * // Print cluster leaves in the console - * console.log('Cluster leaves:', error, features); - * }) + * const features = await clusterSource.getClusterLeaves(clusterId, pointCount) 0, function(error, features) { + * // Print cluster leaves in the console + * console.log('Cluster leaves:', features); * }); * ``` */ - getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback>): this { - this.actor.sendAsync({type: 'getClusterLeaves', data: { + getClusterLeaves(clusterId: number, limit: number, offset: number): Promise> { + return this.actor.sendAsync({type: 'getClusterLeaves', data: { type: this.type, source: this.id, clusterId, limit, offset - }}).then((l) => callback(null, l)) - .catch((e) => callback(e)); - return this; + }}); } /** diff --git a/test/examples/cluster.html b/test/examples/cluster.html index 8c0422930e..a646a3d36b 100644 --- a/test/examples/cluster.html +++ b/test/examples/cluster.html @@ -95,22 +95,16 @@ }); // inspect a cluster on click - map.on('click', 'clusters', (e) => { + map.on('click', 'clusters', async (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] }); const clusterId = features[0].properties.cluster_id; - map.getSource('earthquakes').getClusterExpansionZoom( - clusterId, - (err, zoom) => { - if (err) return; - - map.easeTo({ - center: features[0].geometry.coordinates, - zoom - }); - } - ); + const zoom = await map.getSource('earthquakes').getClusterExpansionZoom(clusterId); + map.easeTo({ + center: features[0].geometry.coordinates, + zoom + }); }); // When a click event occurs on a feature in