Merge pull request #828 from openlayers/remove-mapbox-layer

Add removeMapboxLayer function
openlayers · Mar 2, 2023 · d1fb949 · d1fb949
2 parents af5b534 + 1fe2ce5
commit d1fb949
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -135,13 +135,13 @@ Renames and re-exports [apply](#apply)
 
 ▸ **addMapboxLayer**(`mapOrGroup`, `mapboxLayer`, `beforeLayerId?`): `void`
 
-Add a new Mapbox Layer object to the style.
+Add a new Mapbox Layer object to the style. The map will be re-rendered.
 
 ##### Parameters
 
 | Name             | Type                  | Description                                                              |
 | :--------------- | :-------------------- | :----------------------------------------------------------------------- |
-| `mapOrGroup`     | `Map` \| `LayerGroup` | Map or LayerGroup.                                                       |
+| `mapOrGroup`     | `Map` \| `LayerGroup` | The Map or LayerGroup `apply` was called on.                             |
 | `mapboxLayer`    | `any`                 | Mapbox Layer object.                                                     |
 | `beforeLayerId?` | `string`              | Optional id of the Mapbox Layer before the new layer that will be added. |
 
@@ -534,10 +534,10 @@ Update a Mapbox Layer object in the style. The map will be re-rendered with the
 
 ##### Parameters
 
-| Name          | Type                  | Description                  |
-| :------------ | :-------------------- | :--------------------------- |
-| `mapOrGroup`  | `Map` \| `LayerGroup` | Map or LayerGroup.           |
-| `mapboxLayer` | `any`                 | Updated Mapbox Layer object. |
+| Name          | Type                  | Description                                  |
+| :------------ | :-------------------- | :------------------------------------------- |
+| `mapOrGroup`  | `Map` \| `LayerGroup` | The Map or LayerGroup `apply` was called on. |
+| `mapboxLayer` | `any`                 | Updated Mapbox Layer object.                 |
 
 ##### Returns
 

diff --git a/src/apply.js b/src/apply.js
@@ -1309,8 +1309,8 @@ export function getMapboxLayer(mapOrGroup, layerId) {
 }
 
 /**
- * Add a new Mapbox Layer object to the style.
- * @param {Map|LayerGroup} mapOrGroup Map or LayerGroup.
+ * Add a new Mapbox Layer object to the style. The map will be re-rendered.
+ * @param {Map|LayerGroup} mapOrGroup The Map or LayerGroup `apply` was called on.
  * @param {Object} mapboxLayer Mapbox Layer object.
  * @param {string} [beforeLayerId] Optional id of the Mapbox Layer before the new layer that will be added.
  */
@@ -1347,7 +1347,7 @@ export function addMapboxLayer(mapOrGroup, mapboxLayer, beforeLayerId) {
 
 /**
  * Update a Mapbox Layer object in the style. The map will be re-rendered with the new style.
- * @param {Map|LayerGroup} mapOrGroup Map or LayerGroup.
+ * @param {Map|LayerGroup} mapOrGroup The Map or LayerGroup `apply` was called on.
  * @param {Object} mapboxLayer Updated Mapbox Layer object.
  */
 export function updateMapboxLayer(mapOrGroup, mapboxLayer) {
@@ -1371,4 +1371,31 @@ export function updateMapboxLayer(mapOrGroup, mapboxLayer) {
   getLayer(mapOrGroup, mapboxLayer.id).changed();
 }
 
+/**
+ * Remove a Mapbox Layer object from the style. The map will be re-rendered.
+ * @param {Map|LayerGroup} mapOrGroup The Map or LayerGroup `apply` was called on.
+ * @param {string|Object} mapboxLayerIdOrLayer Mapbox Layer id or Mapbox Layer object.
+ */
+export function removeMapboxLayer(mapOrGroup, mapboxLayerIdOrLayer) {
+  const mapboxLayerId =
+    typeof mapboxLayerIdOrLayer === 'string'
+      ? mapboxLayerIdOrLayer
+      : mapboxLayerIdOrLayer.id;
+  const layer = getLayer(mapOrGroup, mapboxLayerId);
+  /** @type {Array<Object>} */
+  const layerMapboxLayers = layer.get('mapbox-layers');
+  if (layerMapboxLayers.length === 1) {
+    throw new Error(
+      'Cannot remove last Mapbox layer from an OpenLayers layer.'
+    );
+  }
+  layerMapboxLayers.splice(layerMapboxLayers.indexOf(mapboxLayerId), 1);
+  const layers = mapOrGroup.get('mapbox-style').layers;
+  layers.splice(
+    layers.findIndex((layer) => layer.id === mapboxLayerId),
+    1
+  );
+  layer.changed();
+}
+
 export {finalizeLayer as _finalizeLayer};
diff --git a/test/apply.test.js b/test/apply.test.js
@@ -24,6 +24,7 @@ import {
   getLayers,
   getMapboxLayer,
   getSource,
+  removeMapboxLayer,
   setFeatureState,
   updateMapboxLayer,
 } from '../src/apply.js';
@@ -1061,4 +1062,28 @@ describe('ol-mapbox-style', function () {
         });
     });
   });
+
+  describe('removeMapboxLayer', function () {
+    let target;
+    beforeEach(function () {
+      target = document.createElement('div');
+    });
+
+    it('removes a mapbox layer', function (done) {
+      apply(target, JSON.parse(JSON.stringify(brightV9)))
+        .then(function (map) {
+          const layer = getLayer(map, 'landuse_park');
+          const oldRevision = layer.getRevision();
+          const mapboxLayer = getMapboxLayer(map, 'landuse_park');
+          removeMapboxLayer(map, mapboxLayer);
+          should.equal(getMapboxLayer(map, 'landuse_park'), undefined);
+          should.equal(layer.get('mapbox-layers').indexOf('landuse_park'), -1);
+          should.equal(layer.getRevision(), oldRevision + 1);
+          done();
+        })
+        .catch(function (error) {
+          done(error);
+        });
+    });
+  });
 });