SummedArea

Markup: {{summedarea}}

Not available in this documentation right now. It reads raw map cells through a map-server service that is not answering at the moment, so it can neither run here nor be pictured. The description below still applies to a working server.

Key parameters

ParameterExampleWhat it does
runOnClickonAreaSummedName of a function in functions, called when the polygon is closed, with (layersValues, inputs, feature); this is the layer.
textDraw an area to sumLabel of the switch in the layer panel.
idarea_sumNames the tool, e.g. to call Ext.getCmp("area_sum").items.get(0).getSummedLayerValues(layer, feature) from code.
notifyfalseHide the notification shown when the user switches the tool on.

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
// SummedArea: draw a polygon (double-click to close); runOnClick receives one sum per map in
// `name`. The same raw map is read twice: as average density and as covered area.
[
  {
    title: "Population density - area sum",
    name: "CSR:pop_density_estimate_2015,CSR:pop_density_estimate_2015",
    styles: "1,1",
    source: "calculate",
    operation: "average,area",
    opacity: 0.7,
    visibility: true,
    paramsButtonConfig: [{ type: "query", pressed: true }],
    descriptionHtml:
      "{{summedarea|id=area_sum|text=Draw an area to sum|runOnClick=onAreaSummed}}",
    functions: {
      onAreaSummed: function (layersValues) {
        ExtjsUtils.ALERTIFY.log("Area with data: <b>" +
          ExtjsUtils.NUMBER.abbreviateNumber(Math.round(layersValues[1] / 100)) + " km&sup2;</b>");
      },
    },
    expression: function (layersVals) {
      return layersVals[0];
    },
  },
];

Customize it

What the callback receives

layersValues has one sum per map in name, in the same order, followed by two extra entries: the number of cells read, and an array with the count of cells with data for each map. Cells without data are skipped. The layer’s expression result is not summed. feature is the drawn polygon, and this is the layer.

The example reads the same map twice with operation: "average,area": layersValues[0] adds up the average density of each cell, layersValues[1] the area each cell covers, which is the number the notification shows.

Choose the operation

The tool adds up the cells drawn on screen, so with an ordinary map the total changes with the zoom. Maps published as raw maps solve this: read with area, each cell carries the original area it covers; read with sum, the total of the original cells it covers. Their sums stay the same at any zoom. The layer must use an operation the map is published with, plus the map’s name and styles, exactly as in the example; the tokens are listed in the property catalogue.

Use the sums in the calculation

The tool never fills inputs.id[ID]: the sums reach only your callback. To feed them to the calculation, store them in an InputManager, whose setValues also recalculates the layer:

descriptionHtml: "{{summedarea|id=area_sum|text=Draw an area to sum|runOnClick=onAreaSummed}}" +
  "{{inputmanager|id=sums}}",
functions: {
  onAreaSummed: function (layersValues, inputs) {
    inputs.id["sums"].setValues({ area: layersValues[1] }); // recalculates the layer
  },
},

Pitfalls

  • The sum reads the map tiles the browser has loaded, so draw the polygon inside the visible part of the map.
  • The tool switches itself off after every polygon; unselect only changes the message shown when it is switched on.
  • For a rectangle, AreaIntegral is faster: it needs four reads whatever the size, on a map published with the integral operation.

Real maps that use it

AreaIntegral and SummedArea

Reference: every parameter

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.

summedarea · sum inside a drawn area (input)

SummedArea10 entries

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

Create an input of summation in any arbitrary area.

CallBack parameters (context {OpenLayers.Layer}, layersValues {Array[Number]}, inputs {[Object]}, feature {Geometry})
runOnClick {Function} Callback called exactly after sum the map region.,

PS: 'layersValues' return the sum of each internal layer and an adittional value which is the sum of all pixels of resulting layer.
View the complete SummedArea API here.

description

function(name, config, layer, parameters) : Ext.Container# Creates an input of summatory in any arbitrary area.

Creates an input of summatory in any arbitrary area.

CallBack parameters (context {OpenLayers.Layer}, layersValues {Array[Number]}, inputs {[Object]}, feature {Geometry}) runOnClick {Function} Callback called exactly after sum the map region.,

PS: 'layersValues' return the sum of each internal layer and an adittional value which is the sum of all pixels of resulting layer.

name String
Input name "summedarea".
config Object
Properties to customize the element.
layer OpenLayers.Layer
Layer which the widget is defined.
parameters Array
Array de parametros antes do processamento para o input.

Returns Returns an instance of summedarea Input.

getSummedLayerValues

function(layer, feature) : Array# Sums, for each inner layer of the composed map, the values of the rendered cells that fall inside a polygon (values decoded from the tile colours through the layer legend, null cells skipped).

Sums, for each inner layer of the composed map, the values of the rendered cells that fall inside a polygon (values decoded from the tile colours through the layer legend, null cells skipped). This is what runOnClick receives as layersValues; call it from code (Ext.getCmp(id).items.get(0).getSummedLayerValues(layer, feature)) to sum any polygon feature. The returned array has one sum per inner layer followed by two extra entries: the number of cells read from the last layer and an array with the count of non-null cells of every layer.

layer OpenLayers.Layer.Composed
The composed layer whose tiles are read (normally the tool's own layer).
feature OpenLayers.Feature.Vector
Polygon feature delimiting the area to sum.

Returns [sum layer 0, ..., sum layer n-1, cellCount, [nonNull layer 0, ..., nonNull layer n-1]].

iconCls

String= cmn-toggle-icon# Defines the CSS class of the toggle switch icon; replace the default to restyle the switch.

Defines the CSS class of the toggle switch icon; replace the default to restyle the switch.

|iconCls=my-toggle-icon|

id

String# Defines the id of the tool: the key used in inputs.id[ID] and the id of the container component (Ext.getCmp(id); the switch itself is Ext.getCmp(id).items.get(0)).

Defines the id of the tool: the key used in inputs.id[ID] and the id of the container component (Ext.getCmp(id); the switch itself is Ext.getCmp(id).items.get(0)). Generated when omitted.

|id=sum_tool|

labelBefore

Boolean= false# Set true to render the text label before (left of) the toggle switch instead of after it.

Set true to render the text label before (left of) the toggle switch instead of after it.

|labelBefore=true|

notify

Boolean= true# Set false to suppress the notification shown when the tool is activated.

Set false to suppress the notification shown when the tool is activated.

|notify=false|

runOnClick

function# Defines the callback run when the user finishes drawing the polygon (double-click closes it), with the values already summed.

Defines the callback run when the user finishes drawing the polygon (double-click closes it), with the values already summed. Called as runOnClick(layersValues, inputs, feature) with this = the layer: layersValues is the array described in getSummedLayerValues, inputs is layer.getInputs() and feature the drawn OpenLayers.Feature.Vector polygon. The name is resolved as a key of the layer functions object, then as a global function, then as inline function text. The tool deactivates itself after the callback.

|runOnClick=onClickSum|
functions: {
    onClickSum: function(layersValues, inputs, feature) {
        ExtjsUtils.ALERTIFY.log('Sum of layer 0: ' + layersValues[0] + ' (' + layersValues[layersValues.length - 1][0] + ' cells)');
    }
}

text

String# Defines the text shown next to the toggle switch.

Defines the text shown next to the toggle switch.

|text=Sum an area|

unselect

Boolean= true# Only changes the activation message (true: one selection expected, false: several); the tool always deactivates itself after a polygon is summed.

Only changes the activation message (true: one selection expected, false: several); the tool always deactivates itself after a polygon is summed.

|unselect=false|

value

Array.<Number># Value stored in inputs.id[ID]: an array meant to hold the last layersValues (one sum per inner layer, see getSummedLayerValues).

Value stored in inputs.id[ID]: an array meant to hold the last layersValues (one sum per inner layer, see getSummedLayerValues). In the current implementation the tool does not copy the sums into it after drawing — it stays empty — so read the results in runOnClick and store what you need with an InputManager (setValues). The input is registered on the forceupdatelayer event of the switch (Ext.getCmp(id).items.get(0).forceUpdateLayer() recalculates the layer).

{{summedarea|id=sum_tool|runOnClick=onClickSum}}{{inputmanager|id=sums}}
functions: {
    onClickSum: function(layersValues, inputs, feature) {
        inputs.id['sums'].setValues({areaSum: layersValues[0]}); // recalculates the layer
    }
}