Hydrologic resources influenced by land use change

View query content Open in editor mode Open in larger window.

Show multiple maps together.

Reference: the parameters used here

Generated from the platform source. Every entry, searchable, is in the API reference; the raw data is api.json. Open an entry for its description, parameters and example; # links to it.

Sankey · flow charts (Highcharts module)

Sankey1 entry

Soon.

`load`

function() : undefined# A Sankey diagram - transitions between categories drawn as flows - is a Highcharts module rather than part of the bundled build, so it is loaded on demand before the chart is created.

A Sankey diagram - transitions between categories drawn as flows - is a Highcharts module rather than part of the bundled build, so it is loaded on demand before the chart is created. Once the module is in place, a Sankey is an ordinary Highcharts chart with type: 'sankey', whose data is a list of [from, to, weight] rows: one row per transition, which is exactly the shape a transition matrix produces.

Load it once, when the panel is ready, and draw inside the callback - the module is shared, so a second call with the same URL is free.

Returns Nothing; the chart is created in the callback.

AsyncLoader.loadScriptOnce('/theme/app/js/highcharts/latest/sankey.js', function () {
    Highcharts.chart('transitions_chart', {
        title: { text: 'Land use transitions' },
        series: [{
            type: 'sankey',
            keys: ['from', 'to', 'weight'],
            data: [['Forest', 'Pasture', 120], ['Pasture', 'Crop', 45]]
        }]
    });
});

QUERY · setup calls and the running query

QUERY1 entry

ExtjsUtils.QUERY: calls before the list (setQueryGlobalProperties, addRemoteWMSServer, decorate, setMappiaIoCallback) and changes to the running query from your functions (addLayer, removeLayer, postMessage).

View the complete Query API here.

`setQueryGlobalProperties`

function(globalProperties) : Booleanhelper# Defines globals for the query: every key of globalProperties becomes a window property (a value, an object or a function) that layer definitions, markup widgets (handler=, onMark=...) and …

Written as ExtjsUtils.QUERY.setQueryGlobalProperties

Defines globals for the query: every key of globalProperties becomes a window property (a value, an object or a function) that layer definitions, markup widgets (handler=, onMark=...) and other query code can reference by name. The names are recorded and the globals are deleted when another query loads. A key that already exists on window and was not created by the query is refused with "Global variable can't be redefined" in the console (the platform's own globals are protected; redefining one of the query's own keys is fine). runNow is the only key the platform itself invokes: right after the globals are registered QUERY.runNow is called once (see that entry). Chain it with && before the layer array so the globals exist when the layers are evaluated; QUERY_DESCRIPTION in the examples stands for that array.

globalProperties Object: Object whose keys become globals; each value may be a value, an object or a function.

Returns Always true, so the call can be chained with && QUERY_DESCRIPTION.

ExtjsUtils.QUERY.setQueryGlobalProperties({
  globalCount: 0,
  onLayerButton: function(btn) { console.log("clicked", btn); },
  runNow: function() { ExtjsUtils.ZOOM.limitZoomLevel(17); }
}) && [
  { name: "CSR:estados", visibility: true, descriptionHtml: "{{button|id=b1|text=Go|handler=onLayerButton}}" }
]

Calculated layers: methods (this.)

LayerInternal2 entries

Methods of a calculated layer that your functions call on this - this.setCalculateLegend in beforeCalc, this.changeLayers to switch its maps, this.getInputs... They are not keys you write in the layer.

View all layer internal helper functions API here.

`changeLayers`

function(newConfigs, force)method# Replaces an internal layer at a given index.

Written as this.changeLayers

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.

newConfigs 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'}, ... ]
force Boolean: Force redraw even if no change is done when the layer is the same.

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

`setCalculateLegend`

function(legendEntries)method# Defines the legend of the calculated map yourself, which also skips the automatic legend calculation for this cycle.

Written as this.setCalculateLegend

Defines the legend of the calculated map yourself, which also skips the automatic legend calculation for this cycle. It is meant to be called inside beforeCalc, the moment right before a new legend would be computed, but it can also be called from a tool callback (e.g. a {{button}} handler). When the given entries equal the current legend nothing is redrawn.

legendEntries Array.<{color: Array.<Number>, value: *, title: String}>: Legend entries sorted by value in ascending order (entries out of order are ignored). color is the [R, G, B] colour of the entry, value the highest value that maps to it, title the label shown in the legend.

beforeCalc: function(inputs) {
   this.setCalculateLegend([
      {color: [0, 0, 255], value: 500, title: 'Up to 500 m'},
      {color: [255, 255, 0], value: 1000, title: 'From 500 m to 1000 m'},
      {color: [255, 0, 0], value: 3000, title: 'Above 1000 m'},
   ]);
}

AsyncLoader · load scripts once

AsyncLoader1 entry

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

`loadScriptOnce`

function(src, callback)# Loads one or more external resources by URL, each of them only once per page, and calls callback after every URL of the set has finished loading.

Loads one or more external resources by URL, each of them only once per page, and calls callback after every URL of the set has finished loading. A URL ending in .css is inserted as a <link rel="stylesheet">; any other URL is inserted as an async <script> tag (placed before the first script of the page). Use it inside a query to lazy-load libraries or data files (Highcharts modules, PapaParse, a pre-baked JS data file) right before the code that needs them.

Rules worth knowing: a URL that already finished loading is skipped, so repeated calls are cheap and safe; when nothing in the set still needs loading the callback runs synchronously, before this function returns; calls made with the same set of pending URLs share one loading queue, and all their callbacks run once that set completes; the callback receives no arguments.

src String|Array.<String>: A resource URL, or an array of URLs to load together.
callback function: Called (with no arguments) once every URL in src is loaded.

AsyncLoader.loadScriptOnce(["/theme/app/js/papaparse.min.js", "/theme/app/js/highcharts/latest/sankey.js"], function() {
    // both files are loaded (or were already loaded): safe to use Papa and Highcharts.seriesTypes.sankey
    drawSankeyChart();
});

AsyncLoader.loadScriptOnce("/theme/app/css/my-query-styles.css");

timeline · scenarios over time (input)

Timeline31 entries

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

Display a spatial scenarios changes in a timeline.

View the complete Timeline API here.

`fieldLabel`

String# Defines a label for the Timeline.

Defines a label for the Timeline. It will be shown at the left of the button to hide the tiemline, by default.

|fieldLabel=This is the field label|

`getCurrentLayerStyle`

function() : String# Returns the WMS style currently applied to the layer (layer.params.STYLES), or an empty string for the default style.

Returns the WMS style currently applied to the layer (layer.params.STYLES), or an empty string for the default style.

Returns The active style name.

var style = Ext.getCmp('years_tl').getTimeline().getCurrentLayerStyle();

`getDesiredVisibility`

function() : Boolean# Returns the visibility the timeline has, or will have when its layer becomes visible: true may be returned while the panel is actually hidden because the layer is hidden.

Returns the visibility the timeline has, or will have when its layer becomes visible: true may be returned while the panel is actually hidden because the layer is hidden.

Returns true when the timeline is (or will be) shown together with the layer.

var shown = Ext.getCmp('years_tl').getTimeline().getDesiredVisibility();

`getMainThumb`

function() : Ext.slider.Thumb# Returns the main (middle) thumb of the slider — the one that selects the current step; its value is the 0-based step index.

Returns the main (middle) thumb of the slider — the one that selects the current step; its value is the 0-based step index. The outer thumbs (thumbs[0], thumbs[2]) bound the animation range.

Returns The main thumb; read the step index from .value.

var stepIndex = Ext.getCmp('years_tl').getTimeline().getMainThumb().value;

`getMaxThumbValue`

function() : Number# Returns the position of the right (max) thumb: the last step index the animation reaches.

Returns the position of the right (max) thumb: the last step index the animation reaches.

Returns 0-based step index of the max thumb.

var last = Ext.getCmp('years_tl').getTimeline().getMaxThumbValue();

`getMinThumbValue`

function() : Number# Returns the position of the left (min) thumb: the step index the animation restarts from.

Returns the position of the left (min) thumb: the step index the animation restarts from.

Returns 0-based step index of the min thumb.

var first = Ext.getCmp('years_tl').getTimeline().getMinThumbValue();

`getStyleFromValue`

function(value) : String|Object|undefined# Returns the style of a step key or, when the key has no style of its own, the style of the nearest previous key (numeric keys are compared as numbers, text keys by position in steps).

Returns the style of a step key or, when the key has no style of its own, the style of the nearest previous key (numeric keys are compared as numbers, text keys by position in steps).

value String|Number: A step key.

Returns The style (name or {style, name} object), or undefined when no previous step has one.

var style = Ext.getCmp('years_tl').getTimeline().getStyleFromValue('2014');

`getTimeline`

function() : GeoExt.TimelinePanel# Returns the timeline panel driven by this button.

Returns the timeline panel driven by this button. The markup id identifies the button, so this is the way to reach the panel methods (getValue, updateMainThumbValue, startAnimationStep, setSteps...).

Returns The timeline panel (null after the button was destroyed).

var timeline = Ext.getCmp('years_tl').getTimeline();
timeline.updateMainThumbValue(0); // first step

`getValue`

function() : String# Returns the key of the step currently selected by the main thumb (the same value the layer receives in inputs.id[ID]).

Returns the key of the step currently selected by the main thumb (the same value the layer receives in inputs.id[ID]).

Returns The current step key (first element of the steps entry).

var year = Ext.getCmp('years_tl').getTimeline().getValue(); // '2010'

`getValueFromStyle`

function(style) : Number# Returns the step key whose style is the given one (the last match when several steps share a style), or the first step key when the style is empty or unknown.

Returns the step key whose style is the given one (the last match when several steps share a style), or the first step key when the style is empty or unknown. The key is returned through parseInt, so it is meaningful for numeric keys only (text keys give NaN).

style String: A style name as used in steps.

Returns The numeric step key.

var year = Ext.getCmp('years_tl').getTimeline().getValueFromStyle('style_2010'); // 2010

`hidden`

Boolean= false# Set true to hide the "Show/Hide timeline" button rendered in the layer description (the standard Ext hidden config, so Ext.getCmp(id).show() reveals it).

Set true to hide the "Show/Hide timeline" button rendered in the layer description (the standard Ext hidden config, so Ext.getCmp(id).show() reveals it). The timeline panel itself is still created and its initial visibility follows renderHidden; use it when the timeline is driven by a paramsButtonConfig button or by code instead. Any other Ext.Button config is passed through.

|hidden=true|

`hideLabel`

Boolean= false# Defines if the label of the timeline should be displayed.

Defines if the label of the timeline should be displayed. Set true to hide the label, false to show it.

|hideLabel=true|

`id`

String# Defines the id to identify the object.

Defines the id to identify the object. It is the key used in inputs.id[ID] and the id of the show/hide button component: Ext.getCmp(id) returns the button and Ext.getCmp(id).getTimeline() the timeline panel (see the methods listed in this group).

|id=exemple_timeline|

`nextAnimationStep`

function()# Advances the timeline one step (main thumb + 1), applying the style of the new step to the layer and firing change; does nothing when the main thumb is already at the max thumb.

Advances the timeline one step (main thumb + 1), applying the style of the new step to the layer and firing change; does nothing when the main thumb is already at the max thumb. Useful for a custom "next" button.

Ext.getCmp('years_tl').getTimeline().nextAnimationStep();

`nextStepInterval`

Number= 2100# Defines the duration of the interval between steps of the timeline in milliseconds.

Defines the duration of the interval between steps of the timeline in milliseconds.

|nextStepInterval=1000|

`onPlayToggle`

function# Defines the callback function called when the play/stop button is toggled, BEFORE the animation starts or stops.

Defines the callback function called when the play/stop button is toggled, BEFORE the animation starts or stops. It must return a truthy value: returning false/nothing cancels the start/stop (use it as a veto, e.g. while data is loading). pressed is true when the animation is about to start.

The value is resolved as a key of the layer functions object, then as a global function with that name, then as inline function text (function(...){...}; a plain statement body also works and returns true).

pressed Boolean: True if the button was pressed (animation about to start), False otherwise.
layer Object: The layer associated to this timeline.
timeline Object: The timeline panel.
playBtn Object: The play/stop button.

|onPlayToggle=onPlayToggle|

|onPlayToggle = function (pressed, layer, timeline, playBtn) {
     console.log("The timeline is about to " + (pressed ? "start" : "stop"));
     return true; // required, a falsy return cancels the toggle
}|

`playing`

Boolean= false# true while the animation is running (between play and stop/end).

true while the animation is running (between play and stop/end). Read it on the panel (Ext.getCmp(id).getTimeline().playing) to know whether to call startAnimationStep() or stopAnimation().

if (!Ext.getCmp('years_tl').getTimeline().playing) Ext.getCmp('years_tl').getTimeline().startAnimationStep();

`preloadTiles`

Boolean= false# Defines if the timeline should preload the tiles of the next steps to get smoother transitions.

Defines if the timeline should preload the tiles of the next steps to get smoother transitions. Set it true to preload, false otherwise.

|preloadTiles = true|

`renderHidden`

Boolean= false# Defines the timeline initial visibility.

Defines the timeline initial visibility. Set it true to start with the timeline hidden, false otherwise.

|renderHidden = true|

`setCurrentLayerStyle`

function(style)# Applies a style to the layer the way a step does: a style name, or a {style, name} object that also switches the WMS layer name (the object form of a steps entry).

Applies a style to the layer the way a step does: a style name, or a {style, name} object that also switches the WMS layer name (the object form of a steps entry). For a composed layer the first inner layer is updated and the legend is rebuilt. The slider is not moved (use updateMainThumbValue).

style String|Object: Style name ('' for the default) or {style: 'name', name: 'CSR:layer'}.

Ext.getCmp('years_tl').getTimeline().setCurrentLayerStyle({style: 'estados_2', name: 'CSR:estados'});

`setDesiredVisibility`

function(visible) : GeoExt.TimelinePanel# Shows or hides the timeline panel while keeping it consistent with the layer: when the layer is hidden the panel stays hidden and the requested state is remembered, to be applied as soon as the layer becomes visible.

Shows or hides the timeline panel while keeping it consistent with the layer: when the layer is hidden the panel stays hidden and the requested state is remembered, to be applied as soon as the layer becomes visible. Prefer it over show()/hide(); the show/hide button follows the panel automatically.

visible Boolean: true to show the timeline (once the layer is visible), false to hide it.

Returns The panel, for chaining.

Ext.getCmp('years_tl').getTimeline().setDesiredVisibility(true);

`setMaxThumbValue`

function(value)# Moves the right (max) thumb, limiting the animation to the steps up to that index (no animation, no change event).

Moves the right (max) thumb, limiting the animation to the steps up to that index (no animation, no change event).

value Number: 0-based step index for the max thumb.

Ext.getCmp('years_tl').getTimeline().setMaxThumbValue(5);

`setMinThumbValue`

function(value)# Moves the left (min) thumb, making the animation start from that step index (no animation, no change event).

Moves the left (min) thumb, making the animation start from that step index (no animation, no change event).

value Number: 0-based step index for the min thumb.

Ext.getCmp('years_tl').getTimeline().setMinThumbValue(2);

`setSteps`

function(steps)# Replaces the steps of the timeline and redraws it (labels, slider range and current step).

Replaces the steps of the timeline and redraws it (labels, slider range and current step). Unlike the markup steps parameter this takes the already-built object: keys are the step labels, values the style name or a {style, name} object. Use it to change the available periods at runtime (e.g. after a combobox selection).

steps Object: Map of step key to style: {'1990': 'style_1990', '2000': {style: 's2000', name: 'CSR:layer'}}.

Ext.getCmp('years_tl').getTimeline().setSteps({2000: 'style_2000', 2010: 'style_2010'});

`startAnimationStep`

function()# Starts (or resumes) the animation from the current step: each step is shown for nextStepInterval milliseconds after the layer finished loading it, up to the max thumb, where the animation stops by itself.

Starts (or resumes) the animation from the current step: each step is shown for nextStepInterval milliseconds after the layer finished loading it, up to the max thumb, where the animation stops by itself. When the main thumb is already at the max thumb it restarts from the min thumb. Same as pressing the play button, except that onPlayToggle is not consulted.

Ext.getCmp('years_tl').getTimeline().startAnimationStep();

`steps`

Array.<Array.<(String|Object)>># Defines the timeline change steps.

Defines the timeline change steps.

|steps=[["step_0"], ["step_1"], ["step_2"]]|

|steps=[['Nome', {style:"step_0_style",name:"CSR:estados"}], ['Região', {style:"step_1_style",name:"CSR:estados"}], ['Geocódigo', {style:"step_2_style",name:"CSR:estados"}]]|

|steps=[['Nome', 'step_0'], ['Região', 'step_1'], ['Geocódigo', 'step_2']]|

|steps=[{1990: "layer_style0", 1991: "layer_style1", 1992: "layer_style2"}, 1993: "layer_style3"}]|

`stopAnimation`

function()# Stops the running animation (cancels the pending step timer, releases the play button and hides the slider tip).

Stops the running animation (cancels the pending step timer, releases the play button and hides the slider tip). The current step is kept. Safe to call when nothing is playing.

Ext.getCmp('years_tl').getTimeline().stopAnimation();

`toggleTimelineVisibility`

function(forceState)# Shows or hides the timeline panel from code — what clicking the button does.

Shows or hides the timeline panel from code — what clicking the button does. Without an argument the current (desired) visibility is inverted. The panel only appears while the layer is visible; the requested state is remembered otherwise (see setDesiredVisibility).

forceState Boolean: true to show the timeline, false to hide it; omit to invert.

Ext.getCmp('years_tl').toggleTimelineVisibility(true);

`updateLayer`

function(value)# Applies to the layer the style of a step key, without moving the slider.

Applies to the layer the style of a step key, without moving the slider. When the key has no step of its own the style of the nearest previous numeric key is used (steps {2010: "s1", 2015: "s2"} and value 2014 keep/apply "s1"); nothing happens when that style is already active. Called by the slider on every change; call it yourself to preview a step, then updateMainThumbValue() to sync the thumb.

value String|Number: A step key (first element of a steps entry).

Ext.getCmp('years_tl').getTimeline().updateLayer('2010');

`updateMainThumbValue`

function(value)# Moves the main thumb to a step index (0-based position in steps), applying that step's style to the layer and firing change — the programmatic way to select a step.

Moves the main thumb to a step index (0-based position in steps), applying that step's style to the layer and firing change — the programmatic way to select a step. Without an argument it re-syncs the thumb with the layer's current style using getValueFromStyle (used when another tool changes the style). The min/max thumbs are pushed outwards when the index falls outside the current range.

value Number: Step index; omit to sync the thumb with the layer's current style.

Ext.getCmp('years_tl').getTimeline().updateMainThumbValue(2); // third step

`value`

String# Value stored in inputs.id[ID] (and inputs[i]): the key of the current step — the first element of the selected steps entry (e.g. "1990" or "January"), as a string.

Value stored in inputs.id[ID] (and inputs[i]): the key of the current step — the first element of the selected steps entry (e.g. "1990" or "January"), as a string. It changes whenever the main thumb moves (drag, click or animation) and the layer recalculates on the widget change event, after the layer style of the step was applied. The same change event is fired on the button (Ext.getCmp(id).on('change', function(button, value) {...})).

{{timeline|id=years_tl|nextStepInterval=1500|steps=[['1990', 'style_1990'], ['2000', 'style_2000'], ['2010', 'style_2010']]}}

beforeCalc: function(inputs) {
    var year = parseInt(inputs.id['years_tl'], 10);
}

combobox · pick from a list (input)

Combobox11 entries

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

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

This button is created from Ext.form.ComboBox for customized properties click on API here.

`data`

Array.<Array.<String>>= undefined# Defines the data that will be displayed in the Combobox.

Defines the data that will be displayed in the Combobox.

|data = [["Val_1"], ["Val_2"],..]|

`editable`

Boolean= false# Determines if the Combobox is editable.

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.

|editable=true|

`fieldLabel`

String# Defines a label for the Combobox.

Defines a label for the Combobox. It will be shown at the left of the Combobox, by default.

|fieldLabel=This is the field label|

`getValue`

function() : String# Returns the currently selected value (the text of the chosen data entry).

Returns the currently selected value (the text of the chosen data entry). Call it on the component (Ext.getCmp(id) or a getid= reference); inputs.id[ID] already holds the same value.

Returns The selected value.

var region = Ext.getCmp('region_combo').getValue();

`hideLabel`

Boolean= false# Defines if the label of the Combobox should be displayed.

Defines if the label of the Combobox should be displayed. Set true to hide the label, false to show it.

|hideLabel=true|

`id`

String# Defines the id to identify the object.

Defines the id to identify the object.

|id=legend_combobox|

`labelStyle`

String# Defines the style of the label.

Defines the style of the label. You can use CSS to style the label element.

|labelStyle=font-weight: bold; color: red;|

`onSelect`

function# Defines a callback run when the user picks an entry.

Defines a callback run when the user picks an entry. It receives the Ext select event arguments (combo, record, index) — read the chosen text with record.get('value') — and this is the layer. The value is resolved as a key of the layer functions object or, failing that, the text itself is evaluated as a function (a body or a full function(){...}); unlike the other callbacks it does NOT look for a global (setQueryGlobalProperties) function of that name. PS: the layer is recalculated on select anyway; use onSelect for side effects such as changing layers or updating a window.

|onSelect=onRegionSelected|

functions: {
    onRegionSelected: function(combo, record, index) {
        this.changeLayers({name: 'CSR:' + record.get('value'), index: 0});
    }
}

`setValue`

function(value)# Selects an entry from code.

Selects an entry from code. Pass one of the data values; it does not fire select, so call forceRecalc() on an InputManager (or fire the event) when the layer must be recalculated.

value String: One of the values listed in data.

Ext.getCmp('region_combo').setValue('Protected Areas');

`value`

String# Value stored in inputs.id[ID] (and inputs[i]): the selected entry of data as a string (the first entry is selected initially).

Value stored in inputs.id[ID] (and inputs[i]): the selected entry of data as a string (the first entry is selected initially). The layer recalculates on the combobox select event (user choice).

{{combobox|id=region_combo|fieldLabel=Region|data=[['Municipalities'],['Protected Areas']]}}

beforeCalc: function(inputs) {
    var region = inputs.id['region_combo']; // 'Municipalities' or 'Protected Areas'
}

`width`

Number= 190# Defines the width of the combobox in pixels.

Defines the width of the combobox in pixels.

|width=250|

Link parameters (?name=value)

URLProperties3 entries

Parameters of the link that opens a saved map: ?queryid=123&lang=eng&tools=...&options=... tools and options take the lists below.

`options`

string= string.emptylink parameter# Allows the user to set some configurations when the map loads, like displaying a scale, how many Layers will start visible, etc…

Written as ?options=

Allows the user to set some configurations when the map loads, like displaying a scale, how many Layers will start visible, etc…

// Example of query in visualization mode
https://maps.csr.ufmg.br/calculator/?queryid=<query_id>&options=<options_list>

// Example of query in edit mode
https://maps.csr.ufmg.br/editor/?queryid=<query_id>&options=<options_list>

See also To learn more about the Options available and how to set them up, check their documentation at: URL Options Section.

`tools`

string= 'All tools available'link parameter# Define which tools will be available for the user to interact with the map.

Written as ?tools=

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.

// Example of query in visualization mode
https://maps.csr.ufmg.br/calculator/?queryid=<query_id>&tools=<tools_list>

// Example of query in edit mode
https://maps.csr.ufmg.br/editor/?queryid=<query_id>&tools=<tools_list>

See also To learn more about the Tools available and how to set them up, check their documentation at: URL Tools Section.

`visiblelayers`

Number|String= customlink parameter# How many layers start visible.

Written as ?visiblelayers=

How many layers start visible. When the parameter is present it overrides the 'visibility' of every layer: all layers start hidden, then this many are turned on, counted in query order.

A positive number N: the first N layers of the query start visible.
A negative number -N: the last N layers start visible.
0: no layer starts visible.
custom: the same as leaving the parameter out: each layer's own 'visibility' decides.

Leaving it out (the default) lets each layer's 'visibility' decide; options=onlyfirstvisible is the same as visiblelayers=1. Any other text, null included, hides every layer.

// Example of query in visualization mode
// If the Layer has 3 Layers in the order: Layer1, Layer2 and Layer3,
// By setting 'visibelayers=2', the FIRST two Layers will start visible
// That is, the Layer1 and Layer2 will start visible
https://maps.csr.ufmg.br/calculator/?queryid=<query_id>&visiblelayers=2

// Example of query in edit mode
// If the Layer has 3 Layers in the order: Layer1, Layer2 and Layer3
// By setting 'visiblelayers=-2', the LAST two Layers will start visible
// That is, the Layer3 and Layer2 will start visible
https://maps.csr.ufmg.br/editor/?queryid=<query_id>&visiblelayers=-2

// Example of query in edit mode
// By setting 'visiblelayers=0', no Layer will start visible when the map loads
https://maps.csr.ufmg.br/editor/?queryid=<query_id>&visiblelayers=0

// Example of query in visualization mode
// By setting 'visiblelayers=custom', the Layers will start visible based on
// its 'visibility' property. Only if 'visibility: true', the Layer will start visible
https://maps.csr.ufmg.br/calculator/?queryid=<query_id>&visiblelayers=custom

inputmanager · values kept for your functions (input)

InputManager6 entries

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

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

View the complete InputManager API here.

`forceRecalc`

function()# Force a legend map recalculation.

Force a legend map recalculation.

`getValue`

function(key) : *# Get the stored value by his property name, if it does not exists returns null.

Get the stored value by his property name, if it does not exists returns null.

key String: Stored property name.

Returns Desired stored property when it exists or null otherwise.

`id`

String# Defines the id of the input; it is the key used to reach the manager in inputs.id[ID] (required, the tool renders nothing visible).

Defines the id of the input; it is the key used to reach the manager in inputs.id[ID] (required, the tool renders nothing visible).

|id=state|

`setDefaultValues`

function(obj, local)# Set default values to the stored elements, these values are used before any other value is defined and never update or replace another stored values.

Set default values to the stored elements, these values are used before any other value is defined and never update or replace another stored values.

PS: Auxiliary function to make easy wrinting the script (typically called in onInputsReady or at the start of beforeCalc). PS: This function never fire layer update.

obj Object: Default values properties.
local Boolean: True when the properties should be store locally (and not sent to expression WebWorkers callbacks).

inputs.id['state'].setDefaultValues({year: 2020, scenario: 'base'});

`setValues`

function(obj, cancelUpdate, local)# Stores object properties for later usage.

Stores object properties for later usage.

PS: If has name property collision the older is replaced. PS: Values go to one of two buckets of the manager: global (the default — serialized and sent to expression, so it must hold plain JSON-compatible data) or _local_ (with local=true — kept in the browser only, may hold DOM elements, Ext components, functions or circular objects). getValue(key) looks in global first, then in _local_.

obj Object: Object with the properties to be stored.
cancelUpdate Boolean: False if this change must cause layer recalculation, True otherwise.
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)

inputs.id['state'].setValues({year: 2020});                      // recalculates the layer

inputs.id['state'].setValues({lastInterval: cur}, true, true);  // silent, browser-only

`value`

Object# Value stored in inputs.id[ID]: the manager object itself, with getValue(key), setValues(obj, cancelUpdate, local), setDefaultValues(obj, local) and forceRecalc() (listed in this group) and …

Value stored in inputs.id[ID]: the manager object itself, with getValue(key), setValues(obj, cancelUpdate, local), setDefaultValues(obj, local) and forceRecalc() (listed in this group) and the global bucket where the stored properties live (inputs.id[ID].global.key is a shortcut for getValue). The layer recalculates on its own change event, which setValues (unless cancelled) and forceRecalc trigger. Only the global bucket reaches expression (WebWorker); values stored with local=true are kept in a bucket that is not serialized and can therefore hold DOM/Ext references.

{{inputmanager|id=state}}

beforeCalc: function(inputs) {
    var year = inputs.id['state'].getValue('year') || 2020;
}

Highcharts · charts

Highcharts1 entry

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

Highcharts JS has a complete set of examples and a nice documentation that can be accessed here.

`chart`

function(renderTo, options) : Object# Highcharts is loaded by the calculator and editor pages, so a query can call Highcharts.chart(...) without loading anything: put a container in the layer's descriptionHtml and create the chart …

Written as Highcharts.chart

Highcharts is loaded by the calculator and editor pages, so a query can call Highcharts.chart(...) without loading anything: put a container in the layer's descriptionHtml and create the chart once the panel exists - in onInputsReady, in beforeCalc or in a widget handler - then update it as results arrive instead of recreating it. ExtjsUtils.HIGHCHART.getById(id) gives the chart back from the container's id, which is what makes the update possible from another callback.

The bundled build covers the standard chart types plus highcharts-more. Extra modules are loaded on demand with AsyncLoader.loadScriptOnce (see the Sankey entry).

renderTo String: Id of the container element declared in descriptionHtml.
options Object: The Highcharts configuration object.

Returns The chart instance.

descriptionHtml: '<div id="emissions_chart" style="height:220px"></div>',
functions: {
    drawChart: function (values) {
        var chart = ExtjsUtils.HIGHCHART.getById('emissions_chart');
        if (chart) { chart.series[0].setData(values); return; }
        Highcharts.chart('emissions_chart', {
            chart: { type: 'column' },
            title: { text: 'Emissions by year' },
            xAxis: { categories: ['2020', '2021', '2022'] },
            series: [{ name: 'Mt', data: values }]
        });
    }
}