Layers
Groups
Tools
paramsButtonConfig
Sharing Maps
General Information
Configuring Layers
Helper Functions
External Libraries
Layers
An Layer is a set of maps. All maps that you want to display together or combine their information needs to be defined inside the same Layer. All information of the active Layer, like map legends and tools, are displayed in a window at the top left of the screen when that Layer is active. A Layer can be defined inside a Group, as described in the Group section. An example of Layer with a single map would be:
[
{
// The Layer name
title: 'My first layer!',
// The map that will be shown
name: 'CSR:altimetria',
// Flag to make the map show on start
visibility: true,
},
]description: String
Define the text that will be displayed when the mouse hover the Legend Window Title.
This description applies when the 'source' of the map is 'xyz' or the Layer is a 'vector'.
descriptionHtml: String
Define the content that will be displayed at the Query section ("Exibir Consulta" button).
This property accepts any string in HTML format. Besides that, you can also use predefined tools.
disabledAttributes: String
Define which styles will be hidden in the Style Chooser Combobox from Layers that has the 'source' property as 'local'.
You need to pass the name of a style as in the GetCapabilities() xml. They follow the pattern of the map name, underline (_) and then the number of the style. (<map_name>_<number>).
You can hide more than one style. For this you only need to separate their names by commas.
exclusiveGroupDetails: String
Define a name for a Layer Details. Between all Layers with the same ‘exclusiveGroupDetails’ name, only one Layer can have its Legend open each time.
extents: Array.<Numeric>
Define which tiles will be used to render the map. All the tiles that are within the 'extents' coordinates will be used to render the map.
The extents must be in EPSG:4326 (coordinates in lat,long). Also, the array values need to be in the order: [minX, minY, maxX, maxY].
hideLegendButton: boolean
Defines if the Legend Button at the bottom right of the Legend Window should be hidden. Set it to 'true' to hide the button. Set it to 'false' to display it.
This property only applies to the layer that has the 'type' property as 'local'.
hideListing: Boolean
Define if should hide a Layer in the list that appears when the mouse hover the Group Title at the top of the screen.
Set it to 'true' to hide that Layer in the list. Otherwise, set it to 'false' to show it.
hideStyleChooser: Boolean
Define if should hide the Combobox with the map possible styles that can be applied to a map in a Layer that has the 'source' 'local'.
insideOpacity: Array.<Numeric>
Defines the opacity for the maps defined in the 'name' property.
This property is an array of values which are the opacity that will be applied in the same order that the map was defined in the 'name' property. For example, the first value in the 'insideOpacity' array will define the opacity for the first map defined in the 'name' property, the second value is the opacity for the second map, and so on.
The opacity value is a number between 0 and 1. 0 being transparent and 1 opaque.
legendTitle: String
Defines the text that will be displayed at the top of the 'legendhtml tool' declared at the 'descriptionHtml' property
name: String
Defines the maps that will be a part of the Layer. Every map defined in here will be shown when the Layer is active. Besides that, all of their information can be used to calculate a new map combining their data.
In this website you will find some of the maps that can be used: http://maps.csr.ufmg.br/geonetwork/srv/por/search.
You can find their name at the section "Visão geral do mapa" under its image. Those maps have the prefix "CSR:" before their names.
Maps can also be uploaded by you. For that, you just need to define the 'source' property as 'file'.
opacity: Numeric
Define the opacity of the Layer. The opacity is a value between 0 and 1 that is a scale for its transparency. 0 is completely transparent. 1 is completely visible.
priority: Number
Defines the order of which map will be rendered on top of the others. Layers with higher 'priority' will always be rendered on top of the layers with lower 'priority'.
showRemoveBtn: Boolean
Defines it the remove button at the top right of the Layer Legend Window show be displayed. Set it to 'true' to show it. Set it to 'false' to hide it.
source: String
Defines the source from where the maps declared at the name will be loaded from. The Source can be one of the following:
- 'local': The maps in the name will be loaded from the CSR servers
- 'calculated': The maps in the name gonna be used to calculate a new map in the expression() function and the result will be displayed as the Layer
- 'file': The map will be loaded from a file or other custom source. For this, you need to define the file type in the 'type' property and the file where the map should be loaded. For example, for a JSON file, you also need to define the 'json' property.
- 'xyz': The map will be loaded from an url by the XYZ protocol. The url property is required for this type of source. You can find more informations about the XYZ protocol at: https://developers.planet.com/docs/basemaps/tile-services/xyz/
startLegendOpen: Boolean
Defines if the Legend Window should start or not. Set it to 'true' to make it start open. Set it to 'false' for it to start closed.
startListed: Boolean
Define if the Layer should start with its Legend Window visible or not. This does not make the Layer visible on the map by itself. For that, you need to set the 'visibility' property to 'true'.
'startListed' just displays the Legend Window associated with the Layer.
styles: String
Defines which styles will be applied over the maps defined at the 'name' property.
The styles are applied in the same order as the maps are declared in name. For example, if there are 3 maps in the 'name' property and 3 styles. The first style will be applied to the first map, the second to the second map, and so on.
You can find which styles are available to use at: TODO: Criar uma forma simplificada de visualizar os estilos disponíveis.
PS: The Mappia identifier of the style is defined by the name of the layer + '_' + an index.
PS2: Styles are separated by comma.
thumbUrl: String
Define the thumbnail image that is displayed when the mouse hovers the Legend Window title.
You can define any image you would like to display as the map thumbnail. You just need to pass its URL.
title: String
Defines the Title that will be displayed at the Legend Window in the top left corner of the screen and inside the Group List at the top center of the screen.
afterCalc: function
This function is executed right after the 'expression()' calculations.
This function is only available for a Layer with a 'source' of type 'calculate' and that has defined the 'expression()' function.
@param inputs {Array} The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
beforeCalc: function
This function is executed before any calculation is made in the 'expression()' function.
This function is only available for a Layer with a 'source' of type 'calculate'. Also, it’s called even if there is no definition for the 'expression()' function.
@param inputs {Array} The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
expression: function
This function is executed for every pixel in the map. It can be used to process the information of all maps in the Layer to create a new one.
This function is called regularly to update the map.
@param layerVals {Array.<LayerValues>} Is an array that has the value associated with the current pixel for each map defined in the 'name' property.
The values order is the same as the one in ‘name’. For example, if in the 'name' property we have 'name: CSR:geologia,CSR:altimetria' the layerVals[0] has the value for the 'CSR:geologia' map and the layerVals[1] has the value for the 'CSR:altimetria'.
@param inputs {Array} The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
functions: Object
Here, you can define any function you want to handle events from the tools defined in the descriptionHtml.
For example, if you want to handle the callback of a button, you can define the function for its 'handler' property here.
These functions only exist in the Layer where they’re a part of.
To use a function in a Tool you just need to use the function name in the property that triggers the callback.
You can also access the functions using the 'this' (this.functions['<function_name>']) in any.
legendColor: function
This function generates the color of each value/category of the calculated map generated by the 'expression()' function.
The return value is the legend color that will be applied to the category.
PS: This function callback is called in layer context.
@param color {Array.<Numeric>} Array with three numbers (0 to 255) that define the RGB color of the original legend.
@param inputs {Array.<Object>} The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
@param lastValue {String} The last legend value that had its color calculated.
@param currentValue {String} The actual legend value that it's being calculated.
@param ruleIndex {Numeric} The index of the actual legend value that it’s being calculated. I.e. The first legend value is 0, the second is 1, and so on.
onInputsReady: function
This function is called when all inputs have been loaded and are ready. Even from Layers that aren’t visible.
@param inputs {Array} The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
onVisibilityChange: function
This function is called whenever a Layer changes its visibility.
Like, when the user toggle the value in the visibility button at the top right in the Legend Window.
@param visibility {Boolean} It’s true if the Layer is visible or false otherwise.
@param inputs {Object} The value of each input defined in the descriptionHtml. The order of the values is the same as the inputs (i.e. the first input in the descriptionHtml is inputs[0], the second is inputs[1] and so on).
Groups
A Group is a set of Layers. You can defined the Layers of a Group inside its 'elements' property as described in the 'Groups Properties' section. When you define a Group, a sub menu is created at the top of the screen.That sub menu has all the Layers defined inside the Group. It's possible to define as many groups as you want. You simply need to create a pair of open and closed curly brackets, separated by commas:
[
{
title: 'My first Group!',
color: '#A020F0',
elements: [
{
title: 'Layer 1 of group 1',
name: 'CSR:batimetria',
visibility: true,
},
],
},
{
title: 'My second Group!!',
color: '#FFA900',
elements: [
{
title: 'Layer 1 of group 2',
name: 'CSR:altimetria',
visibility: true,
},
],
},
]color: String
Defines the Color of the group. This is the Color of the Title and some elements inside the sub menu on the top of the screen.
defaultProperties: function()
Specifies properties that apply universally to all layers within a group, including nested subgroups and their respective layers.
Priority is determined by specificity: a property defined at the layer level takes precedence, followed by properties defined in the nearest group, and so forth.
elements: Array.<Layers>
Defines the Layers that will be part of the Group. Each Layer can have multiple maps inside it.
All maps inside a Layer will be shown together when that Layer is enabled.
Besides that, all informations about those maps can be used to calculate a new one using custom functions that can be writen in JavaScript.
openGroup: Boolean
Defines if the 'viewTitle' should start opening or collapse.
Set it to 'true' for the 'viewTitle' start open or 'false' for it to start closed.
This property only applies to a group that has the 'viewTitle' property defined.
If the Group View has any visible Layers or any Layer has the 'openGroup' property set to 'true', the Group View will start open.
onClickViewGroup: function
This function is called whenever the user clicks the 'viewTitle' text.
PS: view.expanded is 'True' when thee View its openned or 'False' otherwise.
@param view {Object} Is the view that was clicked
@param clickEvent {MouseEvent} Is the object that carries more information about the click event.
Tools
Tools 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: '\{\{toolIdentifier|paramName=paramValue\}\}',
...
}
{
...,
descriptionHtml: '\{\{button|id=btn_id|enableToggle=false\}\}' + '\{\{opacityslider\}\}',
...
}enableToggle: Boolean
Defines the button type as toggle.
Set true to use as toggle, false otherwise.
PS: When its true the callback is 'toggleHandler', otherwise the callback is 'handler'.
handler: function
Defines the callback function on button click event. This should be used
when the enableToggle property is false.
@param button {Ext.Button} The button element that was clicked.
@param clickEvent {EventObject} An event object carrying information about the click event.
editable: Boolean
Determines if the Combobox is editable. That is, if it allows the user to type inside the input field.
Set it true to allow it, false otherwise.
fieldLabel: String
Defines a label for the Combobox.
It will be shown at the left of the Combobox, by default.
checked: Boolean
Defines if the hoverPixel should start enabled.
Set true to start enabled, false otherwise.
hideLabel: Boolean
Defines if the label of the HoverPixel should be displayed.
Set true to hide the label, false to show it.
labelStyle: String
Defines the style of the label at the HoverPixel toggler.
You can use CSS to style the label element.
runOnClick: function
Defines a callback when the user clicks on the map.
It passes the following parameters for the callback function:
handleOnClick(layerVals, inputs, coordinates, clickEvent, lastCoordinates)
@param layerVals {Array} Array with the values of the maps at the pixel that was clicked.
@param inputs {Array} Array with the values of the inputs defined in the descriptionHtml.
@param coordinates {Object} Array with the coordinates (latitude, longitude) of the pixel that was clicked.
coordinates = {
lat: // Latitude of the pixel that was clicked
lon: // Longitude of the pixel that was clicked
}
@param clickEvent {MouseEvent} Mouse event that triggered the function.
@param lastCoordinates {Object} Object with the last coordinates (latitude, longitude) from the last click and the last hover events.
lastCoordinates = {
click: {
lat: // Latitude of the last click
lon: // Longitude of the last click
},
hover: {
lat: // Latitude of the last hover
lon: // Longitude of the last hover
}
}
runOnClickOutside: function
True to run the callback function even when clicking outside of the layer, False to disable. (Default False)
runOnHover: function
Defines a callback when the user hovers the map.
It passes the following parameters for the callback function:
handleOnClick(layerVals, inputs, coordinates, clickEvent, lastCoordinates)
@param layerVals {Array} Array with the values of the maps at the pixel that was hovered.
@param inputs {Array} Array with the values of the inputs defined in the descriptionHtml.
@param coordinates {Object} Array with the coordinates (latitude, longitude) of the pixel that was hovered.
coordinates = {
lat: // Latitude of the pixel that was hovered
lon: // Longitude of the pixel that was hovered
}
@param mouseMoveEvent {MouseEvent} Mouse event that triggered the function.
@param lastCoordinates {Object} Object with the last coordinates (latitude, longitude) from the last click and the last hover events.
lastCoordinates = {
click: {
lat: // Latitude of the last click
lon: // Longitude of the last click
},
hover: {
lat: // Latitude of the last hover
lon: // Longitude of the last hover
}
}
filterLayers: Array.<Number>
Defines an 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 by default. Otherwise, only the listed indexes are included.
Ex: A composed layer with three maps:
name: "CSR:estados,CSR:roads,CSR:municipalities",
If 'filterLayers=[0,1]' is defined in the layer object only the legends of 'CSR:estatdos' and 'CSR:roads' are shown.
legendId: String
Defines the legend container id. You can use this id to toggle each legend filter individually.
columnNameToInd: function(columnName) : Number
Get the index of a column with the 'columnName' name.
@param columnName {String} Column name to search for.
getLines: function(columns, values) : Array
Get all lines that 'column' has the value equals to 'value'.
PS: To use the 'column' as index, it must be numeric, when the 'column' is a text the index is searched on header by its name.
PS2: To filter multiple column each value and index one must be added to the 'columns' and 'values' arrays.
Ex: ([1,4,2], ["FIRST_COLUMN_VALUE","FORTH_COLUMN_VALUE", SECOND_COLUMN_VALUE])
@param columns {Array} (Optional) Array of indexes/names of the filtered columns.
@param values {Array} {Opcional) Array of values to match each column.
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.
backgroundColors: Array.<String>
Array of colors of background slider values, to define background slider color based in slider value.
The values are defined from most to minimum with two properties each:
- color: {String} CSS color definition for the current interval. i.e. 'red','black','#FF0000', '#000000'.
- startValue: {Numeric} If defined define the initial value which above will apply this color, otherwise use theminimum slider value as default.
Ex.:
backgroundColors: [
{
// Define background color to red when slider has value above 75.
color: "red",
startValue: 75
},
{
// Define background color starting from value 0.
// That results two intervals, from 0 to 75 as blue, and from 76 to 100 as red.
color: "blue",
startValue: 0
}
]
hideLabel: Boolean
Defines if it should completely hide the label element (label and separator) of the TextField.
That is, if this property is set to true, the label will be hidden. Otherwise, the label will be shown by default.
PS: Since the label will be shown by default, even if you do not specify a fieldLabel, the space for it will still be reserved so that the TextField will line up with other fields that do have labels. This space will be removed if you define it to be hidden.
checked: Boolean
Defines if Pickpoint should start selected.
Set it true to start it enabled, false otherwise.
geometryColor: String
If defined sets a color to use when drawing a geometry by this tool. Otherwise a random color will be used at each interaction.
markLayerInd: Number
Defines by layer index which one to draw its geometry when a click event happens. (0-indexed)
onMark: function
Callback function called after clicking on a feature with this 'pickpoint' widget.
P.S.: From 'this' keyword you can access the pickpoint properties.
@param eventAndProperties {Object} A object with {mouse, features} passed into the callback function:
- mouse: {PointerEvent} The mouse click event.
- features: {Array<Object>} An array of features representing the selected(s) feature(s).
onefeature: boolean
Defines if PickPoint should keep only the last feature selected.
Set it true to keep only the last one, false otherwise.
pointVisibility: Boolean
Defines if Pickpoint should show where the last click was.
Set it true to show, false otherwise.
runOnHover: function
Defines a callback function to run when clicking at the map.
Defines a callBack with following parameters function(mouseEvt, coordinates)
--mouseEvt: {MouseEvent} Mouse hover event.
--coordinates: {Openlayers.LatLon} Coordinate of the cursor over the map.
PS: Can access the layer itself using the 'this' keyword.
fieldLabel: String
Defines a label for the Timeline.
It will be shown at the left of the button to hide the tiemline, by default.
hideLabel: Boolean
Defines if the label of the timeline should be displayed.
Set true to hide the label, false to show it.
nextStepInterval: Number
Defines the duration of the interval between steps of the timeline in milliseconds.
onPlayToggle: function
Defines the callback function called when the timeline starts/stops 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.
preloadTiles: Boolean
Defines if the timeline should preload the tiles of the next steps to get smoother transitions.
Set it true to preload, false otherwise.
getValue: function(key) : *
Get the stored value by his property name, if it does not exists returns null.
@param key {String} Stored property name.
setValues: function(obj, cancelUpdate, local)
Stores object properties for later usage.
PS: If has name property collision the older is replaced.
@param obj {Object} Object with the properties to be stored.
@param cancelUpdate {Boolean} False if this change must cause layer recalculation, True otherwise.
@param local {Boolean} True to store the property locally, False otherwise. The local properties aren't sent to 'expression' calbacks. (i.e. If a element is recursive or have DOM elements, it must local avoid stringify errors on 'expression' callbacks)
description: function(name, config, layer, parameters) : Ext.Container
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.
@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.
id: String
Defines an id for the div contained in the floating window (where the content can be drawn).
ignoreVisibility: Boolean
Defines if the window should ignore the layer visibility state.
By default, the window visibility state is the same as the layer's.
Set true to ignore the layer visibility state, false otherwise.
PS: The 'ignoreVisibility' is not compatible with the 'associatedButtonID' property. When both are used together, the ignoreVisibility value is ignored.
onBeforeHide: function
Defines a 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
startVisible: Boolean
Defines if the window should start visible or not.
Set true if it should, false otherwise.
underButtons: Boolean
Defines where the floating window will be positioned in relation to the buttons panel.
Set true to position the window under the right buttons panel, false otherwise.
paramsButtonConfig
The paramsButtonConfig property is an array of objects that manage the layer menu buttons at the top right of the Legend Window. Each object in the array can have the following properties and functions:
hideBottomButton: Boolean
Define if should hide the buttons at the bottom of the Legend Window. I.e. "Exibir Consulta" e "Exibir Legenda". Set it to 'true' to hide those buttons or 'false' to display them.
hideButton: Boolean
Define if the associated button should be hidden. Set it to 'true' to hide the button or 'false' to show it.
This property only applies to the type: 'query'
iconCls: String
Define a class that will be added to the html in the associated button.
This class can be one that has a image on it like:
- 'gxp-icon-togglevisibility' is the icon of the Show/Hide Map Button (The first icon on the Legend Window, from left to right)
- 'gxp-icon-removelayers' is the icon of the Remove Layer Button (The second icon on the Legend Window, from left to right)
- 'gxp-icon-parameters-expand' is the icon of the Show Query Button (The third icon on the Legend Window, from left to right)
- 'gxp-icon-legend-expand' is the icon of the Show Legend Button (The forth icon on the Legend Window, from left to right)
- 'gxp-icon-downloadmapbutton' is the icon of the Download Button (The fifth icon on the Legend Window, from left to right)
pressed: Boolean
Defines if the button should start pressed or not. Set it to 'true' for it to start pressed or 'false' for start unpressed.
For example, the 'query' button type set as pressed will display the Query region (where the descriptionHtml content is) by default instead of the Legend region.
This property applies only to the types: 'query',
toggleGroup: String
Defines a group for all the buttons that has the same toggleGroup name. From all the buttons on the same group, only one can be active at each time. Whenever another one is activated the previous one collapses.
tooltip: String
Defines the help tooltip text that is displayed when the mouse hover the associated button.
type: String
Define which button will be affected by the configurations. The type can be one of the following:
- 'query': The query button is the one with sum, subtraction, division and multiplication signs. This button shows or hides the Query region (where the descriptionHtml is placed).
- 'download': The download button is the one with a downward arrow. This button allows the user to download the dataset. It also defines which Layer should be downloaded when more than one Layer is shown by its internal layer index.
- 'metadata': The metadata button is the one with a script icon. This button displays a popup with more information about the maps used in the actual Layer. You can make it show one of the inside composite Layer by his index.
- 'associated': Creates a custom button that is linked to another button defined in the descriptionHtml. When one is pressed the other is also pressed.
If the paramButtonsConfig has only one Object inside it and it doesn't have a type, its type will be query.
PS: The properties are aditional, so the common must always be present, and for each type his corresponding property must be added.
handler: function(button, clickEvent)
Defines a function that will be called when the associated button is clicked.
@param button {Object} is the button that was clicked by the mouse.
@param clickEvent {MouseEvent} is the object that carries more information about the click event.
toggleHandler: function(button, state)
This function is called whenever the associated button change its toggle state.
PS: Using custom function, ignore the associatedButtonID "It doesnt have to even exists".
@param button {Ext.Button} The button element that was clicked
@param state {Boolean} The next state of the button, true means pressed
Sharing Maps
You can share the Queries you create with Mappia through public links. To save your Query, you need to login at Mappia. Then hover the 'Query' button at the top left, define the name for the Query and, at last, click 'Salvar'. A 'queryId' will be generated for your custom Query. You can open any saved Query by passing the 'queryId' at the Mappia URL, like this: 'https://maps.csr.ufmg.br/calculator/?queryid=<insert_your_query_id_number>'. All Queries are saved publicly and can be accessed by anyone, but only the creator can update it.
// Example link for sharing a map just with its visualization
https://maps.csr.ufmg.br/calculator/?queryid=473
// Example link for sharing a map with its Query visible
https://maps.csr.ufmg.br/editor/?queryid=473extent: Array.<Number>
Defines in which part of the world the map will start on load.
The extents must be in EPSG:4326 (coordinates in lat,long). Also, the values need to be in the order: minX, minY, maxX, maxY, separated by comma with no spaces between them.
lang: String
Define in which language the Mappia default messages and texts will be displayed.
Actually, Mappia supports the following languages:
- Portuguese (Brazil): pt
- English: eng
map: string
Allow the user to define which 'local' maps to load on the URL.
You need to pass the map name like in the ones passed at the 'name' property of a Layer with 'source' set as 'local'.
This property only applies for visualization mode.
options: string
Allows the user to set some configurations when the map loads, like displaying a scale, how many Layers will start visible, etc…
queryid: Number
Define which Query will be loaded when the map loads. Every saved Query at Mappia receives a Query id number. By adding that number to the 'queryid', you can select the query loaded by the link.
You can find all Queries created at Mappia in the 'Query' button at the top left in the editor window. By hovering the button and selecting the 'Carregar Queries' option, a popup will show up with all the Queries created at Mappia. The older Queries are listed first.
tools: string
Define which tools will be available for the user to interact with the map. Every tool listed here will be available for the user.
If left empty, Mappia will display all tools for the user.
visiblelayers: Number
The 'visiblelayers' property is an integer value that defines how many Layers will start visible at load. The 'visiblelayes' can assume 5 type values:
- Positive integers: Define how many Layers will start visible when the map loads starting from the first (top) and going to the last (bottom)
- Negative integers: Define how many Layers will start visible when the map loads starting from the last (bottom) to the first (top)
- Zero: If set to zero, no Layer will start visible
- custom: The Layers will start visible as defined by the 'visibility' property of each Layer
- null: Set that there is no limit for the amount of visible Layers
customzoom: Boolean
If listed, will display the "Zoom de seleção" button. This button allows the user to drag the mouse to select a region to zoom in on the map.
getfeature: Boolean
If listed, will display the "Indentifica atributos da feição" button. This button, when active, allows the user to click at a specific point in the map and get the more informations of the point that was clicked.
helpintro: Boolean
Define if should display the Help Tutorial button. This button opens a simple tutorial on how to use the Mappia features.
hovershowlegend: Boolean
If listed, will display the "Exibir da legenda da feição sob o mouse" button. This button, when active, allows the user to see the map Legend value of where the mouse is hovering.
legend: Boolean
If listed, will display the Legend popup button. This button shows a popup with the Legend of the active layers.
measure: Boolean
If listed, will display the Ruler button. This button allows the user to do measurements of distances in the map.
capabilities: Boolean
If listed, will load only the maps defined in the 'name' property of the Layers. This can speed up the loading time of the Query.
disabledownload: Boolean
If listed, will hide the “download” button of the Legend Window.
The “download” button is the same one as the “paramButtonConfig” “download” type.
hidemetadata: Boolean
If listed, will hide the “metadata” button of the Legend Window.
The “metadata” button is the same one as the “paramButtonConfig” “metadata” type.
onlyfirstvisible: Boolean
If listed, only the first Layer defined at the Query will be visible when the map loads.
General Information
Some General information that may help in sharing and using maps
operations: function
An enumeration of the possible operations that can be performed on a map.
@param Value {Number} is the value of the Enum
* RAW Each cell in resulting map has the value of ther most centered cell in aggregated region.
* NORMAL A normal map is a map with each cell representing a legend/color and aren't a RAW Maps type.
* RGBA Each cell in resulting map has a integer value representing the RGBA composition.
PS: The result and also the input are integers represented by RGBA values.
* SUM Each resulting cell is the weighted sum of cells in the covering region.
PS2: The weight used is the proportion of the covered area against the total area of the cell i.e. VALUE * COVERED_PERCENTAGE.
* AVERAGE Each cell is the resulting of the weighted mean of cell in the covered region.
* MAX Each resulting cell is the greater cell that is at least partially covered in the given region.
* MIN Each resulting cell is the smaller cell that is at least partially covered in the given region.
* 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 TODO: Adicionar descrição
* AREA Each cell carry the original map area in the aggregated region.
(?) PS3: The 'area' simplifier agregates the original map areas, allowing to calculate the totals in any scale (with total precision).
* CELLS Weighted sum of the cell quantity in a given region.
Configuring Layers
Properties that allow to, define, custumize, provide functionalities to layers
attribution: String
Recognizes someone as the platform author, showing in the "Powered by: {insert name}".
enableToggle: Boolean
Defines the associated button as a regular button or toggle.
PS: When its true the callback function name is 'toggle', otherwise the callback is 'handler'.
getLayerLegend: function(composedLayer, index) : Array
Gets 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.
group: String
Defines which group the layer is associated with.
Layers from the same group can't be active simultaneously.
isCalculationPaused: function() : Boolean
Returns calculation status.
True if calculations are paused, false otherwise.
maxZoom: Numeric
Defines the limit of the real max zoom of a given layer.
When map zoom exceed this, the image is reused and stretched.
maxscale: Numeric
Defines the limit of the real max scale of a given layer.
When the map scale value exceeds the defined one, the image is reused and stretched.
metadataUrl: string|null
Defines the url to show custom layers metadata information.
If empty, the default value is obtained from layer metadata from the WMS definition.
PS: The linked domain must have CORS headers enabled.
minscale: Numeric
Defines the limit of the real min scale of a given layer.
When the map scale reaches a value lower than the defined one, the image is reused and compressed.
openGroup: Boolean
Defines if the group starts opened, even without any visible layers.
Set it true to start open, false otherwise.
PS: If one layer is visible, the group will start open.
type: String
Defines a data source in one of the supported types: 'load', 'csv', 'json' or 'default'.
'load': The user is responsible for load data directly on layer.
P.S.: This type, 'load', depends on an additional property, to be added on layer configuration, the 'loadData' callback function (inputs, layerConfig) called on layer scope.
The user must inform the starting and ending of each data loading on layer (The calls are accumulative) [respectively this.events.triggerEvent('startLoadingLayer') and this.events.triggerEvent('endLoadingLayer')].
'csv': Url address to load csv file from.
'json': Json data directly itself.
'jsonurl': Url address to load json from
P.S.: Depends on the url: property to give this type a url address.
'empty'
clusterDistance: Numeric
Defines the minimum relative distance (in pixels) to clusterize points.
Set 0 to never clusterize, or a value greater than 0 to set the minimum distance.
PS: When filters are applied, you can use the property 'count' on 'VectorLayer.styleMap' property to check how many points exists in the current cluster.
convertJsonEntryToFeature: function(curObj, optionalGetLonLat) : OpenLayers.Feature.Vector
Converts a JsonObject into a Layer Feature (that can be added to layer).
@param curObj {JsonObject} Object with properties.
@param optionalGetLonLat {function} Optional function to get position coordinates from JSON.
P.S.: Optional function to get X,Y values from Obj. (By default Longitude and Latitude use fields: lon and lat)
function optionalGetLonLat(curObj) returns OpenLayers.LonLat
curObj: Object with JSON properties.
This function receive the 'curObj' and expects to returns the object properties.
coordinates: Object
Redefines the coordinate property names to {x, y}.
PS: Used only if the 'VectorLayer.getVector' is not defined.
defaultStyle: Object
Defines the default style that will be applied to the geometry.
PS: Accepts 'context' and 'rules'.
Property 'context': allows definition of functions.
Property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
Look at some examples at: http://dev.openlayers.org/examples/
getLayerDefinedFunctionsByName: function(name) : function|Undefined
Gets the layer inner function.
Define the layer inner function at VectorLayer.
Ex: {
name: 'CSR:map_name',
function: {
nameFunctionExample: function(){alert('a');}
}
}
@param name {String} Function name
getVector: function
Defines the callback function to parse the layer data and get the geometry.
Callback Function getVector function(attribute, config)
@param attribute {Object} Object with attributes.
@param config {Object} Layer config.
hoverSelectedStyle: Object
Defines the style that will be applied to the geometry when the mouse hovers over a selected feature. Default hover selected style is the selected style
PS: Accepts 'context' and 'rules'.
Property 'context': allows definition of functions.
Property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
PS2: Hover Select depends on both 'onHover' and 'onClick' properties to work.
Look at some examples at: http://dev.openlayers.org/examples/
hoverStyle: Object
Defines the style that will be applied to the geometry when mouse is hovering.
PS: Accepts 'context' and 'rules'.
Property 'context': allows definition of functions.
Property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
PS2: Hover depends on 'onHover' property that allows to hovering.
Look at some examples at: http://dev.openlayers.org/examples/
onAdded: function
Defines the callback function that is 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 )'
}
onBeforeFeatureChangeCallback: function
Defines the callback function that is called before a layer feature is added, removed or edited.
PS: If it returns false, the change operation is canceled.
@param operationType {String} Receive the operation type: 'add' or 'remove' when adding or removing respectively.
@param arrFeatures {Array} Array of features affected.
onClick: function
Defines the 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.
onClickCfg: function
Defines the callback function to the Click Select controller.
The additional parameters are listed in http://dev.openlayers.org/docs/files/OpenLayers/Control/SelectFeature-js.html.
onFeatureChangeCallback: function
Defines a function that is called after a layer feature is added, removed or edited.
@param operationType {String} Receive the operation type: 'add' or 'remove' when adding or removing respectively.
@param arrFeatures {Array} Array of features affected.
onHover: function
Defines the callback function on 'Vector Layer' hover.
@param evt {Object} Features.
@param state {Boolean} True when hover starts, false when it ends.
@param controller {Object} The controller itself.
@param inputs {Object} Layer widget values.
onLoad: function
Defines the callback function to be called after the layer is loaded or added to a map.
PS: You can use 'this' to access layer properties.
@param widgetValues {Array} inputs for onLoad callback
popupCallback: function
Defines the callback function to be called on popup.
@param attributes {Array} attributes for popupCallback
@param inputs {Array} inputs for popupCallback
selectStyle: Object
Defines the default style that will be applied to the selected geometry.
PS: Accepts 'context' and 'rules'.
Property 'context': allows definition of functions.
Property 'rules': allows definition of filters (only the geometries that fit into this rule will be displayed).
PS2: Selected depends on 'onClick' property that allows to select.
Look at some examples at: http://dev.openlayers.org/examples/
setDrawing: function(enabled, callbackOnAdd)
Defines drawing features on layers.
PS: Function is available to the VectorLayer.
@param enabled {Boolean} True to enable drawing, False otherwise.
@param callbackOnAdd {function} Callback when a new feature is drew.
P.S.: You can use 'this' to access layer properties.
P.S.2: The callback function receives 2 parameters:
- vectorLayer: Current layer.
- drawEvent: The info of the added polygon.
Helper Functions
Set of functions that help creating map interactions
changeLayers: function(newConfig, force)
Replaces an internal layer at a given index.
PS: It's highly recommended to pass multiple configurations in an array, instead of calling 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.
otherNames: String
Defines additional maps to be available for the query, which will be listed in the filtered stored capabilities.
Every map included in layer definition needs to be either in 'name' property or 'otherNames' property.
PS: This property must be used along with the 'capabilities' url option, which filters the 'GetCapabilities' response with only the maps included in layer definition. (Performance Optimization, faster loading).
PS2: This property is only needed outside of the editor mode.
CreateTooltipOnPosition: function(title, contentHtml, position, additionalConfig) : Ext.Tooltip
Create a tooltip at a fixed position.
If the position is the mouse event, the tooltip will be at the right side and below the pointer.
If the position is a array[x,y] will anchor the top left at this point.
@param title {String} Tooltip title.
@param contentHtml {String} Tooltip HTML content.
@param position {Event|Array.<Number>} Defines the top left
position of the tooltip. Can be either a mouse event at or an
array [x:Number, y:Number] with the cursor position.
@param additionalConfig {Object} Additional configuration for the tooltip.
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.
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} The message that will be displayed in the alert. It can be in HTML format.
@param config {Object} Configuration parameters for the message.
{
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).
}
addRemoteWMSServer: function(wmsDefinitions, QUERY_DESCRIPTION) : boolean
Adds 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
decorate: function(pageProperties)
Defines custom 'CSS' 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.
runNow: function()
Defines functions to be called before layer definition, inside 'QUERY.setQueryGlobalProperties'.
runOnceLayerVisible: function(layer, callback)
Defines a function that is called after the specified layer is rendered. If the layer is already visible, the function is executed immediately.
PS: This is used inside of layer callback functions.
@param layer {OpenLayers.Layer} Layer that has to be rendered.
@param callback {function} Function to be called.
setMappiaIoCallback: function(onMsgCallback)
Defines a function that receives a message from the parent window, allowing communication between the Mappia/iframe and the parent window. (Compatible with MappiaIO library)
The 'QUERY.postMessage' is responsible for sending message.
@param onMsgCallback {function} Callback that will receive the param passed on 'MappiaIO.postMessage'.
- jsStr {Object|String} Received param from parent window to Mappia/iframe.
setQueryGlobalProperties: function(globalProperties) : Boolean
Allows to define custom global functions that can be used to define properties.
PS: All properties defined here are added to the global scope and are removed when the query is changed.
PS2: QUERY_DESCRIPTION is the definition of layers in the query used immediately after the function.
@param globalProperties {Object} The object that all his functions will become globals, each property can be a value or a object or even a function.
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'
}
getLayersRecord: function(layerName, storeName) : Array.<Ext.data.Record>|Ext.data.Record|Null
Gets the store layer information from its full name.
PS: The 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 it will return all records.
@param storeName {String} Optional Name to search only in specific sources for the 'layerName' (fill it to prevent from searching in all stores).
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.
postMessage: function(jsStr)
Sends a message to the Mappia/iframe, allowing communication between the Mappia/iframe and the parent window. (Compatible with MappiaIO library)
The 'QUERY.setMappiaIoCallback' is responsible to interpret the sent message.
@param jsStr {Object|String} Object to be sent from inside Mappia/iframe to parent window.
External Libraries
External libraries that may be useful for creating data visualisation