AMAZONES - Fire

View query content Open in editor mode Open in larger window.

Part of the project Amazon Ecoservices (AMAZONES).

This map belongs to Amazon Ecoservices (AMAZONES) and is shown on its fire page. The “Fire” group maps simulated fire recurrence, simulated and observed fire scars, and effective and potential losses. Three query layers turn these into comparisons between places: “Potential economic losses (US$/ha)”, “Effective economic losses (US$/ha/year)” and “Total burned area (ha)”. In each one, choose municipalities or protected areas (and, for the two loss layers, the mean or the total), then click areas on the map: each click adds or removes an area, and a column chart compares the selection. The code is query 10.

How it is built

• Comboboxes per layer. Each query layer has its own combobox for the kind of region, and the two loss layers a second one for mean or total losses. See Combobox.
• Pickpoints collect the clicked areas. Three pickpoint widgets (markLayerInd=1) store the clicked polygons’ attributes; beforeCalc reads them with getAttributes(1) and clears them when the region type or item changes. See PickPoint.
• changeLayers swaps the map. A combobox change loads the municipalities or protected-areas map, with the style of the chosen item. See the execution model.
• Column charts. Each layer draws one Highcharts column per picked area, in the area’s map colour. See charts.
• Same pattern, three times. The three layers repeat the same beforeCalc with different map names and attribute columns, which makes this query a compact reference for the pattern also used in the rubber map.
• Groups are arrays whose first item gives the title and color. See the layer and group model.

Try this

• In “Total burned area (ha)”, choose Protected Areas and click three of them.
• In “Effective economic losses (US$/ha/year)”, switch from mean to total losses: the selection is cleared and the map takes the style of the new item.

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.

legendTitle

String= string.emptyproperty# Defines the text that will be displayed at the top of the 'legendhtml tool' declared at the 'descriptionHtml' property

Defines the text that will be displayed at the top of the 'legendhtml tool' declared at the 'descriptionHtml' property

[
  {
     title: 'Example custom legend title',
     color: '#FFA500',
     elements: [
        {
           title: 'Map of the geology in Brazil',
           name: 'CSR:geologia',
           source: 'calculate',
           visibility: true,
           legendTitle: 'This is a custom legend title',
           descriptionHtml:
              '{{legendhtml}}',
        },
     ],
  },
]

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;
       },
     },
   ],
 },
]