Skip to main content

I am creating a visualisation where I have two datasets plotted on a map, and I want to filter these by year with a slider. 

Currently I have two separate sliders, with each one filtering a different dataset. Is there a way to have one slider interact with multiple contexts?

 

Current Code:

<ods-dataset-context context="flexibilityprocurementareas,flexibilityexpressionsofinterestareas" flexibilityprocurementareas-dataset="flexibility-procurement-areas" flexibilityexpressionsofinterestareas-dataset="flexibility-expressions-of-interest-areas">
<div id="c1">
<ods-date-range-slider context="flexibilityprocurementareas"
date-format="YYYY"
initial-from="2023/01/01"
initial-to="2029/01/01"
precision="year"
date-field="start_of_regulatory_year"
start-bound="'2023/01/01'"
end-bound="'2030/01/01'">
</ods-date-range-slider>
</div>
<div id="c2">
<ods-date-range-slider context="flexibilityexpressionsofinterestareas"
date-format="YYYY"
initial-from="2023/01/01"
initial-to="2029/01/01"
precision="year"
date-field="start_of_regulatory_year"
start-bound="'2023/01/01'"
end-bound="'2030/01/01'">
</ods-date-range-slider>
</div>

<ods-map no-refit="true" scroll-wheel-zoom="false" display-control="true" search-box="true" toolbar-fullscreen="true" toolbar-geolocation="true" basemap="jawg.streets" location="8,54.12785,-1.07666">
<ods-map-layer-group>
<ods-map-layer context="flexibilityprocurementareas" color="#C32D1C" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption-picto-icon="ods-electricity" caption-picto-color="#BA0129" title="Flexibility Procurement Areas" size="4" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
</ods-map-layer-group>
<ods-map-layer-group>
<ods-map-layer context="flexibilityexpressionsofinterestareas" color="#263891" picto="ods-circle" show-marker="true" display="auto" shape-opacity="0.5" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption-picto-icon="ods-question" caption-picto-color="#263891" title="Flexibility Expressions of Interest Areas" size="4" size-min="3" size-max="5" size-function="linear"></ods-map-layer>
</ods-map-layer-group>
</ods-map>

</ods-dataset-context>

 

 

Auto-translation 🪄

Je crée une visualisation dans laquelle j'ai deux ensembles de données tracés sur une carte et je souhaite les filtrer par année avec un curseur. Actuellement, j'ai deux curseurs distincts, chacun filtrant un ensemble de données différent. Existe-t-il un moyen de faire interagir un curseur avec plusieurs contextes ? Code actuel :

Additionally, is there a way to define the bounds of the slider dynamically based on the earliest and latest date in a given dataset?

Auto-translation 🪄

De plus, existe-t-il un moyen de définir les limites du curseur de manière dynamique en fonction de la date la plus ancienne et la plus récente d'un ensemble de données donné ?

Hello Matthew.

I don’t think it’s possible to use 2 different contexts for one range slider.

You can define the bounds of the slider dynamically using the max and the min date of your dataset. You have an example in the code librairy.

Kind regards,

Rémi

Auto-translation 🪄

Bonjour Matthew. Je ne pense pas qu'il soit possible d'utiliser 2 contextes différents pour un seul curseur de plage. Vous pouvez définir les limites du curseur de manière dynamique en utilisant la date max et min de votre jeu de données. Vous avez un exemple dans la bibliothèque de code. Cordialement, Rémi

Reply