Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 22, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb28db3
CADENZA-38130 Feat: adding additionalLayers param to showMap API
Nov 21, 2024
3753a4d
CADENZA-38130 Feat: adding additionalLayers param to showMap API revi…
Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
139 changes: 133 additions & 6 deletions sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These examples are hard to read in the sandbox, because there are no line breaks and indentation. Proposal:

    <small>
      <strong>Example:</strong>
      <pre>
[
  {
    "type":"geojson",
    "name":"Freiburg",
    "content": {
      "type": "FeatureCollection",
      "features": [ ... ]
    }
  }
  ...
]</pre>
    </small>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now the examples are really lengthy? Do we really need all the info, which makes the sidebar rather long? After all it's only an example.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Klaus wanted to have the possibility for people to easily copy paste and use it in the input, so for that we need everything, yes. Is this a problem? it's only a few pixels more.

</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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

    <small>
      <strong>Example:</strong>
      <pre>
{
  "type":"Polygon",
  "coordinates": [ [ 9.599, 52.71 ], ... ]
}</pre>
    </small>

</div>
</template>

Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions src/cadenza.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -408,6 +409,7 @@ export class CadenzaClient {
useMapSrs,
zoomTarget,
signal,
additionalLayers,
} = {},
) {
this.#log('CadenzaClient#showMap', ...arguments);
Expand Down Expand Up @@ -437,6 +439,11 @@ export class CadenzaClient {
zoomToGeometry,
});
}
if (additionalLayers) {
additionalLayers.forEach((layer) =>
this.#postEvent('importLayer', layer),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Klaus changes this to a request, please coordinate this change with him.

);
}
}

/**
Expand Down