Hi,
are you building this map on a Studio page or in the code editor?
It’s not possible to do this in a Studio page.
If it’s in the code editor, you may probably put the filter in a variable and specify the related min and max values.
Maybe you can share your code here so we can take a look at it together?
Auto-translation 🪄
Bonjour, construisez-vous cette carte sur une page Studio ou dans l'éditeur de code ? Il n'est pas possible de le faire dans une page Studio. Si c'est dans l'éditeur de code, vous pouvez probablement mettre le filtre dans une variable et spécifier les valeurs min et max associées. Peut-être pouvez-vous partager votre code ici afin que nous puissions y jeter un œil ensemble ?
This is an example. The min and max can change depending on what year you select in the dataset: https://cityobservatorybirmingham.opendatasoft.com/explore/dataset/change-in-investments-wmca/information
<ods-dataset-context context="changeininvestmentswmca" changeininvestmentswmca-dataset="change-in-investments-wmca"><
ods-map no-refit="true" scroll-wheel-zoom="false" display-control="true" search-box="true" toolbar-fullscreen="true" toolbar-geolocation="true" basemap="jawg.light" location="11,52.50598,-1.81549">
<ods-map-layer-group>
<ods-map-layer context="changeininvestmentswmca" color-numeric-ranges="{'-6268.98571':'#FC9272','-515.84643':'#E6755C','5237.29286':'#D05946','10990.43214':'#BA3D30','16743.57143':'#A5211B'}" color-undefined="#1B5AA5" color-out-of-bounds="#1BA566" color-numeric-range-min="-12022.125" picto="ods-circle" show-marker="true" display="choropleth" function="AVG" expression="value" shape-opacity="0.9" point-opacity="1" border-color="#FFFFFF" border-opacity="1" border-size="1" border-pattern="solid" caption="true" title="Change in investments - WMCA" description="This is the change in investments as defined in paragraph 82 of the Prudential Code (2017) from the 1st April to the 31st March.
This is the unadjusted principle amount of all outstanding externa..." size="4"></ods-map-layer>
</ods-map-layer-group>
</ods-map>
</ods-dataset-context>
Auto-translation 🪄
This is an example. The minimum and maximum may change depending on the year selected in the dataset.
Hi, thank you for sharing the code.
In the meantime, in our code library, you could get some inspiration from the choropleth alternative:
https://codelibrary.opendatasoft.com/widget-tricks/ods-color-gradient/
Regards,
Auto-translation 🪄
Bonjour, merci d'avoir partagé le code. En attendant, dans notre bibliothèque de codes, vous pouvez vous inspirer de l'alternative choroplèthe : https://codelibrary.opendatasoft.com/widget-tricks/ods-color-gradient/Cordialement,
Thanks @yier.wu I am closer but have one last quirk.
Tooltips. This particular dataset has a time series. When I use a normal Choropleth the value can be an average of all the values over the time period until someone filters it to a particular year and the tooltip shows the little pagenation arrows to flick through the time periods.
However, the method above which achieves the auto colour goals seems to show a random value when no individual value is selected. While I have said to use the Average the data in the tooltip picks what seems to be a random year. 2020 for one area, 2019 for another etc.
How can I have it give a sensible value for when no individual year is selected and have the tooltip still scroll while maintiaining the auto colour?
<div class="row">
<div class="col-sm-12">
<div class="ods-box">
<div ods-color-gradient="colorgradient"
ods-color-gradient-context="ctx"
ods-color-gradient-x="value"
ods-color-gradient-serie="AVG(value)"
ods-color-gradient-high="rgb(49,163,84)"
ods-color-gradient-low="rgb(229,245,224)"
ods-color-gradient-nb-classes="5">
<div class="map-container">
<ods-map basemap="jawg.light" style="height:550px">
<ods-map-layer context="ctx"
color-categories="colorgradienti'colors']"
color-by-field="value"
color-categories-other="lightgrey"
display="categories"
shape-opacity="0.90"
title="# of carpool parking"
border-color="#545453"
border-opacity="1"
border-size="1"
border-pattern="solid"
>
</ods-map-layer>
</ods-map>
<ods-legend class="legend-default-absolute-pos"
title="Cervical cancer screenings"
subtitle="Percentage"
color-gradient="colorgradient"
display="steps"
no-value-color="lightgrey"
decimal-precision="1"></ods-legend>
</div>
</div>
</div>
</div>
</div>
Auto-translation 🪄
Merci @yier.wu Je suis plus proche mais j'ai une dernière bizarrerie. Les info-bulles. Cet ensemble de données particulier a une série chronologique. Lorsque j'utilise un Choroplèthe normal, la valeur peut être une moyenne de toutes les valeurs sur la période jusqu'à ce que quelqu'un la filtre sur une année particulière et que l'info-bulle affiche les petites flèches de pagination pour parcourir les périodes. Cependant, la méthode ci-dessus qui atteint les objectifs de couleur automatique semble afficher une valeur aléatoire lorsqu'aucune valeur individuelle n'est sélectionnée. Bien que j'aie dit d'utiliser la moyenne, les données dans l'info-bulle choisissent ce qui semble être une année aléatoire. 2020 pour une zone, 2019 pour une autre, etc. Comment puis-je lui faire donner une valeur raisonnable lorsqu'aucune année individuelle n'est sélectionnée et faire en sorte que l'info-bulle défile toujours tout en conservant la couleur automatique ?
Hello Danny,
you cannot have a tooltip with the years scrolling on a map with ods-color-gradient.
However, you can customize your tooltip by checking this resource. For example, you can choose not to display the year and/or only display it if a filter on the year field is selected using the condition:
ng-if="ctx.parameterse'refine.date']"
Hope this will help.
Regards,
