CADENZA-38130 Feat: adding additionalLayers param to showMap API (#69)

* CADENZA-38130 Feat: adding additionalLayers param to showMap API * CADENZA-38130 Feat: adding additionalLayers param to showMap API reviewed --------- Co-authored-by: Isabel Vigil <[email protected]>
DisyInformationssysteme · Nov 22, 2024 · 6a2f5d9 · 6a2f5d9
1 parent aeadfab
commit 6a2f5d9
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 This project uses a version scheme based on the Cadenza main version in the format x.x.y, where x.x is the Cadenza main version and y a functional change or bugfix.
 
 ## Unreleased
+### Added
+- `additionalLayers` option for `CadenzaClient#showMap`
+- Improved sandbox additionalLayers and geometry coordinates examples
 
 ## 10.2.3 - 2024-11-08
 ### Added

diff --git a/sandbox.html b/sandbox.html
@@ -474,9 +474,60 @@
     <label for="embeddingTargetId">Embedding target ID of the map view *</label>
     <input name="embeddingTargetId" id="embeddingTargetId" required>
   </div>
+  <div>
+    <label for="geometry">Additional layers (GeoJSON)</label>
+    <textarea name="additionalLayers" id="additionalLayers" rows="10"></textarea>
+    <small>
+      <strong>Example:</strong>
+      <pre>
+[
+  {
+    "type":"geojson",
+    "name":"freiburg",
+    "content":{
+      "type":"FeatureCollection",
+      "features":[
+        {
+          "type":"Feature",
+          "properties":{},
+          "geometry":{
+            "coordinates":[
+              [
+                [7.965977481550681,47.93787211649922],
+                [7.903787681150362,47.64741821336713],
+                [8.310793134690243,47.70344757260733],
+                [7.965977481550681,47.93787211649922]
+              ]
+            ],
+            "type":"Polygon"
+          }
+        }
+      ]
+    }
+  }
+]
+        </pre>
+    </small>
+  </div>
   <div>
     <label for="geometry">Geometry (GeoJSON)</label>
-    <textarea name="geometry" id="geometry" rows="5" placeholder="{&quot;coordinates&quot;:[[[9.598504509838506,52.70992820638244],[8.899110702389294,51.72257425885121],[10.906499617840836,51.725944168909365],[9.598504509838506,52.70992820638244]]],&quot;type&quot;:&quot;Polygon&quot;}"></textarea>
+    <textarea name="geometry" id="geometry" rows="5"></textarea>
+    <small>
+      <strong>Example:</strong>
+      <pre>
+{
+  "coordinates":[
+    [
+      [9.598504509838506,52.70992820638244],
+      [8.899110702389294,51.72257425885121],
+      [10.906499617840836,51.725944168909365],
+      [9.598504509838506,52.70992820638244]
+    ]
+  ],
+  "type":"Polygon"
+}
+      </pre>
+    </small>
   </div>
 </template>
 
@@ -503,7 +554,38 @@
   </div>
   <div>
     <label for="geometry">Additional layers (GeoJSON)</label>
-    <textarea name="additionalLayers" id="additionalLayers" rows="10" placeholder="[ { type: &quot;geojson&quot;, name: &quot;Stuttgart&quot;, content: { &quot;type&quot;: &quot;FeatureCollection&quot;, &quot;features&quot;: [ { &quot;type&quot;: &quot;Feature&quot;, &quot;properties&quot;: {}, &quot;geometry&quot;: { &quot;coordinates&quot;: [ [ [ 9.019743777219759, 48.939075160317145 ], [ 9.060437807540097, 48.70393235548886 ], [ 9.734017619469824, 48.7841975772329 ], [ 9.019743777219759, 48.939075160317145 ] ] ], &quot;type&quot;: &quot;Polygon&quot; } } ] } } ]"></textarea>
+    <textarea name="additionalLayers" id="additionalLayers" rows="10"></textarea>
+    <small>
+      <strong>Example:</strong>
+      <pre>
+[
+  {
+    "type":"geojson",
+    "name":"freiburg",
+    "content":{
+      "type":"FeatureCollection",
+      "features":[
+        {
+          "type":"Feature",
+          "properties":{},
+          "geometry":{
+            "coordinates":[
+              [
+                [7.965977481550681,47.93787211649922],
+                [7.903787681150362,47.64741821336713],
+                [8.310793134690243,47.70344757260733],
+                [7.965977481550681,47.93787211649922]
+              ]
+            ],
+            "type":"Polygon"
+          }
+        }
+      ]
+    }
+  }
+]
+        </pre>
+    </small>
   </div>
   <div>
     <label for="geometryType">Geometry type</label>
@@ -535,13 +617,58 @@
   </div>
   <div>
     <label for="geometry">Additional layers (GeoJSON)</label>
-    <button>Add example</button>
-    <textarea name="additionalLayers" id="additionalLayers" rows="10" placeholder="[ { type: &quot;geojson&quot;, name: &quot;Stuttgart&quot;, content: { &quot;type&quot;: &quot;FeatureCollection&quot;, &quot;features&quot;: [ { &quot;type&quot;: &quot;Feature&quot;, &quot;properties&quot;: {}, &quot;geometry&quot;: { &quot;coordinates&quot;: [ [ [ 9.019743777219759, 48.939075160317145 ], [ 9.060437807540097, 48.70393235548886 ], [ 9.734017619469824, 48.7841975772329 ], [ 9.019743777219759, 48.939075160317145 ] ] ], &quot;type&quot;: &quot;Polygon&quot; } } ] } } ]"></textarea>
+    <textarea name="additionalLayers" id="additionalLayers" rows="10"></textarea>
+    <small>
+      <strong>Example:</strong>
+      <pre>
+[
+  {
+    "type":"geojson",
+    "name":"freiburg",
+    "content":{
+      "type":"FeatureCollection",
+      "features":[
+        {
+          "type":"Feature",
+          "properties":{},
+          "geometry":{
+            "coordinates":[
+              [
+                [7.965977481550681,47.93787211649922],
+                [7.903787681150362,47.64741821336713],
+                [8.310793134690243,47.70344757260733],
+                [7.965977481550681,47.93787211649922]
+              ]
+            ],
+            "type":"Polygon"
+          }
+        }
+      ]
+    }
+  }
+]
+        </pre>
+    </small>
   </div>
   <div>
     <label for="geometry">Geometry (GeoJSON) *</label>
-    <textarea name="geometry" id="geometry" rows="5" required placeholder="{&quot;coordinates&quot;:[[[9.598504509838506,52.70992820638244],[8.899110702389294,51.72257425885121],[10.906499617840836,51.725944168909365],[9.598504509838506,52.70992820638244]]],&quot;type&quot;:&quot;Polygon&quot;}"></textarea>
-    <small></small>
+    <textarea name="geometry" id="geometry" rows="5" required></textarea>
+    <small>
+      <strong>Example:</strong>
+      <pre>
+{
+  "coordinates":[
+    [
+      [9.598504509838506,52.70992820638244],
+      [8.899110702389294,51.72257425885121],
+      [10.906499617840836,51.725944168909365],
+      [9.598504509838506,52.70992820638244]
+    ]
+  ],
+  "type":"Polygon"
+}
+      </pre>
+    </small>
   </div>
   <div>
     <label>

diff --git a/src/cadenza.js b/src/cadenza.js
@@ -385,6 +385,7 @@ export class CadenzaClient {
    * @param {boolean} [options.useMapSrs] -  Whether the geometry and the extent are in the map's SRS (otherwise EPSG:4326 is assumed)
    * @param {ZoomTarget} [options.zoomTarget] - A target Cadenza should zoom to
    * @param {AbortSignal} [options.signal] - A signal to abort the iframe loading
+   * @param {LayerDefinition[]} [options.additionalLayers] - Layer definitions to be imported and shown in the background, as a basis for the drawing.
    * @return {Promise<void>} A `Promise` for when the iframe is loaded
    * @throws For invalid arguments
    * @fires
@@ -408,6 +409,7 @@ export class CadenzaClient {
       useMapSrs,
       zoomTarget,
       signal,
+      additionalLayers,
     } = {},
   ) {
     this.#log('CadenzaClient#showMap', ...arguments);
@@ -437,6 +439,11 @@ export class CadenzaClient {
         zoomToGeometry,
       });
     }
+    if (additionalLayers) {
+      additionalLayers.forEach((layer) =>
+        this.#postEvent('importLayer', layer),
+      );
+    }
   }
 
   /**