API

Mappia API

 
URL Parameters
Grouping maps
Layer properties configuration
Layer internal functions
Button widget
Combobox widget
HoverPixel tool
Tooltip helper
Extjs 3.4
Alertify dialogs
InputManager tool
Web Raw Maps
Query utils
Map Legend HTML
Opacity slider tool
Csv manager tool
Slider tool
Zoom
Textfield tool
Label element tool 'label'
HTML contents
LoadJson tool
PickPoint tool
Timeline tool
Asynchronous resource loader
Highcharts library
QGIS stylization
Sankey transitions chart
Summed Area tool
Floating Window
Layer
Number
Source
Request
Timeline Panel
  URL Parameters

These options are defined in query url, and can configure tools and view settings.
Usage (IN LINK URL): https://maps.csr.ufmg.br/editor/?lang=eng&map=&queryid=78&extent=&tools=helpintro,layerchooser,zoomextent,customzoom,getfeature,hovershowlegend&options=scale,startopened,hidestylechooser,enablequeries&visiblelayers=1000

 

visibleLayers: Number

Define the initially visible layers.

Example:
visibleLayers < 0  // Lower than zero: shows the first defined maps as visible (From top to bottom).
Example:
visibleLayers > 0 // Higher than zero: shows the last defined maps as visible (From bottom to top).
Example:
visibleLayers = 0 // Start with no layer visible.
Example:
visibleLayers = 'custom' // Visibility defined in each map by 'visibility: {Boolean}' property.
Example:
visibleLayers = null // No limit of visible layers.
Defaults to 100
  Grouping maps

Defines groups of {ConfigLayers}, each layer in the same group is shown under the same sub-menu. A group of layers is defined by an array of one Group definition followed by his inside layers declarations as: [{GroupingMaps{title, color}}, {ConfigLayer}, ...].
GroupingMaps.title: {String} Title of the group of maps
GroupingMaps.color: {String} RGB string content.
Usage: [{title: "Prodes Group", color: "#8F7C7C"}, {name:'CSR:prodes', source:'local'}]

  Layer properties configuration

Configurable exhibition of each map, defining interactions, possible internal maps and applied calculations among them.

 

getLayerLegend: function(composedLayer, index) : Array

Get the associated layer legend content by its index. PS: The legend format is the same as expected by the composedLayer.setCalculateLegend function. Usage:this.setCalculateLegend(ExtjsUtils.Layer.getLayerLegend(composedLayer, 0));
@param composedLayer {OpenLayers.Layer.Composed} Layer composed.
@param index {Numeric} Index of the inside layer.

 

functions: Array|null

Allows to create custom functions on the context of each layer. These functions can be used in any tool callbacks, in the tool callback must use the same name in this 'functions' property.
PS1: Functions only visible inside this layer.
PS2: Functions accessed by tools callbacks using his property name as: (this.functions.['onClick']) to refer the following onClick function:
functions: {
onClick: function() {
ExtjsUtils.ALERTIFY.log("Clicked Button");
}
}

 

extents: Array

Override the map extents with a custom one. Extents must be in EPSG:4326 (coordinates in lat,long) array: [minX, minY, maxX, maxY] PS: All tiles within area will be requested.

Example:
[-180.0000, -90.0000, 180.0000, 90.0000] for full world.
 

legendColor: function

Function to treat the color associated to each value/category. PS: This function callback is called in layer context.
@param color {Array} Three numbers (0 to 255) to define the RGB color.
@param inputs {Array} Array of widgets.
@param lastValue {String} Last maximum title.
@param currentValue {String} Current maximum title.
@param ruleIndex {Numeric} Rule input index.

Example:
{
     ...,
     legendColor: function(color, inputs, lastValue, currentValue, ruleIndex) {
         return [0,0,0];
     },
     ...
}
 

onInputsReady: function

Callback function called after all inputs ready and loaded. PS: Its called even when the map is listed but not showing.
@param inputs {Object} Inputs defined to interact with the map.

Example:
{
    ...,
    onInputsReady: function (inputs) {
         console.table(inputs);
         console.log("All inputs are ready and loaded!");
    },
    ...
}
 

insideOpacity: Array

Set the inside layers opacity Array of 0~1 values one per layer.

Example:
{
     ...,
     insideOpacity: [1.0, 0.1, 0.5],
     ...
}
Defaults to [1, 1, 1, ...]
 

type: String

Use as data source in any of supported types: 'load', 'csv', 'json' or 'default'. 'load': Function to use as callback on 'loadData' property. The user is responsible for load data directly on layer. 'csv': Url address to load csv file from. 'json': Json data directly itself. 'jsonurl': Url address to load json from

Defaults to "json"
 

popupTemplate: String

Function on popup. on callback param.

Example:
{description}
 

popupCallback: function

Function on popup. on callback param. (attributes, inputs) Scope in layer.
@param attributes {Array} undefined
@param inputs {Array} undefined

Example:
{
     ...,
     popupCallback: function (attributes, inputs) {
         
     },
     ...
}
 

styleMap: Object

This attribute allows you to customize the layer visualization. It can be: undefined, a Config Object or an OpenLayers.StyleMap.

 

toggleHandler: function()

Handler is the callback when the ToggleButton is clicked.
Overwrite to call a custom function.

PS: Using custom function ignore the associatedButtonID "It doesnt have to even exists".

Example:
{
    name:'LAYER_NAME',
    paramsButtonConfig:[{
      associatedButtonID: 'ignore',
      enableToggle: false,
      toggleHandler: function(btn, state) {
        alert("BTN Clicked" + btn + " toggleState: " + state);
      }
    }]
  }]
 

handler: function()

Handler is the callback when the button is clicked.
Overwrite to call a custom function.

PS: Using custom function ignore the associatedButtonID "It doesnt have to even exists".

Example:
{
    name:'LAYER_NAME',
    paramsButtonConfig:[{
      associatedButtonID: 'ignore',
      enableToggle: false,
      handler: function(btn) {
        alert("BTN Clicked" + btn);
      }
    }]
  }]
 

hideLegendButton: boolean

True to hide the subtittles container.

 

paramsButtonConfig: Object

Define custom buttons to be shown on the layer representation.

There are multiple types of buttons, there are some commum properties and some special properties:

Commom properties:
{
iconCls: {String} The class to add on the button. Ex: "icon-timeline-slider"
pressed: {Boolean} True to indicate if the button starts pressed, False otherwise. Ex: true,
toggleGroup: {String} Identify a group by name where only one button of the group can be pressed. Ex: 'onlyOneAtTime'
}


Types:
associated: {associatedButtonID: 'ANOTHER_BUTTON_ID', type: 'associated'}
Treat the layer button and the associated as the same button, so no matter which one is clicked both will
receive the click event.
query: {type: 'query'}
This configuration allows the user to change the default query button behavior overriting his definition.
download: {type: 'download', layerIndex: 0}
Set what layer should be downloaded when more than one layer is shown by its internal layer index.
metadata: {type: 'metadata', layerIndex: 0}
Set the metadata button to show one of the inside composite layer by his index.


PS: The layerIndex is from 0 to the quantity of layers in a composed map.
PS2: The properties are aditional, so the common must always be present, and for each type his
corresponding property must be added.

Example:
{
     ...,
     paramsButtonConfig: {
          associatedButtonID: "button-02",
          iconCls: "icon-timeline-slider",
          pressed: true,
          toggleGroup: undefined
     },
     ...
}
 

startLegendOpen: Boolean

Show layer with it legend container opened.

 

onClickViewGroup: function

Layer configuration to use layer group click callback. PS: Function executed in the node context. PS2: this.expanded True when its openned False otherwise.

 

onToggleViewGroup: function

Layer property to use the group toggle callback. PS: Function executed in the node context. PS2: this.expanded True when its openned False otherwise.

 

openGroup: Boolean

Define the group initial status. True to start expanded False otherwise.

 

hideListing: Boolean

True to does not list this layer on the top menu, false otherwise.

 

closedGroup: Boolean

Defines a group that will not be initially open.

  Layer internal functions

Functions to manipulate a composed map layers from inside, like what maps are composing or what legend will be applied.

 

otherNames: String

Define adittional maps to be available for the query, wich will be listed in the filtered stored capabilities. PS: This property is to use along with the 'capabilities' option, wich filter the GetCapabilities cache only the maps in use. (Performance Optimization, faster loading).

Example:
{
     name: "CSR:estados,CSR:airports",
     otherNames: "CSR:municipios,CSR:rodovias",
     beforeCalc: function(layerVals, inputVals) {
         this.changeLayers([{name: 'CSR:municipios', styles: fMapName + "_1", index: 0},
             {name: 'CSR:rodovias', styles: 'rodovias_1', index: 1}]);
     }
  }

  Change layer needs the definition of the 4 maps: 'estados', 'airports', 'municipios' and 'rodovias'. If the othernames is not defined only the maps at 'name' property will be available and the changeLayers for 'municipios' and 'rodovias' will not know about these maps.
  PS: (This issue only works outside of the editor because editor never use the filtered GetCapabilities response.)
 

changeLayers: function(newConfig, force)

Change a internal layer in a given index by another. PS: Its highly recommended to pass multiple configuration in a array, avoid call this function multiple times in the same callback.
@param newConfig {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'}, ... ]
@param force {Boolean} Force redraw even if no change is done when the layer is the same.

  Button widget

Create a simple button to user interact with the map.

  Combobox widget

It creates an input of ComboBox tool where the value is selectable from a list.
Usage: '\{\combobox\}\}' or examples.

  HoverPixel tool

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

 

checked: Boolean

True to start the hoverPixel enable, false otherwise.

Example:
|checked = true|
Defaults to false
  Tooltip helper

Functions to create tooltips on elements, at fixed positions and at mouse events.
Usage: ExtjsUtils.TooltipHelper

  Extjs 3.4

Calling core Extjs functions allows fine control over the CSR Maps internal elements.

 

getHighchartById: function(id) : Object

Get the hichart by its DOM id.
@param id {String} Id of the highchart.

Example:
Extjs.getHighchartById("highchart-01");
  Alertify dialogs

Functions to help showing dialog informations to users.

 

log: function(msg, config)

Shows an user notification (if enabled). PS: The messages before layer loading are delayed, when it finishes only the last message will be shown.
@param msg {String} Notification HTML content.
@param config {Object} Message configuration parameters. {force: {Boolean} Force to show notification even when disabled. func: {Callback} Callback function when the notification is clicked. onlyMsg: {Boolean} True to only show message and hide the close and the stop notifications, False otherwise. delay: {Numeric} Amout of time in milisseconds before the message hide. }

 

alert: function(msg)

Shows an user non blocking alert. PS: If layer is loading only the last message will be shown after load end.
@param msg {String} Notification HTML content.

  InputManager tool

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: '\{\{inputmanager\}\}'

  Web Raw Maps

The Raw Maps are some maps that are sent with each pixel value and not a RGBA color. All the manipulations are at most with integer or float precision so the colors must be applied on the client, after some calculation to, on the client, create each cell color value.

 

description: Object

Raw Maps operations: 'normal' (NORMAL): A normal map is a map with each cell representing a legend/color and aren't a RAW Maps type. 'raw' (RAW): Each cell in resulting map has the value of ther most centered cell in aggregated region. 'rgba' (RGBA): Each cell in resulting map has a integer value representing the RGBA composition. PS: Tanto o resultado como o input são inteiros representando valores RGBA. 'sum' (SUM): Each resulting cell is the weighted sum of cells in the covering region. PS: The weight used is the proportion of the covered area against the total area of the cell i.e. VALUE * COVERED_PERCENTAGE. 'average' (AVERAGE): Each cell is the resulting of the weighted mean of cell in the covered region. i.e. Sum(A) / Sum(B) : A is CELL_VALUE * COVERED_PROPORTION, B is COVERED_PROPORTION. Example: A full covered cell the COVERED_PROPORTION is 1, and the half covered cell the proportion is 0.5 . 'max' (MAX): Each resulting cell is the greater cell that is at least partially covered in the given region. 'min' (MIN): Each resulting cell is the smaller cell that is at least partially covered in the given region. 'integral' (INTEGRAL): A technique that allows to calculate the sum in a region just inspecting the cells on the boundaries of a retangular area i.e. calculate sum in a region using only 4 points. 'areaintegral' (AREAINTEGRAL): ? 'area' (AREA): Each cell carry the original map area in the aggregated region. ?PS: Esse simplificador agrupa as áreas do mapa original e permite avialiar a área do mapa minimizando erros de calculos de área causados pela reprojeção uma vez q a própria célula armazena esse valor. 'cells' (CELLS): Weighted sum of the cell quantity in a given region.

  Query utils

Defines a set of query helper functions.

 

setQueryGlobalProperties: function(wmsDefinitions, QUERY_DESCRIPTION) : boolean

Function to add custom remote servers.
@param wmsDefinitions {Object} A object with all custom WMS definitions. The object could contain the following properties: *url: {String} Url of the source (Mandatory). ?cors: {Boolean} True to accept (Cross Domain Request Security) CORS for servers without permission, False otherwise. ?updateWMS: {Boolean} True to purge the WMS cache and get the updated content, False otherwise. (Usefull to avoid long waitings) ?storage: {String} Name of the storage service, supported services so far: 'github'. Storage type tips: 'github': The Github contenct directly. 'jsdelivr': The jsDelivr cache the results to force a instantly update the user could use different release version. Tutorial about creating releases: https://help.github.com/en/articles/creating-releases After creating the user could append @VERSION_NUMBER to the URL to force updating the map cache.
@param QUERY_DESCRIPTION {ConfigLayer} Array Array of layers in the query. Usage: ExtjsUtils.QUERY.setQueryGlobalProperties({globalCount: 0}) && QUERY_DESCRIPTION

 

setQueryGlobalProperties: function(globalProperties, QUERY_DESCRIPTION) : bool

A function that allows to define custom global functions that can be used in order to define properties or even inside the functions callbacks. PS: All properties defined here are added to the global scope and are removed when the query is changed.
@param globalProperties {Object} Object The object that all his functions will became globals, each property can be a value or a object or evan a function.
@param QUERY_DESCRIPTION {ConfigLayer} Array Array of layers in the query. Usage: ExtjsUtils.QUERY.setQueryGlobalProperties({globalCount: 0}) && QUERY_DESCRIPTION

  Map Legend HTML

Create a tool with the map legends at any place of the query description.
Usage: '\{\{legendhtml\}\}'

 

reverseLegend: Boolean

Sort the legend on the decreasing order.

Example:
|reverseLegend = true|
Defaults to false
 

filterLayers: Array

Allows to filter layers from displaying its legend.

Example:
|filterLayers = [0]|
Defaults to undefined
 

preventClick: Boolean

Ignore the filter toggle by mouse clicks on legends.

Example:
|preventClick = true|
Defaults to undefined
 

preventClick: Boolean

Set True to disable the interaction of filtering map by clicking at legend, False otherwise.

Defaults to false
 

filterLayers: Array

Array of indexes of layers to be included in map legend (from 0 to quantity of layers).
If not defined, all layer legends are shown. Otherwise only the indexes according to layer are included.

Ex: A composed layer with three maps:
name: "CSR:estados,CSR:roads,CSR:municipalities",
If pass 'filterLayers=[1,2] only the legends of 'CSR:roads' and 'CSR:municipalities' are shown.

Example:
[0, 1]
Defaults to null
 

legendId: String

Keep the legend container ID. (Use this id to toggle each legend filter individually.)

Defaults to null
  Opacity slider tool

Create a tool to select the map opacity slider.
Usage: '\{\{opacityslider\}\}'

  Csv manager tool

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

  Slider tool

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

 

values: Array

Property to define the slider interval limits

Example:
|values = [0, 250]|
  Zoom

Functions to control zoom.

 

limitZoomLevel: function()

Sets the maximum zoom level.

  Textfield tool

TextField is a tool that allows editing of a single line of text.
Usage: '\{\{textfield\}\}'

 

value: String

Set the initial tool content.

Example:
|value = text|
 

isnumeric: String

Assures that the text content is a numeric string.

Example:
|isnumeric|
 

fieldLabel: String

Field label.

Example:
|fieldLabel = This is the field label|
 

style: String

Element style properties.

Example:
|style = color:black;|
  Label element tool 'label'

Create a simple label element to display some text.
Usage: \{\{label|\}\}

  HTML contents

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

  LoadJson tool

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

  PickPoint tool

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\}\}

 

pointVisibility: Boolean

Default true to show where the last click was. (True to show, False to Hide)

Example:
|pointVisibility = false|
Defaults to true
 

unselect: Boolean

Set if automatically disable after each click. (Default True, set False to not automatically disable).

Example:
|unselect = true|
Defaults to true
 

markLayerInd: Number

The layer index of the layer to draw his geometry.

Example:
|markLayerInd = 0|
 

onefeature: boolean

Keep only the last feature selected.

Example:
|onefeature = false|
  Timeline tool

Creates a timeline with maps in a sequence which changes at a given interval.
Usage: '\{\{timeline\}\}'

 

preloadTiles: Boolean

Defines if the timeline should load the tiles of the next steps to get smoother transictions.

Example:
|preloadTiles = true|
Defaults to false
  Asynchronous resource loader

Load one or more external resources by its URL and call a callback function when it finishes.
array: {Array} A array of resource urls to load.
callback: Function that will be called when the load ends.
Usage: AsyncLoader.loadScriptOnce({Array}, {Function}}

  Highcharts library

Highcharts is a library used to easly create interactive charts.
Usage: (Highcharts.chart(DOM_ID, {});)

  QGIS stylization

The style can be defined in QGIS and the automatic publication process will create the same looking style from the style file.

  Sankey transitions chart

Soon.

  Summed Area tool

Create 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.

 

description: function(name, config, layer, parameters) : Ext.Container

Create 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.
@param name {String} Input name "summedarea".
@param config {Object} Properties to customize the element.
@param layer {OpenLayers.Layer} Layer which the widget is defined.
@param parameters {Array} Array de parametros antes do processamento para o input.

  Floating Window

Creates an interactive floating window that can only be shown when the layer is visible.

 

height: number

The window initial height.

Example:
|height = 600px|
 

onBeforeHide: function

Callback function to be called before hiding the floating window.
@param layer {Object} Scope of the layer
@param data {Array} [window, button, windowConfig] window: Window object; button: Button created; windowConfig: Window object configuration

Example:
|onBeforeHide = function (layer, [window, button, windowConfig]){
 console.log(layer);
 console.log([window, button, windowConfig]);
}|
 

width: number

The window initial width.

Example:
|width = 600px|
 

title: String

The title of the window.

Example:
|title = Title of the Window|
Defaults to Window
 

id: String

The id of the div of the window (where the content can be drawn).

Example:
|id = window-div-id|
 

text: string

Define the button text.

Example:
|text = I am a button|
Defaults to Show/Hide Window
 

btnID: String

Define the id of the button that controls the window visibility.

Example:
|btnID = window-button-id|
 

windowID: String

Defines the window ID.

Example:
|windowID = window-id|
 

startVisible: Boolean

True if the window should start visible or false otherwise.

Example:
|startVisible = false|
 

ignoreVisibility: Boolean

Ignore the layer visibility toggle. True to window show or hide ignoring the layer visibility, False otherwise. PS: This 'ignoreVisibility' is not compatible with the 'associatedButtonID' property, when both are used together this value is ignored.

Example:
|ignoreVisibility = false|
 

x: Number

Initial absolute X position of the window. PS: Can be overwritten if defined together with 'underButtons' property.

 

y: Number

Initial absolute Y position of the window. PS: Can be overwritten if defined together with 'underButtons' property.

 

resize: function

Callback function to be called when the floating window is resized.

Example:
|resize = function (){
 console.log("I was resized!");
}|
  Layer

Layer object.

 

getLayerDataFromName: function(layerName) : Object|Null

Gets data about a layer from its full name. PS: Parameter must be the full layer name such as: 'CSR:estados' or 'CSR:altimetria'.
@param layerName {String} Full layer name.

Example:
Layer.getLayerDataFromName("CSR:estados");
  Number

Number object to help formating numbers.

 

abbreviateNumber: function(value, useFixed, abbreviateNumbers) : String

Auxiliary function to shorten the display of numbers. PS: The number loses a little precision but becomes more meaningful.
@param value {Number} Value to be displayed.
@param useFixed {Number} If set it will limit the number of decimal places, otherwise it will use the default value.
@param abbreviateNumbers {Array} Number suffix name.

  Source

Source object.

 

onLoad: function

Função de callback quando o store é carregado com sucesso.

 

onError: function

Função de callback quando o store falha o carregamento.

  Request

Request object.

 

isLocalUrl: function(url) : Boolean

Identify if the 'url' is from the localhost or is from the maps.csr.ufmg.br domain. PS: If url is left blank it uses the current site url.
@param url {String} String with the url to be checked.

Example:
ExtjsUtils.REQUEST.isLocalUrl() // true
Example:
ExtjsUtils.REQUEST.isLocalUrl("www.google.com") // false
  Timeline Panel

Creates a tool to display the variation in a given interval of time using maps to represent each scenary in time.

 

onPlayToggle: function

Callback function when the timeline start/stop playing.
@param pressed {Boolean} True if the button was pressed, False otherwise.
@param layer {Object} The layer associated to this timeline.
@param timeline {Object} The timeline associated.
@param playBtn {Object} The button changed.

Example:
|onPlayToggle = function (pressed, layer, timeline, playBtn) {
     let text = "The timeline just ";
     text += pressed ? "stopped " : "started ";
     text += "playing!";
     console.log(text);
}|
 

renderHidden: boolean

True to start with the timeline hidden.

Example:
|renderHidden = true|
Defaults to false