Combobox   PickPoint   Highcharts   changeLayers   beforeCalc

AMAZONES - Non-timber rubber

AMAZONES - Non-timber rubber

Part of the project Amazon Ecoservices (AMAZONES).

This map belongs to Amazon Ecoservices (AMAZONES) and is shown on its rubber page. The “Rubber” group maps the favourability, yield and rent of rubber across the Amazon. The query layer “Rubber values per region” turns that into a comparison: choose whether to work with municipalities or protected areas, choose the item

  • total potential production (kg), mean productivity (kg/ha) or mean rent (US$/ha/year) - then click areas on the map. Each click adds or removes an area, and a column chart compares the areas you picked. The code is query 3.

How it is built

  • Two comboboxes. One picks the kind of region, the other the item to compare. See Combobox.
  • Collecting clicked areas. A pickpoint widget with markLayerInd=1 gathers the attributes of each clicked polygon; beforeCalc reads them with getAttributes(1) and clears them with removeAttribute when a combobox changes. See PickPoint.
  • Switching the map. When either combobox changes, beforeCalc calls changeLayers to put the municipalities or protected-areas map in the layer, with the style of the chosen item. See the execution model.
  • The chart. Highcharts draws one column per picked area, in the colour the area has on the map. See charts.
  • No pixel calculation. The layer’s expression is null: the query only reacts to widgets and redraws the chart, while the maps come straight from the server.
  • Groups. “Base Maps”, “Rubber” and “Queries” are arrays whose first item gives the group title and color. See the layer and group model.

Try this

  • Choose Protected Areas and “Mean rent (US$/ha/year)”, click three protected areas and compare the bars.
  • Click one of them again to drop it from the chart.

Reference: the parameters used here

Generated from the platform source. Every entry, searchable, is in the API reference; the raw data is api.json. Open an entry for its description, parameters and example; # links to it.

combobox · pick from a list (input)

Combobox2 entries

Written in a layer's descriptionHtml as {{combobox|parameter=value|...}}

It creates an input of ComboBox tool where the value is selectable from a list.
Usage: '{{combobox}}' or examples.
This button is created from Ext.form.ComboBox for customized properties click on API here.

data

Array.<Array.<String>>= undefined# Defines the data that will be displayed in the Combobox.

Defines the data that will be displayed in the Combobox.

|data = [["Val_1"], ["Val_2"],..]|

editable

Boolean= false# Determines if the Combobox is editable.

Determines if the Combobox is editable. That is, if it allows the user to type inside the input field. Set it true to allow it, false otherwise.

|editable=true|

pickpoint · pick a point on the map (input)

PickPoint3 entries

Written in a layer's descriptionHtml as {{pickpoint|parameter=value|...}}

Creates an input that allows users to interact with the real cell or feature value at any position.

The returned values are from the original mal to the selected point,
in case of RASTER is returned a cell value, in case of shapefile the geometry is returned too.
Usage: {{pickpoint}}
View the complete PickPoint API here

getAttributes

function(mapIndex) : Array.<Object># Returns the attributes of every selected point for one of the layers of the composed map: one object per selection (in click order) holding the feature data of that layer, or {} when the click …

Returns the attributes of every selected point for one of the layers of the composed map: one object per selection (in click order) holding the feature data of that layer, or {} when the click hit nothing on it (e.g. a raster). This is the usual way to read the selection in beforeCalc.

mapIndex Number
0-based index of the layer inside the composed layer (name order).

Returns Attribute objects of the selected features on that layer.

beforeCalc: function(inputs) {
    var picked = inputs.id['property_pick'].getAttributes(1);
    var names = picked.map(function(attrs) { return attrs.Name; });
}

markLayerInd

Number# Defines by layer index which one to draw its geometry when a click event happens.

Defines by layer index which one to draw its geometry when a click event happens. (0-indexed)

|markLayerInd = 0|

removeAttribute

function(index)# Removes one selection (by its position in the getAttributes list) from the map and from the selection list.

Removes one selection (by its position in the getAttributes list) from the map and from the selection list. An invalid index changes nothing.

index Number
0-based index of the selection to remove (same order as getAttributes).
var pick = inputs.id['property_pick'];
for (var i = pick.getAttributes(1).length - 1; i >= 0; i--) {
    if (!pick.getAttributes(1)[i].Name) pick.removeAttribute(i);
}

Highcharts · charts

Highcharts1 entry
Highcharts is a library used to easly create interactive charts.
Usage: (Highcharts.chart(DOM_ID, {});)
Highcharts JS has a complete set of examples and a nice documentation that can be accessed here.

chart

function(renderTo, options) : Object# Highcharts is loaded by the calculator and editor pages, so a query can call Highcharts.chart(...) without loading anything: put a container in the layer's descriptionHtml and create the chart …

Written as Highcharts.chart

Highcharts is loaded by the calculator and editor pages, so a query can call Highcharts.chart(...) without loading anything: put a container in the layer's descriptionHtml and create the chart once the panel exists - in onInputsReady, in beforeCalc or in a widget handler - then update it as results arrive instead of recreating it. ExtjsUtils.HIGHCHART.getById(id) gives the chart back from the container's id, which is what makes the update possible from another callback.

The bundled build covers the standard chart types plus highcharts-more. Extra modules are loaded on demand with AsyncLoader.loadScriptOnce (see the Sankey entry).

renderTo String
Id of the container element declared in descriptionHtml.
options Object
The Highcharts configuration object.

Returns The chart instance.

descriptionHtml: '<div id="emissions_chart" style="height:220px"></div>',
functions: {
    drawChart: function (values) {
        var chart = ExtjsUtils.HIGHCHART.getById('emissions_chart');
        if (chart) { chart.series[0].setData(values); return; }
        Highcharts.chart('emissions_chart', {
            chart: { type: 'column' },
            title: { text: 'Emissions by year' },
            xAxis: { categories: ['2020', '2021', '2022'] },
            series: [{ name: 'Mt', data: values }]
        });
    }
}

Calculated layers: methods (this.)

LayerInternal1 entry
Methods of a calculated layer that your functions call on this - this.setCalculateLegend in beforeCalc, this.changeLayers to switch its maps, this.getInputs... They are not keys you write in the layer.
View all layer internal helper functions API here.

changeLayers

function(newConfigs, force)method# Replaces an internal layer at a given index.

Written as this.changeLayers

Replaces an internal layer at a given index. PS: It's highly recommended to pass multiple configurations in an array, instead of calling this function multiple times in the same callback.

newConfigs Array|Object
One or more layers configurations with a property 'index' indicating the replacing layer. Each config object must contain at least the following properties: [{name: 'MAP_FULL_NAME', styles: 'MAP_STYLE', index: 'MAP_INDEX_TO_CHANGE'}, ... ]
force Boolean
Force redraw even if no change is done when the layer is the same.
{
     name: "CSR:rodovias,CSR:municipios",
     otherNames: "CSR:roads",
     beforeCalc: function(layerVals, inputVals) {
         this.changeLayers([{name: 'CSR:roads', styles: fMapName + "_1", index: 0}]);
     }
  }

Layer callbacks: functions you write

LayersFunctions1 entry
Functions you write in a layer and the platform calls: expression, afterCalc and legendColor on calculated layers; beforeCalc, onInputsReady, onVisibilityChange and the functions map on calculated and file layers. Inside them this is the layer - except in expression, see Kinds of layer.

beforeCalc

function= nullcallback# This function is executed before any calculation is made in the 'expression()' function.

This function is executed before any calculation is made in the 'expression()' function. It runs on calculated layers (source: 'calculate'), even when there is no 'expression()', and on file layers (source: 'file'), where it runs again whenever an input changes or a resource finishes loading (see VectorLayer.generateNewLegend).

inputs Array
The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
[
  {
     title: 'Example of beforeCalc function',
     color: '#FFA500',
     elements: [
        {
           title: 'This beforeCalc function will show a message at the bottom right of the screen',
           name: 'CSR:geologia',
           source: 'calculate',
           visibility: true,
           paramsButtonConfig: [
              {
                 type: 'query',
                 pressed: true
              },
           ],
           descriptionHtml:
              '{{label|text=The beforeCalc function will be called after every user interaction before any calculation}}'
              +
              '{{textfield|fieldLabel=Enter your name|id=textInput|labelStyle=text-align:center;}}',
           beforeCalc: function(inputs) {
              let inputValue = inputs[0];
              ExtjsUtils.ALERTIFY.log('Hello ' + inputValue + '!');
           },
        },
     ],
  },
]

Layer properties

LayersProperties2 entries
Keys of a layer object: which map it shows (name, source, styles), how it looks (title, opacity, visibility) and how its row and panel behave.

opacity

Numeric= 1property# Define the opacity of the Layer.

Define the opacity of the Layer. The opacity is a value between 0 and 1 that is a scale for its transparency. 0 is completely transparent. 1 is completely visible.

[
 {
   title: 'Example of opacity in a Layer',
   color: '#666699',
   elements: [
     {
       title: 'This Layer has its opacity set to 50% of the original visibility',
       name: 'CSR:geologia',
       source: 'local',
       visibility: true,
       opacity: 0.5,
     },
   ],
 },
]

updateAutomatically

Boolean= falseproperty# Decides what happens when the reader changes an input of the layer's panel (a widget in descriptionHtml).

Decides what happens when the reader changes an input of the layer's panel (a widget in descriptionHtml). true: the layer is calculated again at once. false (the default): a short countdown starts, with a button to refresh now, so several changes make one calculation. The layer is drawn either way. Applies to calculated and file layers.

[
 {
   title: 'The map will be automatically calculated',
   color: '#666699',
   elements: [
     {
       title: 'This layer is showing just one type of relief',
       name: 'CSR:geologia',
       source: 'calculate',
       visibility: true,
       updateAutomatically: true,
       expression: function(layersVals, inputs) {
         // layerVals have the value of the legend applied in every pixel of the map
         let mapValue = layersVals[0];

         // Remove every type of relief that is not 'Mantiqueira'
         if(mapValue != 'Mantiqueira') { // If the pixel is not 'Mantiqueira'
             return undefined; // Don't show the pixel
         }

         // If the pixel is 'Mantiqueira', return the value of the pixel
         return mapValue;
       },
     },
   ],
 },
]