Change geojson source API to use promises (#3421)

* Change geojson source API * Update changelog
maplibre · Nov 28, 2023 · ef5a2fa · ef5a2fa
1 parent d68b919
commit ef5a2fa
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 39 deletions.
diff --git 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
@@ -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<number>): 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<number> {
+        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<Array<GeoJSON.Feature>>): 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<Array<GeoJSON.Feature>> {
+        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<Array<GeoJSON.Feature>>): this {
-        this.actor.sendAsync({type: 'getClusterLeaves', data: {
+    getClusterLeaves(clusterId: number, limit: number, offset: number): Promise<Array<GeoJSON.Feature>> {
+        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
@@ -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