Custom Choropleth value and color ranges

Created on 22 July 2025, 11 days ago

Problem/Motivation

Simply awesome module, thanks for making it!

The 5 automatic value ranges under "Classification Method" work well for many use cases. However, sometimes it would be great to be able to hard code the intervals, for example to match Search API/Facet ranges.

Also, it would be nice if you could set custom colour values.

Steps to reproduce

Want to have custom ranges or colors, but cannot.

Proposed resolution

A new "Custom" option could be added to the "Classification Method", allowing custom intervals ranges to be defined, using the same method as https://www.drupal.org/project/facet_range_list_item like this:

50-100|+50
30-49.9|30-50
25-29.9|25-30
23-24.9|23-25

Where the values above are:
The ranges, which defines which interval an individual value should belong to
The value shown in the Legend

Similarly under "Color Scale", a new "Custom" option in the drop-down could be added, to allow defining a custom color range, via hex-values:

#cc4c02
#fe9929
#fed98e
#ffffd4

It would be the user's responsibility to enter matching values, like 4 value intervals, and then also add 4 colors, or use one of the pre-configured color scales.

Remaining tasks

Decide if "Custom ranges" and "Custom colors" options should be added.

User interface changes

API changes

Data model changes

Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇩🇰Denmark ressa Copenhagen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ressa
  • 🇮🇹Italy itamair

    thanks @ressa on this
    what you are asking and mentioning as possibile further features is already perfectly accomplishable with the actual version and architecture of the module.

    As mentioned in the README.md file, the Leaflet Choropleth is founded on Drupal Plugin API system ( https://www.drupal.org/docs/drupal-apis/plugin-api ):
    indeed both its already embedded classification methods and color scales/ranges are just “Classification
    “ and “ColorScale“ plugins types, as defined in the module
    and that comply and implement the following interfaces:

    - ClassificationInterface: https://git.drupalcode.org/project/leaflet_choropleth/-/blob/1.0.x/src/P...
    that implements the generateBreaks(array $data, int $classes) method, returning an array …

    - ColorScaleInterface: https://git.drupalcode.org/project/leaflet_choropleth/-/blob/1.0.x/src/P...
    that implements the getColors(int $classes, bool $reverse = FALSE) method, returning an array …

    Thus you should simply create your own custom module and implement (in the proper src/plugin/Classification and src/plugin/ColorScale folders) the new custom Classification and ColorScale plugins that you need to implement additionally, naming them the way you prefer, and returning (for those methods) the array(s) values that you want …
    Of course in case of Classification plugin type you should return a logical array of incremental integer(s) or float values, while each ColorScale plugin type should return an array of hex color values …

    You could start doing this simply copying and pasting from one of the plugins already implemented in the module in the following folders:
    https://git.drupalcode.org/project/leaflet_choropleth/-/tree/1.0.x/src/P...
    https://git.drupalcode.org/project/leaflet_choropleth/-/tree/1.0.x/src/P...

    If correctly created those new custom plugins of you, with proper naming and adjusting their namespaces to refer to your custom module, you can bet they will be added and appear as additional options in the Choropleth Map Settings of the LC module.

    For what concerns custom Legend labels (for each interval)
    it is also already possibile to alter the %min and %max values (and also a fixed %value for Categorical use case) that are then passed to the Legend,
    throughout the leaflet_choropleth_color_scale_alter hook
    that is triggered here: https://git.drupalcode.org/project/leaflet_choropleth/-/blob/1.0.x/src/P...
    and better documented in the leaflet_choropleth.api.php file,
    where I also added a real use case that simulate the use case where we want to alter the Legend items values with fixed values …

    For your and the whole community convenience I am attaching here a custom “leaflet_choropleth_custom” custom module that exactly implements all this scenario.

    In particular it implements the following:
    - a new classification “FiveBreaksOn0100” that creates 5 class equal breaks from 0 to 100;
    - a new classification “Custom Issue 3537366" that created the exact classification breaks that you mention in this support request Issue #3537366
    - a new color ranges “Fuchsias (Sequential)"

    and also a leaflet_choropleth_custom_leaflet_choropleth_color_scale_alter function (in its leafle_choropleth_custom.module file) where the default legend_items values are replaced with $custom_values.

    Once enabled that module and once set the “Custom Issue 3537366" classification, and “Fuchsias (Sequential)" color range and set the Legend Items format as the following:
    “%min - %max - %value”

    I am easily able to generate the attached Choropleth Map and related Legend based on those custom value breaks / intervals (that you mentioned above).

    Hope all clear with this.

  • 🇮🇹Italy itamair

    One thing that comes to mind, and that could be easily implemented/added, to avoid having to use the leaflet_choropleth_color_scale_alter hook (for defining custom labels for legend values), could be an additional long text configuration where the user enters the various values (labels) they want to associate with the different legend ranges (according to a specific requested pattern, such as each separated by a comma, a line break, or a pipe).
    These values would then be translated by the %value placeholder into the Legend Items Format...
    This is an improvement that's not difficult to implement in a future version of the module and would fulfill the Feature Requests of this issue even more easily (and with no custom code in your .module file).

  • 🇩🇰Denmark ressa Copenhagen

    Thanks @itamair for an epic explanation, much more than I could have hoped for. And thank you very much for the attention to detail, and even including a custom module example. It works perfectly, and I get the custom ranges, just like requested in the Issue Summary. Mille graze!

    Based on your example and walk-through, I and anyone else interested in this, can absolutely now create our own custom Choropleth values and ranges.

    About your thoughts of a future plans for a custom Color Scale (defining custom labels for legend values) via long text configuration, that could be a logical expansion to my suggestion in the Issue Summary, and I have extended the feature request with a new "combine value ranges, labels, and color scales" section.

    If this "Custom" option is selected, the "Number of Classes" drop-down value should probably be disable (or ignored), since the number of elements are then in effect set. Also, if colors are set, the "Color Scale" drop-down value could also be ignored, I would think.

    Add support for multiple Data Source Fields?

    Another feature that would be awesome to have, is support for multiple Data Source Field's in a single View, since it looks like only a single Data Source Field is possible per View currently.

    It's getting complicated though, and I am not sure what the best method would be ... I can think of two methods right now:

    Scenario #1, Set source values in the Custom form

    Could something like this work? (in a single form field or multivalue (paragraph-style) which ever is the least complicated to handle):

    source: my_data_source_field
    50-100|+50|#aa8c02
    30-49.9|30-50|#cc4c02
    25-29.9|25-30|#fe9929
    23-24.9|23-25|#ffffd4
    
    source: data_source_field_number_2
    1000-10000|+1000|#aa9c82
    100-999.9|100-1000|#cc4c02
    1-99.9|1-100|#ffffd4

    If this "Custom" option is used, the "Number of Classes" should probably be disable (or ignored), since the number of elements can vary.

    Scenario #2, Paragraph-like "Add another"

    Another solution could be to offer an "Add another"-button, which creates a complete extra "Choropleth Map Settings" below the current one, allowing an entirely different configuration for each Data Source Field.

    Maybe that's better, since it retains the flexibility to use all the great configuration features? Then there would be no need to define a source key, and range, label, and color could be set for each data source, if so desired, and only this is needed:

    50-100|+50|#aa8c02
    30-49.9|30-50|#cc4c02
    25-29.9|25-30|#fe9929
    23-24.9|23-25|#ffffd4
  • 🇩🇰Denmark ressa Copenhagen

    One thing I forgot to include in my "Add support for multiple Data Source Fields?" suggestion above, is how to select which Data Source Field to use in the Leaflet View. So I'll add it, to keep it all in one place.

Production build 0.71.5 2024