Skip to main content
Solved

Linking one Date Range Slider to multiple datasets

  • November 7, 2024
  • 2 replies
  • 59 views
  • Translate

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 :

Best answer by Rémi Marteel

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
View original
Did this topic help you find an answer to your question?

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é ?
Translate

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
Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings