Quick start
The example below, running in the Mappia calculator - click it to run it live. Full-size picture
- Run it
Click the picture: the map opens right here and runs the example. Nothing is saved, and nothing to install.
- Try it
- Drag the right thumb up to 1500: after the countdown, every place with 800 to 1500 mm of rain a year is blue.
- Drag the left thumb to 300: the drier places join the band and the legend reads Between 300 and 1500 mm.
- Make it yours
Copy the query, change it - the key parameters are below - and run it again in the playground, or paste it into the Mappia editor to save it as your map.
Key parameters
| Parameter | Example | What it does |
|---|---|---|
values | [800,1100] | Turns the slider into a range and sets where the two thumbs start. The value becomes a [low, high] array. |
id | band | Names the pair: inputs.id['band'] in beforeCalc, and by position (inputs[0] here, still an array) inside expression. |
minValue | 300 | Lowest value either thumb can reach (default 0). |
maxValue | 2100 | Highest value either thumb can reach (default 100). |
increment | 50 | Step both thumbs snap to while the user drags them. |
width | 250 | Width of the slider in pixels. A wider track makes small steps easier to hit. |
Every parameter, with its type and default, is in the reference at the end of this page.
Complete example
The query 25 lines · runs as is
// Range slider: two thumbs (values=[low, high]); the slider's value is the [low, high] pair.
// Here it keeps the places whose average annual rainfall falls inside the band.
[
{
title: "Rainfall band",
name: "CSR:precip_annual_average",
source: "calculate",
opacity: 0.85,
visibility: true,
paramsButtonConfig: [{ type: "query", pressed: true }],
descriptionHtml:
"{{label|text=Annual rainfall (mm)}}" +
"{{slider|id=band|minValue=300|maxValue=2100|increment=50|values=[800,1100]|width=250}}",
beforeCalc: function (inputs) {
var band = inputs.id["band"];
this.setCalculateLegend([
{ color: [41, 128, 185], value: 1, title: "Between " + band[0] + " and " + band[1] + " mm" },
]);
},
expression: function (layersVals, inputs) {
var band = inputs[0]; // [low, high]
return layersVals[0] >= band[0] && layersVals[0] <= band[1] ? 1 : this.nullValue;
},
},
];Customize it
Read the band
The value is always a pair. On the page inputs.id["band"] is [low, high]; inside expression the same pair is inputs[0], so inputs[0][0] is the low end and inputs[0][1] the high end. From any other code, Ext.getCmp("band").getValues() returns the pair.
Show both ends while dragging
The tooltip format of plugins=tip= gets the dragged thumb as {0}, the first thumb as {1} and the second as {2}:
"{{slider|id=band|minValue=300|maxValue=2100|increment=50|values=[800,1100]|plugins=tip={1} to {2} mm|width=250}}"
The other slider options (fieldLabel, hideLabel, disabled, cls…) work as on the Slider page.
Set the band from code
setValue(thumbIndex, value, false, true) moves one thumb and fires the same change as a drag. Index 0 is the low thumb, 1 the high one:
functions: {
showWettest: function () {
var band = Ext.getCmp("band");
band.setValue(1, 2100, false, true);
band.setValue(0, 1600, false, true);
},
},
Recalculate without the countdown
After a thumb is released the layer waits about 2.5 seconds, showing a countdown button, before it recalculates. Set updateAutomatically: true on the layer to recalculate right away.
Pitfalls
- Write
values, with an s.valueis the starting point of a one-thumb slider. - Whether the ends are included is up to your
expression: the example keeps both (>=and<=). - Inside
expressionthere is noinputs.id; read the pair by position. Legend colours insetCalculateLegendare[R, G, B]arrays, never CSS strings.
