API

Mappia API

Expand All
 

General Information

URL Parameters
Web Raw Maps
QGIS stylization

Configuring Layers

Grouping maps
Layer properties configuration
Configuring Layer Buttons
VectorLayer configuration
XYZ configuration
Source

Helper Functions

Layer internal functions
Tooltip helper
Extjs 3.4
Alertify dialogs
Query utils
GEOJSON Utils
Zoom
Layer
Number
Request
MappiaIO
Asynchronous resource loader

External Libraries

Highcharts library
Sankey transitions chart

Tools

Button widget
Combobox widget
HoverPixel tool
Map Legend HTML
Opacity slider tool
Csv manager tool
Slider tool
Textfield tool
Label element tool 'label'
HTML contents
LoadJson tool
PickPoint tool
Timeline tool
InputManager tool
FileField Widget
Summed Area tool
Floating Window

General Information

Some General information that may help in sharing and using maps
  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).
 visibleLayers > 0 // Higher than zero: shows the last defined maps as visible (From bottom to top).
 visibleLayers = 0 // Start with no layer visible.
 visibleLayers = 'custom' // Visibility defined in each map by 'visibility: {Boolean}' property.
 visibleLayers = null // No limit of visible layers.
Defaults to 100
  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.
  QGIS stylization

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

Configuring Layers

Properties that allow to, define, custumize, provide functionalities to layers
  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'}]

 

title: String 

               
#TODO VICTOR: Posição aleatória
Defines the title of the group, which is displayed on top.
 

color: String 

               
#TODO VICTOR: Posição aleatória
Defines the color of the group's title.
 

elements: Array.<Object> 

               
#TODO VICTOR: Posição aleatória
Defines the layers that belong to the layer group.

PS: It is optional since groups can be created as an Array.
  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.
 

source: String 

               
Define the source of the layer. EX: xyz, calculate, local, file, ...

PS: If two layers colide returns the first that best fits. For example it is possible to use source name to match.
Ex: XYZ:Layer vai buscar primeiro nos layers dentro dos stores e só depois vai forçar o 'xyz' store.
XYZ as layer in calculate map
 

runNow: function() 

               
Set functions to be called after layer definition but before load layers.
Example:
Usage: ExtjsUtils.QUERY.setQueryGlobalProperties({
 runNow: function(){...}
 }) && QUERY_DESCRIPTION

Function that controls the execution of runNow.
 

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 are only visible inside this layer.
PS2: Functions may be accessed by tools callbacks using its property name as (this.functions.['onClick']) to refer the following onClick function:
functions: {
  onClick: function() {
    ExtjsUtils.ALERTIFY.log("Clicked Button");
  }
}
 

source: String 

               
#TODO VICTOR: testar se está documentado, link para parte correta Verificar nome da função de criar source
Defines layer source.
'local' - Maps available at Mappia server.
'calculate' - Combination of maps, allow map algebra.
'xyz' - Maps that use maps WMTS-like for map source.
'file' - Maps using data from data as csv or json.

PS: It is possible to define other source using function ExtjsUtils.função
Defaults to 'local'
 

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.
 

name: String 

               
Defines which maps are rendered in a layer. This string consists of map names separated by commas.
Uses the full name of maps.
Example:
[
 ...
     {
        name:"CSR:estados,CSR:roads",
     }
 ...
]
 

legendTitle: String 

               
Defines a title for the map legend.
 

beforeCalc: Funtion 

               
Function to be called always before the expression calculation.
Ps: Even if maps don't have 'expression' function 'beforeCalc' function will be called.
Ps2: This function is called synchronously and the context is the map layer.
Ps3: This function can do useful things that depends on layer load end.
Example:
{
     ...,
       beforeCalc: function(inputs){
         console.log(inputs);
       },
     ...
}
 

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

afterCalc: function 

               
Callback called immediately after 'expression' function finishes.

Ps: This function will only be called if 'expression' is defined.
Example:
{
     ...,
       afterCalc: function(inputs){
         console.log(inputs);
       },
     ...
}
 

expression: function 

               
Callback processing each layer pixels to the resulting map.
@param layersValue {Array} Array with the layers values, each layer in one position of the array.
@param inputs {Object} Inputs defined to interact with the map.
Example:
{
     ...,
       expression: function(layerVals, inputs){
         return layerVals[0] * 2;
       },
     ...
}
 

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

               
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, ...]
 

exclusiveGroupDetails: String 

               
Only one layer with the same exclusiveGroupDetails may have its details shown
 

onVisibilityChange: function 

               
Callback on layer visibility change.
@param visibility {Boolean} True on showing map False otherwise.
@param inputs {Object} Object with the input manager object.
Example:
{
     ...,
     onVisibilityChange: function (visibility, inputs){
         let text = "The map is ";
         if(visibility){
             text += "not ";
         }
         console.log(text + "visible now!");
     },
     ...
}
 

isCalculationPaused: function() : Boolean 

               
Returns calculation status.
True if calculations are paused, false otherwise.
 

attribution: String 

               
#TODO VICTOR: Não consegui fazer funcionar
Recognizes someone as the platform author. "Powered by: ..."
 

maxExtent: OpenLayers.Bounds 

               
#TODO VICTOR: NÃO TESTADO checar se é assim que funciona
Defines a geographical limit for map rendering.
 

visibility: Boolean 

               
Defines whether the layer starts visible or not.
Defaults to false
 

opacity: Numeric 

               
Defines the layer opacity. It requires values from 0 to 1.
Defaults to 1
 

minscale: Numeric 

               
Limits the real min scale of a given layer. (When map scale is lower than this, the image is reused and is compressed CHECAR!!!!)
 

maxscale: Numeric 

               
Limits the real max scale of a given layer. (When map scale exceed this, the image is reused and is stretched)
 

maxZoom: Numeric 

               
Limits the real max zoom of a given layer. (When map zoom exceed this, the image is reused and is stretched)
 

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"
 

title: String 

               
Defines layer title, which is the name that is displayed in the menus to interact with a specific layer.
Defaults to the map name
Example:
[
 ...
     {
        title:"World map",
     }
 ...
]
 

group: String 

               
Defines which group is the layer associated with. Layers from the same group can't be active simultaneously.
 

visibility: Boolean 

               
Defines the default layer visibility.
If true the first time the platform is opened this layer will already be active
Defaults to false
 

metadataUrl: string|null 

               
Change the url as layer metadata information.
The default value is obtained from layer metadata from

PS: The linked domain must have CORS headers enabled.
 

hideLegendButton: boolean 

               
Defines the visibility of the subtitles container.
True to hide the subtitles container, false otherwise.

PS: Only works if the source is not local
 

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

useLayerTooltip: Boolean 

               
if true, it allows to use the tooltip of a map if its source attribute is calculate.
 

thumbUrl: String 

               
Custom thumbnail URL, allows change the thumbnail of the map.
 

startLegendOpen: Boolean 

               
Show layer with it legend container opened.
 

priority: Number 

               
Defines layer priority. Higher priorities are rendered on top.
 

onClickViewGroup: function 

               
Layer configuration to use layer group click callback.

PS: Function executed in the node context.
PS2: this.expanded True when its opened 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.
 

startListed: Boolean 

               
Define the initial listing layer state.
True to start listing (on left side), False otherwise.
 

hideListing: Boolean 

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

openGroup: Boolean 

               
Set a group to start open even without any visible layers.

PS: If one layer is visible the group will start open.
  Configuring Layer Buttons

Properties that manage the layer menu buttons.
Usage: 'paramsButtonConfig: [{type: "query", pressed: true}]'

 

hideButton: Boolean 

               
#TODO VICTOR: Só FUNCIONA COM QUERY!!!
Hide a button from the layer menu if used with "type:'query'".
Example:
{name:'LAYER_NAME',
    paramsButtonConfig:[{
      type: "query",
      hideButton: true,
      hideBottomButton: true
    }]
  }]
 

hideBottomButton: Boolean 

               
Hide the buttons that appear when the layer is expanded.
Which are the "Show query" and "Show Legend" buttons.
Example:
{name:'LAYER_NAME',
    paramsButtonConfig:[{
      type: "query",
      hideBottomButton: true
    }]
  }]
 

type: String 

               
Define the button type.

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:
[{name:'LAYER_NAME',
 paramsButtonConfig: [
    {
       type: "query",
       pressed: true
    },
    {
       type: "metadata",
       layerIndex: 0
    },
    {
       type: "associated",
       associatedButtonID: "button_id",
       iconCls: "vertical-dots",
       pressed: false,
       tooltip: "tooltip_text",
       toggleGroup: undefined,
       enableToggle: false,
       handler: function() {}
    }
    ]
}]
 

iconCls: String 

               
#TODO VICTOR: MUDAR DE LUGAR
The class to add on the button. Ex: "icon-timeline-slider"
Example:
[{name:'LAYER_NAME',
 paramsButtonConfig: [
    {
       type: "associated",
       associatedButtonID: "button_id",
       iconCls: "vertical-dots",
       pressed: false,
       enableToggle: false,
       handler: function() {}
    }
    ]
}]
 

pressed: Boolean 

               
#TODO VICTOR: MUDAR DE LUGAR
True to indicate if the button starts pressed, False otherwise. Ex: true.
Example:
[{name:'LAYER_NAME',
 paramsButtonConfig: [
    {
       type: "associated",
       associatedButtonID: "button_id",
       iconCls: "vertical-dots",
       pressed: false,
       enableToggle: false,
       handler: function() {}
    }
    ]
}]
 

toggleGroup: String 

               
#TODO VICTOR: MUDAR DE LUGAR
Identify a group by name where only one button of the group can be pressed. Ex: 'onlyOneAtTime'
Example:
[{name:'LAYER_NAME',
 paramsButtonConfig: [
    {
       type: "associated",
       associatedButtonID: "button_id",
       iconCls: "vertical-dots",
       pressed: false,
       enableToggle: false,
       toggleGroup: "onlyOneAtTime",
       handler: function() {}
    }
    ]
}]
  VectorLayer configuration

Vector Layer configuration.

 

onHover: function 

               
Add a hover callback.
@param evt {Object} Features.
@param state {Boolean} True when hover start, False when it ends.
@param controller {Object} The controller itself.
@param inputs {Object} Layer inputs.
Example:
{
     ...,
     onHover: function (evt, state, controller, inputs) {
         console.log(state ? "Started": "Ended");
     },
     ...
}
 

onClick: function 

               
Adds a callback function to the click event.
@param event {Object} The click event Object.
@param source {VectorFileSource} Auxiliary functions to deal with Vector Layer.
@param inputs {Array.<Object>} Array with all layer input values.
Example:
{
     ...,
     onClick: function (event) {
         console.log("Triggered click event!");
     },
     ...
}
 

onClickCfg: function 

               
Allows to customize the Click Select controller.
The additional parameters are listed in http://dev.openlayers.org/docs/files/OpenLayers/Control/SelectFeature-js.html.
#checar tipa
 

fromProj: String 

               
Allows declaring the projection of JSON (accepted only EPSG:4326 and EPSG:900913)
Example:
EPSG:900913
 

updateAutomatically: Boolean 

               
#TODO VICTOR: Isso está certo?
Defines whether the calculations are made automatically after user interaction with parameters or not.
Defaults to false
 

onLoad: function 

               
Callback function after the layer is loaded or added to map.
PS: Callback called on layer Context function(widgetValues)
 

popupTemplate: String 

               
Function on popup. on callback param.
Example:
{description}
 

popupCallback: function 

               
#TODO VICTOR: melhorar descrição
Function on popup. on callback param.
(attributes, inputs)
Scope in layer.
@param attributes {Array} attributes for popupCallback
@param inputs {Array} inputs for popupCallback
Example:
{
     ...,
     popupCallback: function (attributes, inputs) {
         
     },
     ...
}
 

isCalculationPaused: function() : Boolean 

               
Returns the current calculation status. If it is paused returns true.

Ps: This one always returns true
 

getLayerDefinedFunctionsByName: function(name) : function|Undefined 

               
Get layer inner function.

Define layer inner function at VectorLayer.
Ex: {
  name: 'CSR:map_name',
  function: {
    nameFunctionExample: function(){alert('a');}
  }
}
@param name {String} Function name
 

setDrawing: function(enabled, callbackOnAdd) 

               
Controls drawing features on layer.
PS: Function available to the VectorLayer.
@param enabled {Boolean} True to enable drawing, False otherwise.
@param callbackOnAdd {function} Callback when a new feature is drew.
  function(vectorLayer, drawEvent)
    vectorLayer: Current layer.
    drawEvent: The info of the added polygon.
  PS: This callback function is called on layer scope.
 

loadGeojson: function() 

               
Função para carregar geojson pra desenhar no layer
 

clusterDistance: Numeric 

               
Set the minimum relative (pixel) distance to clusterize points. Set 0 to never clusterize, or a value
greater than 0 to set the minimum distance.

PS: When filters were applied you can use the property 'count' to check how many points exists in the current cluster.
 

getLonLat: function 

               
Define the function to parse the data to get the geometry.
Callback Function getVector function(attribute, config)
@param attribute {Object} Object with attributes.
@param config {Object} Layer config.
 

convertJsonEntryToFeature: function(curObj, optionalGetLonLat) : OpenLayers.Feature.Vector 

               
Help to convert a JsonObject into a Layer Feature (can be added to layer).
@param curObj {JsonObject} Object with properties.
@param optionalGetLonLat {function} Optional function to get position coordinates from JSON.
  PS: Optional function to get X,Y values from Obj. (By default Longitude and Latitude use fields: lon and lat)
  function(curObj) returns OpenLayers.LonLat
    curObj: Object with JSON properties.
  This function receive the 'curObj' and expects to returns the object properties.
 

styleMap: Object 

               
This attribute allows you to customize the layer visualization. (advanced parameter, is easier to use selectedStyle, defaultStyle and hoverStyle)
It can be: undefined, a Config Object or an OpenLayers.StyleMap

PS: Hover uses 'temporary' style.
Example:
StyleMap{[default, select, temporary]: Style {rules:[Rule,], context: {getRadius: function() {return Math.random()}}}
 

onFeatureChangeCallback: function 

               
Callback when a layer feature is added, removed or edited.

onFeatureChangeCallback: function (operationType, arrFeatures)
operationType: {String} Receive the operation type: 'add' or 'remove' when adding or removing respectively.
arrFeatures: Array of features affected.
 

onBeforeFeatureChangeCallback: function 

               
Callback before a layer feature is added, removed or edited.

onBeforeFeatureChangeCallback: function(operationType, arrFeatures)
operationType: {String} Receive the operation type: 'add' or 'remove' when adding or removing respectively.
arrFeatures: Array of features affected.

PS: Return false cancel the change operation.
 

onAdded: function 

               
Callback function called when the layer is added to layer list.

AddedEvent {
    element: {DOM} 'DOM element of the layer',
    layer: {OpenLayers.Layer.Vector} 'Javascript Object of the layer',
    map: {Map} 'MapPanel where the layer was added.',
    type: {String} 'Type of the event ( added )'
}
 

defaultStyle: Object 

               
Default style for the geometry. (PS: Accept 'context' and 'rules')

Look at some examples at: http://dev.openlayers.org/examples/
PS: property 'context': allows definition of functions,
PS2: property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
Example:
[{color: '${getColor}', context: {getColor: function(attr){return 'green';} }]
 

selectStyle: Object 

               
Style for the selected geometry. (PS: Accept 'context' and 'rules')

PS: Selected depends on 'onClick' property that allows to select.

Look at some examples at: http://dev.openlayers.org/examples/
PS: property 'context': allows definition of functions,
PS2: property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
Example:
[{color: '${getColor}', context: {getColor: function(attr){return 'green';} }]
 

hoverStyle: Object 

               
Style for geometry when mouse is hovering. (PS: Accept 'context' and 'rules')

PS: Hover depends on 'onHover' property that allows to hovering.

Look at some examples at: http://dev.openlayers.org/examples/
PS: property 'context': allows definition of functions,
PS2: property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
Example:
[{color: '${getColor}', context: {getColor: function(attr){return 'green';} }]
  XYZ configuration

XYZ Layer configuration.

 

url: String 

               
Define the url where the map can be fetched. Use ${x} ${y} ${z} as placeholder for x,y,z coordinates.
Example:
"https://tiles.planet.com/basemaps/v1/planet-tiles/planet_medres_visual_2021-09_mosaic/gmap/${z}/${x}/${y}.png?api_key=b24ae87a99624d2cbd8ed6aeb9703280"
 

name: String 

               
Defines map identifier. This name should be unique.
Example:
[
 ...
     {
        source: "xyz",
        name:"XYZ:map_name",
     }
 ...
]
 

source: Object 

               
#TODO VICTORD: CHECAR TIPO
Add a layer to store source.

PS: LayerConfig {
  url: url,
  name: name,
  isBaseLayer: isBaseLayer,
  sphericalMercator: sphericalMercator
}
@param layerCfg {LayerConfig} Layer XYZ configuration.
LayerConfig {
  url: url,
  name: name,
  isBaseLayer: isBaseLayer,
  sphericalMercator: sphericalMercator
}
  Source

Layers sources configuration.

 

onLoad: function 

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

onError: function 

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

Helper Functions

Set of functions that help creating map interactions
  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.
  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 highchart by its DOM id.
@param id {String} Id of the highchart.
Example:
Extjs.getHighchartById("highchart-01");
 

escapeRegExp: function(str) : String 

               
Escape regular expression special characters from a string.
Escape characters are '-', '[', ']', '/', '{', '}', '(', ')', '*', '+', '?', '.', '\', '^', '$', '|'.
@param str {String} Expression to be escaped
  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.
  spamTime: {Numeric} Time the same message to be shown again is considered spam. (even with force = true).
 }
 

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.
  Query utils

Defines a set of query helper functions.

 

runOnceLayerVisible: function(layer, callback) 

               
Function that ensures that a function is called after layer is rendered.
If the layer is already visible, the function is executed immediately. This may cause problems, for example, highcharts recognize it as an error.
@param layer {OpenLayers.Layer} Layer that has to be rendered.
@param callback {function} Function to be called.
 

addLayer: function(cfg) 

               
Properly add layer from its definition.
@param cfg {Object} Layer definition
 

addRemoteWMSServer: 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. (Useful 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
 

onExternalMessage: function() 

               
its a window message
 

decorate: function(pageProperties) 

               
Allows to define custom properties to decorate the page, allowing to
add headers and footers, change the top bar color, and other
settings.
@param pageProperties {Object} Object with the custom properties to customize the page.
  GEOJSON Utils

Functions to handle GEOJSON transformations.

 

shapefile2GeojsonAsync: function(shpFile, paramOptions) 

               
Parse shapefile to compatible Layer features.
DBF file is optional.

PS:ParamOptions
  {
  callback: {Function} 'Callback function with parsed shapefile' function(layer, parsedGeojson, originalData),
  fromProj: {String?} 'Projection name.' (EPSG:4326 or EPSG:900913),
  dbf: (Optional?)'DBF file to load along with shapefile.',
  limitCount: (Optional?)'Limit the amount of processed geometries'
  }
@param shpFile {File} Shapefile content (Needs to be in projection EPSG:4326 or EPSG:900913.
@param paramOptions {ParamOptions} Additional configuration for handling shapefile.
ParamOptions
  {
  callback: {Function} 'Callback function with parsed shapefile' function(layer, parsedGeojson, originalData),
  fromProj: {String?} 'Projection name.' (EPSG:4326 or EPSG:900913),
  dbf: (Optional?)'DBF file to load along with shapefile.',
  limitCount: (Optional?)'Limit the amount of processed geometries'
  }
  Zoom

Functions to control zoom.

 

limitZoomLevel: function() 

               
Sets the maximum zoom level.
  Layer

Layer information helper functions.

 

getLayersRecord: function(layerName, storeName) : Array.<Ext.data.Record>|Ext.data.Record|Null 

               
Gets store layer information from its full name.

PS: Parameter must be the full layer name such as: 'CSR:estados' or 'CSR:altimetria'.
@param layerName {String} Optional Full layer name to look for, otherwise will return all records. (Leave it blank to get all records)
@param storeName {String} Optional name to look only in a specific sources for 'layerName'. (Fill it to prevent from searching in all stores)
Example:
Layer.getLayersRecord("CSR:estados");
  Number

Functions to manipulate and format numbers.

 

abbreviateNumber: function(value, useFixed, abbreviateNumbers) : Number|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>} Number suffix name.
  Request

Helper functions to deal with HTTP requests.

 

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
  MappiaIO

Library to send events between Mappia Iframe and your site.

 

postMessage: function(jsStr) 

               
Send message to parent Window. ( Compatible with MappiaIO library )
Allows communication between iframe and parent window.
@param jsStr {Object|String} Object to be sent from inside iframe to parent MappiaIO.
Example:
ExtjsUtils.QUERY.postMessage({a:1,b:2})
  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}}

External Libraries

External libraries that may be useful for creating data visualisation
  Highcharts library

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

  Sankey transitions chart

Soon.

Tools

Widgets that can be used to create interactions or load data to the application, they must be used in descriptionHtml and its parameters should be passed preceded by vertical bars. 
Examples:
{
    ...,
    descriptionHtml: '\{\{widgetIdentifier|paramName=paramValue\}\}',
    ...
}

{
    ...,
    descriptionHtml: '\{\{button|id=btn_id|enableToggle=false\}\}' + '\{\{opacityslider\}\}',
    ...
}
  Button widget

Create a simple button to user interact with the map.

 

id: String 

               
ID to identify this object.
Example:
|id=BtnAction|
 

text: String 

               
Button text.
Example:
|text=Click On Me|
 

fieldLabel: String 

               
Button label.
Example:
|fieldLabel=A button|
 

pressed: Boolean 

               
Button state. True to start pressed (only if enableToggle = true)
Example:
|pressed=true|
Defaults to false
 

enableToggle: Boolean 

               
Button type, true to toggle false otherwise.

When true the callback called is toggleHandler, otherwise the handler is called.
Example:
|enableToggle=true|
Defaults to false
  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
  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
 

preventClick: Boolean 

               
Defines state of filtering map by clicking at its legend.
True to ignore the legend click, false otherwise.
Example:
|preventClick = true|
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 'filterLayers=[1,2]' is in the layer object only the legends of 'CSR:roads' and 'CSR:municipalities' are shown.
Example:
|filterLayers = [1,2]|
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]|
  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: boolean 

               
Assures that the text content is a numeric string.
Example:
|isnumeric=true|
 

fieldLabel: String 

               
Field label.
Example:
|fieldLabel = This is the field label|
 

style: String 

               
Element style properties.
Example:
|style = color:black;|
 

hideLabel: Boolean 

               
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting this to true will cause the field to not reserve that space.
Example:
|hideLabel = true|
Defaults to false
  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

Display a spatial scenarios changes in a timeline.

 

steps: Array.<Array.<(Object|String)>> 

               
Define the timeline change steps.
 

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 

               
Defines the timeline default visibility.
True to start with the timeline hidden.
Example:
|renderHidden = true|
Defaults to false
 

preloadTiles: Boolean 

               
Defines if the timeline should load the tiles of the next steps to get smoother transitions.
Example:
|preloadTiles = true|
Defaults to false
  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\}\}'

  FileField Widget

Tool to handle and load local files.
PS: This object cannot be sent to 'expression'.
Usage: \{\{filefield|fieldLabel=loadshp|id=loadshp|_onChange=function(){alert('changed')}\}\}

 

ignoreUpdate: Boolean 

               
Ignore the widget change event ( False to dispatch update event at every file selection )
 

eventNames: Array.<string> 

               
List of events by name, use this property to define callback functions to any of the following events.
Example:
['added', 'afterrender', 'beforedestroy', 'beforehide', 'beforerender', 'beforeshow', 'beforestaterestore',
'beforestatesave', 'blur', 'change', 'destroy', 'disable', 'enable', 'focus', 'hide', 'invalid', 'move', 'removed', 'render',
'resize', 'show', 'specialkey', 'staterestore', 'statesave', 'valid']
  Summed Area tool

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.

 

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.

 

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|
 

underButtons: Boolean 

               
If true set the initial position of the window as under the right buttons panel.
Example:
|underButtons = 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!");
}|