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
- Open the list and pick 300: after the countdown, only the forest above 300 t/ha of biomass stays teal.
- Pick 100: lighter forest joins in, and the legend reads Above 100 t/ha.
- 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.
- More ways to use it
Key parameters
| Parameter | Example | What it does |
|---|---|---|
data | [["200"],["100"],["300"]] | The entries, each a one-element array. The text shown is the value stored; a second element is ignored. |
id | level | Names the choice: read it as inputs.id['level'] in beforeCalc, and by position (inputs[0] here) inside expression. |
fieldLabel | Above (t/ha) | Label shown at the left of the list. |
editable | true | Lets the user type to jump to an entry. Only values in the list are accepted (default false). |
width | 160 | Width of the list in pixels (default 190). The layer panel is about 300 pixels wide, label included. |
onSelect | onLevelPicked | A function in the layer’s functions, run on each pick with (combo, record, index). The layer recalculates anyway. |
Every parameter, with its type and default, is in the reference at the end of this page.
Complete example
The query 23 lines · runs as is
// Combobox: pick a value from a list. data is a list of one-value entries - the list shows the value itself;
// the input holds the selected value (the first entry until the user picks another).
[
{
title: "Forest biomass above a chosen level",
name: "CSR:biomassa_baccini_bioma_am",
source: "calculate",
opacity: 0.85,
visibility: true,
paramsButtonConfig: [{ type: "query", pressed: true }],
descriptionHtml:
"{{combobox|id=level|fieldLabel=Above (t/ha)|editable=false|width=160" +
'|data=[["200"],["100"],["300"]]}}', // one value per entry: the list shows the values themselves
beforeCalc: function (inputs) {
this.setCalculateLegend([
{ color: [22, 160, 133], value: 1, title: "Above " + inputs.id["level"] + " t/ha" },
]);
},
expression: function (layersVals, inputs) {
return layersVals[0] >= parseFloat(inputs[0]) ? 1 : this.nullValue;
},
},
];More examples
Other ways to use Combobox, each a complete query that runs as is - like the one above.
Pick the map
The list switches which map the layer shows - one layer, three maps of the Amazon, changed with changeLayers when the reader picks.
Click the picture to run it live. Full-size picture
The query 25 lines · runs as is
// Pick the map: the list switches which map the layer shows - one layer, three maps of the Amazon, changed with changeLayers when the reader picks.
// Every map the layer may show is declared: the first in name, the others in otherNames.
// onSelect runs on each pick with (combo, record); record.get("value") is the text picked.
[
{
title: "One layer, three maps",
name: "CSR:biomassa_baccini_bioma_am",
otherNames: "CSR:biomassa_inv_br_redd,CSR:altimetria",
source: "calculate",
opacity: 0.8,
visibility: true,
paramsButtonConfig: [{ type: "query", pressed: true }],
descriptionHtml:
"{{combobox|id=shown_map|fieldLabel=Map|editable=false|width=170|onSelect=showMap" +
'|data=[["Forest biomass"],["Carbon stock"],["Elevation"]]}}' +
"{{legendhtml}}",
functions: {
showMap: function (combo, record) {
var maps = { "Forest biomass": "biomassa_baccini_bioma_am", "Carbon stock": "biomassa_inv_br_redd", "Elevation": "altimetria" };
var map = maps[record.get("value")];
this.changeLayers([{ name: "CSR:" + map, styles: map + "_1", index: 0 }]); // a map's default style is <map>_1
},
},
},
];Customize it
Values are text
The value is the selected entry as a string, "300", so convert it with parseFloat before comparing numbers. The first entry is selected when the map opens: put the default first. The list picks one value; there is no multiple selection.
Show names, compute with numbers
Because the text shown is the value stored, list readable names and translate them inside expression. A literal written inside the function is fine there:
descriptionHtml:
'{{combobox|id=forest|fieldLabel=Forest|editable=false|data=[["Sparse"],["Dense"]]}}',
expression: function (layersVals, inputs) {
var limits = { Sparse: [0, 150], Dense: [250, 99999] }; // t/ha
var range = limits[inputs[0]];
return layersVals[0] >= range[0] && layersVals[0] <= range[1] ? 1 : this.nullValue;
},
Run code when the user picks
onSelect names a function in the layer’s functions. It runs on every pick with (combo, record, index) and this = the layer; record.get("value") is the chosen text. Use it for side effects, for example swapping the map the layer reads when the list holds map names:
functions: {
onRegionSelected: function (combo, record, index) {
this.changeLayers({ name: "CSR:" + record.get("value"), index: 0 });
},
},
Select from code
Ext.getCmp("level").getValue() reads the selection and Ext.getCmp("level").setValue("300") changes it. Setting it from code does not count as a pick, so the layer does not recalculate: add an InputManager and call its forceRecalc() after.
Add the legend and the opacity
{{legendhtml}} puts the map legend in the panel, next to the list, and the layer’s opacity (0 to 1) sets how transparent it starts. See Legend and opacity slider.
Pitfalls
data=[["01", "January"]]shows and stores01: the second element is ignored.onSelectis looked up only in the layer’sfunctions, never among global functions.- Inside
expressionthere is noinputs.id; read the choice by position. Legend colours insetCalculateLegendare[R, G, B]arrays.
