CADENZA-38130 Feat: adding additionalLayers param to showMap API

DisyInformationssysteme · Nov 21, 2024 · eb28db3 · eb28db3
1 parent 11e697b
commit eb28db3
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 6 deletions.
diff --git a/sandbox.html b/sandbox.html
@@ -474,9 +474,33 @@
     <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" placeholder="featureCollections array"></textarea>
+    <small>
+      [{
+      "name":"freiburg",
+      "type":"geojson",
+      "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"
+      }
+      }
+      ]}
+      }]
+    </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" placeholder="GeoJSON geometry"></textarea>
+    <small>
+      {
+      "coordinates":[[[9.598504509838506,52.70992820638244],[8.899110702389294,51.72257425885121],[10.906499617840836,51.725944168909365],[9.598504509838506,52.70992820638244]]],
+      "type":"Polygon"
+      }
+    </small>
   </div>
 </template>
 
@@ -503,7 +527,21 @@
   </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" placeholder="featureCollections array"></textarea>
+    <small>
+      [{
+      "name":"freiburg",
+      "type":"geojson",
+      "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"
+          }
+        }
+      ]}
+      }]
+    </small>
   </div>
   <div>
     <label for="geometryType">Geometry type</label>
@@ -535,13 +573,31 @@
   </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" placeholder="featureCollections array"></textarea>
+    <small>
+      [{
+      "name":"freiburg",
+      "type":"geojson",
+      "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"
+      }
+      }
+      ]}
+      }]
+    </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 placeholder="GeoJSON geometry"></textarea>
+    <small>
+      {
+      "coordinates":[[[9.598504509838506,52.70992820638244],[8.899110702389294,51.72257425885121],[10.906499617840836,51.725944168909365],[9.598504509838506,52.70992820638244]]],
+      "type":"Polygon"
+      }
+    </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),
+      );
+    }
   }
 
   /**