In this step you learn

• The groups of helpers in ExtjsUtils, and what each is for.
• How to reach the map itself (OpenLayers) and move it.
• Where to look up any helper.

The functions in your query reach the platform through ExtjsUtils, a toolbox of helpers grouped by subject. This example uses three of them: messages and questions, a layer’s legend, and the map itself.

Click the picture to run it live - nothing is saved.

Edit it in the playground

The query 43 lines · runs as is

// The ExtjsUtils toolbox: the platform's helpers your code calls - here to talk to the reader, read a layer's legend and move the map.
// ExtjsUtils.ALERTIFY shows messages and questions, ExtjsUtils.LAYER reads layers and legends,
// ExtjsUtils.JS.getMap() is the map itself (OpenLayers), ExtjsUtils.QUERY applies, adds and
// removes layers. The API reference lists every helper of each group.
ExtjsUtils.QUERY.setQueryGlobalProperties({
  REGIONS: {
    North: [-74, -10, -46, 5],
    Northeast: [-48, -18, -34, -1],
    South: [-58, -34, -47, -22],
  },
}) && [
  {
    title: "Elevation",
    name: "CSR:altimetria",
    source: "calculate",
    visibility: true,
    opacity: 0.8,
    paramsButtonConfig: [{ type: "query", pressed: true }],
    descriptionHtml:
      "{{button|id=read_legend|text=Read the legend|handler=readLegend}}" +
      "{{button|id=choose_region|text=Go to a region|handler=chooseRegion}}",
    functions: {
      readLegend: function () {
        var entries = ExtjsUtils.LAYER.getLayerLegend(this, 0) // the legend of this layer's first map
          .filter(function (entry) { return String(entry.title).trim().toLowerCase() !== "null"; }); // without the no-data class
        ExtjsUtils.ALERTIFY.log("<b>" + entries.length + " classes</b>, from " +
          entries[0].title + " to " + entries[entries.length - 1].title + ".");
      },
      chooseRegion: function () {
        ExtjsUtils.ALERTIFY.confirmChoice(
          "Which region should the map show?",
          Object.keys(REGIONS).map(function (name) { return { label: name, value: name }; }),
          function (name) {
            var map = ExtjsUtils.JS.getMap();
            var box = REGIONS[name];
            map.zoomToExtent(new OpenLayers.Bounds(box[0], box[1], box[2], box[3])
              .transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()));
          }
        );
      },
    },
  },
];

The helpers you will use most

Group	For	Examples
ExtjsUtils.QUERY	The query and its layers	setQueryGlobalProperties, addLayer, removeLayer, addRemoteWMSServer, decorate, setMappiaIoCallback, postMessage
ExtjsUtils.ALERTIFY	Talking to the reader	log (a passing message), alert, confirmChoice (a question with options)
ExtjsUtils.LAYER	Layers and legends	getLayerByName, getLayerLegend
ExtjsUtils.JS	The page’s main objects	getMap() - the map, an OpenLayers map
ExtjsUtils.ZOOM	Zooming	zoomToExtent
ExtjsUtils.REQUEST	The page address and the network	getParameterByName (a parameter of the page URL), advToolsOptions (a page option)
ExtjsUtils.GEOJSON	Vector data	geojson2Features, shapefile2GeojsonAsync
ExtjsUtils.CSS	Page styles	defineClass
ExtjsUtils.CONFIGURATION	Query-wide settings	setOptions

The map itself

ExtjsUtils.JS.getMap() returns the map, an OpenLayers 2 map: setCenter, zoomToExtent, getZoom, its layers. Its coordinates are in the map’s projection (metres), so a longitude and latitude are converted first, as the example does:

var map = ExtjsUtils.JS.getMap();
var box = new OpenLayers.Bounds(-48, -18, -34, -1)            // west, south, east, north, in degrees
  .transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.zoomToExtent(box);

Every helper, with its parameters and an example, is in the API reference. ExtjsUtils.QUERY and ExtjsUtils.CONFIGURATION are under Query setup, because they are mostly called before the list; the others are under ExtjsUtils helpers, by name - ALERTIFY, LAYER, JS… A layer’s own settings are not helpers: they are its properties (step 2).

Try this

1. Add a region to REGIONS, for example Southeast: [-53, -25, -39, -14].
2. Show the legend in a dialog: ExtjsUtils.ALERTIFY.alert(...) instead of log.
3. Log the map’s zoom after choosing a region: ExtjsUtils.JS.getMap().getZoom().

Read more

• API reference - every helper, with its parameters and an example
• Where to find it - which part of the API to open
• Notifications and choices