AreaIntegral

Markup: {{areaintegral}}

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
runOnClickonRectangleName of a function in functions, called after the second click with (layersValues, inputs, bbox, pixel, lastInfo); this is the layer.
textSum a rectangle (two clicks)Label of the switch in the layer panel.
idrectangle_sumNames the tool: inputs.id["rectangle_sum"] holds the sums of the last rectangle, one per map.
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 23 lines · runs as is
// AreaIntegral: two clicks define a rectangle; the tool sums each map inside it using the
// summed-area ("integral") decoding, so the map must be published with that operation.
[
  {
    title: "Population density - rectangle sum",
    name: "CSR:pop_density_estimate_2015",
    styles: "1",
    source: "calculate",
    operation: "integral",
    opacity: 0.7,
    visibility: true,
    paramsButtonConfig: [{ type: "query", pressed: true }],
    descriptionHtml:
      "{{areaintegral|id=rectangle_sum|text=Sum a rectangle (two clicks)|runOnClick=onRectangle}}",
    functions: {
      // bbox = [minLon, minLat, maxLon, maxLat] in EPSG:4326
      onRectangle: function (layersValues, inputs, bbox) {
        ExtjsUtils.ALERTIFY.log("Sum inside the rectangle: <b>" +
          ExtjsUtils.NUMBER.abbreviateNumber(layersValues[0]) + "</b>");
      },
    },
  },
];

Customize it

The layer it needs

The tool does not add cells up one by one. It reads the map as a summed-area table, where each cell holds the total of everything above and to the left of it, so four reads at the corners give the sum of any rectangle, however large. That only works when the layer reads a map published with that table: operation: "integral" together with the map’s name and styles, exactly as in the example. Keep those three keys together. With an ordinary map the number means nothing, and with a map that does not offer the operation the layer stays empty and the console shows Operation integral is not defined for layer ....

What the callback receives

  • layersValues: one sum per map in name, in the same order.
  • bbox: the rectangle as [minLon, minLat, maxLon, maxLat], in degrees.
  • pixel: the {x, y} screen position of the second click.
  • lastInfo: {first, second}, the two clicks as {lon, lat} in degrees.

this is the layer. Sums get large quickly; ExtjsUtils.NUMBER.abbreviateNumber(value) shortens them for display, as the example does.

Use the sums in the calculation

The tool keeps the last sums in inputs.id[ID], but it does not recalculate the layer by itself. When beforeCalc must see the new sums, call Ext.getCmp("rectangle_sum").items.get(0).forceUpdateLayer() at the end of your callback.

Pitfalls

  • Both corners must fall on the map’s data. A corner outside it has no value to read, and no sum is reported.
  • After the first click the tool shows a short notification (in Portuguese) asking for the second corner.
  • The tool switches itself off after every rectangle; unselect only changes the message shown when it is switched on.
  • For a free shape instead of a rectangle, use SummedArea: the user draws a polygon.

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.

areaintegral · sum inside a rectangle (input)

AreaIntegral9 entries

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

Two clicks on the map define a rectangle; the tool sums the map values inside it using summed-area (integral) maps, so it only works with maps published with the 'integral' operation.
Callback parameters (layersValues {Array[Number]}, inputs {Array}, boundingBox {Array[Number]} in EPSG:4326, pixel {x,y}, lastInfo {first, second})
Usage: {{areaintegral|runOnClick=onAreaSummed}}
View the complete AreaIntegral API here.

getLayerValues

function(mousePoint, layer) : Array.<Number>|null# Reads the composed map at one screen position: one value per inner layer (decoded from the tile colours through the legend, null cells read as 0) plus one extra entry with the layer expression result for those values.

Reads the composed map at one screen position: one value per inner layer (decoded from the tile colours through the legend, null cells read as 0) plus one extra entry with the layer expression result for those values. The tool samples the four corners of the rectangle with it and combines them as a summed-area table (sum = minXY + maxXY - minXmaxY - maxXminY), which is why the maps must be published with the integral operation. Returns null when the layer is hidden or the position is outside the map data.

mousePoint Object
Absolute screen position {x, y} to sample.
layer OpenLayers.Layer.Composed
The composed layer to read (normally the tool's own layer).

Returns [value of layer 0, ..., value of layer n-1, expression result], or null.

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=integral_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 after the second click closes the rectangle, with the sums computed.

Defines the callback run after the second click closes the rectangle, with the sums computed. Called as runOnClick(layersValues, inputs, boundingBox, pixel, lastInfo) with this = the layer: layersValues has one summed value per inner layer (see getLayerValues), inputs is layer.getInputs(), boundingBox is [minLon, minLat, maxLon, maxLat] in EPSG:4326, pixel the {x, y} of the second click and lastInfo the {first, second} {lon, lat} of the two clicks. 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=onAreaSummed|
functions: {
    onAreaSummed: function(layersValues, inputs, boundingBox, pixel, lastInfo) {
        ExtjsUtils.ALERTIFY.log('Sum inside ' + boundingBox.join(', ') + ': ' + layersValues[0]);
    }
}

text

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

Defines the text shown next to the toggle switch.

|text=Sum a rectangle|

unselect

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

Only changes the activation message (true: one selection expected, false: several); the tool always deactivates itself after the second click.

|unselect=false|

value

Array.<Number># Value stored in inputs.id[ID]: the layersValues array of the tool — one summed value per inner layer of the composed map for the last rectangle (empty before the first one).

Value stored in inputs.id[ID]: the layersValues array of the tool — one summed value per inner layer of the composed map for the last rectangle (empty before the first one). The array is updated in place after the second click, so beforeCalc/expression always read the latest sums. The input is registered on the forceupdatelayer event of the switch, which the tool does not fire by itself: react inside runOnClick, or call Ext.getCmp(id).items.get(0).forceUpdateLayer() there to recalculate the layer with the new sums.

{{areaintegral|id=integral_tool|runOnClick=onAreaSummed}}
functions: {
    onAreaSummed: function(layersValues, inputs) {
        Ext.getCmp('integral_tool').items.get(0).forceUpdateLayer(); // beforeCalc will see inputs.id['integral_tool']
    }
}