Widget catalogue

Every widget the markup accepts, with its parameters, its runtime methods and the shape of the value it contributes to a calculation - generated from the platform source.

Mappia reference, section “Tools”. Page: https://mappia.earth/reference/widget-catalogue/

Every tag the widget markup accepts, as the platform declares it. A widget’s parameters are written inside its braces (``); the entries below are that parameter list, plus the methods and the input value each widget exposes to a layer’s callbacks. How the markup itself is parsed - escaping, nested keys, handler resolution - is in the previous chapter.

MarkupSyntax — Markup rules for every widget

Rules shared by every tool written inside descriptionHtml as : how parameters are parsed, the values they accept and the special parameters (getid, function, on_<event>, isnumeric, cls, key=false, nested a=b=c, escaped = ) available to all tools. Function-valued parameters (handler, runOnClick, runOnHover, onSelect, …) are resolved in this order: a key…

Full descriptions, defaults and examples: MarkupSyntax in the API reference.

HTML — Free HTML

Any HTML is possible to be added to the layer description.

Full descriptions, defaults and examples: HTML in the API reference.

AreaIntegral — areaintegral · sum inside a rectangle (input)

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:

Full descriptions, defaults and examples: AreaIntegral in the API reference.

Button — button · push or toggle button

Create a simple button to user interact with the map.

Full descriptions, defaults and examples: Button in the API reference.

Checkbox — checkbox · on/off, calls a function

A checkbox that calls a function of the layer when toggled. It is not registered as an input: read its state inside the handler. Usage:

Full descriptions, defaults and examples: Checkbox in the API reference.

Combobox — combobox · pick from a list (input)

It creates an input of ComboBox tool where the value is selectable from a list. Usage: ‘’ or examples.

Full descriptions, defaults and examples: Combobox in the API reference.

FileField — filefield · open a local file (input)

Tool that allows handle and local files. PS: This object cannot be sent to ‘expression’. Usage: }

Full descriptions, defaults and examples: FileField in the API reference.

Hoverpixel — hoverpixel · value under the mouse (input)

Create a tool to instantly inspect pixel under mouse. The value of the map can also be used as input for another functions. Usage:

Full descriptions, defaults and examples: Hoverpixel in the API reference.

InputManager — inputmanager · values kept for your functions (input)

Tool to store local variables to be used in others functions callbacks. PS: DOM elements cannot be used in ‘expression’ context, because them cannot be sent to WebWorkers (javascript language limitation). Usage: ‘’

Full descriptions, defaults and examples: InputManager in the API reference.

Label — label · text

Create a simple label element to display some text. Usage:

Full descriptions, defaults and examples: Label in the API reference.

LegendHtml — legendhtml · legend of the calculated map

Create a tool with the map legends at any place of the query description. Usage: ‘’

Full descriptions, defaults and examples: LegendHtml in the API reference.

LiveComposedSplit — livecomposedsplit · split-screen comparison

Compare two styles of a Composed layer with a live split-screen slider on the map. The layer must be a Composed layer (typically the same WMS layer twice in name with two styles). Put the tool in descriptionHtml, open the query panel, choose left/right styles, then press Compare to show a draggable vertical divider. Required parameters: displayNames, layerNames (same order and length).…

Full descriptions, defaults and examples: LiveComposedSplit in the API reference.

LoadCsv — loadcsv · load a CSV table (input)

Describes the API to read and manipulate ExtjsUtils.CSV.CsvTable files from URL.

| Name | Type | Description | |—|—|—| | columnNameToInd | function(columnName) : Number | Get the index of a column with the ‘columnName’ name. @param columnName {String} Column name to search for. | | columnNamesToIndexes | function(columnNames) : Array.<Number> | Resolves column names to column indexes: every string entry is looked up in the header (-1 when absent) and every numeric entry is kept as it is. A single value is accepted in place of the array. This is what getLines/createIndexes do with their… | | cors | Boolean | Downloads the CSV through the Mappia CORS proxy; use it for servers that do not send CORS headers. | | createIndexes | function(columns) | Create indexes for faster search. PS: Indexes are used to faster results on “getLines” calls, apply only when all [columns] are indexes. @param columns {Array} (Optional) Array of indexes/names of the filtered columns. | | getColunsInd | function() : Array.<String> | Returns a copy of the header row — the column names, in order — so query code can discover columns instead of hard-coding indexes. The name is a historical typo of getColumnsInd, kept for compatibility (the platform and many queries call it by this… | | getLineCount | function() : Number | Number of data lines in the table (the header line is not counted). | | getLines | function(columns, values, includeHeader) :… | Returns the lines (arrays of cell strings) whose cells in columns equal the corresponding entries of values. Columns may be given by index or by header name; to filter on several columns give one value per column, e.g. getLines([1, "Year"], ["Park A",… | | [getValue](/api/#LoadCsv.getValue) | function(column, line, includeHeader) : String | Get a value by the matrix index and column. @param column {Number} Column index (First index is 0). @param line {Number} Line index (First index is 0). @param includeHeader {boolean} True to include the header line in the matrix index, False to ignore. | | [id](/api/#LoadCsv.id) | String | Defines the id of the input; it is the key used to read the table in inputs.id[ID] (required, the tool renders nothing visible). | | [removeEmptyLines](/api/#LoadCsv.removeEmptyLines) | boolean | Ignore the empty lines, removing them from the parsed CSV. True to remove the empty lines from the CSV. | | [setValue](/api/#LoadCsv.setValue) | function(column, line, value) | Change a cell value by its cell index. @param column {Numeric} Column index. @param line {Numeric} Line index to change (ignore the header information when it exists). @param value {*} New value to replace the older value. | | [trim](/api/#LoadCsv.trim) | Boolean | Requests that cell values be trimmed of surrounding whitespace. The flag is accepted and forwarded to the CSV parser, but the current parser ignores it (cells are stored as written, quotes removed), so trim values yourself when needed. Kept for compatibility… | | [url](/api/#LoadCsv.url) | String | Defines the URL of the CSV file to download (required). Relative URLs are resolved against the Mappia host, so backend endpoints such as /wmtp/calc/… work; escape = inside query strings as =. The layer waits for the download before calculating. | | [value](/api/#LoadCsv.value) | ExtjsUtils.CSV.CsvTable | Value stored in inputs.id[ID]: an ExtjsUtils.CSV.CsvTable wrapping the parsed file (first row = header). Read it with the CsvTable methods listed in this group (getLines, getValue, columnNameToInd, createIndexes, getLineCount`…). It is… |

Full descriptions, defaults and examples: LoadCsv in the API reference.

LoadJson — loadjson · load JSON (input)

Tool to load a remote JSON and use it with map, this object can store string, values and functions. Usage:

Full descriptions, defaults and examples: LoadJson in the API reference.

OpacitySlider — opacityslider · layer opacity

Create a slider to change the map opacity. Usage: ‘’

Full descriptions, defaults and examples: OpacitySlider in the API reference.

PickPoint — pickpoint · pick a point on the map (input)

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:

Full descriptions, defaults and examples: PickPoint in the API reference.

Slider — slider · number or range (input)

Tool that allows users to create a slider that the user can drag and change its value as map input.

Full descriptions, defaults and examples: Slider in the API reference.

SummedArea — summedarea · sum inside a drawn area (input)

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.

Full descriptions, defaults and examples: SummedArea in the API reference.

Textfield — textfield · text box (input)

Tool that allows the user to input a single line of text. Usage: ‘’

Full descriptions, defaults and examples: Textfield in the API reference.

Timeline — timeline · scenarios over time (input)

Display a spatial scenarios changes in a timeline.

Full descriptions, defaults and examples: Timeline in the API reference.

Window — window · floating window (input)

Tool that allows to show contents in an interactive floating window. It can only be shown when the layer is visible.

Full descriptions, defaults and examples: Window in the API reference.

ZoomLevel — zoomlevel · current zoom (input)

A hidden input whose value is the current map zoom level; the layer recalculates whenever the zoom changes. Usage: then inputs.id[‘zoom’] in beforeCalc/expression

Full descriptions, defaults and examples: ZoomLevel in the API reference.