In this step you learn
  • The kinds of layer, chosen with source.
  • Which properties each kind needs.
  • That they all mix freely in one map.

So far every layer was a published map from a catalogue. A layer can also be computed, read from a file of features or drawn from a tile service. The property source says which:

sourceWhat the layer isWhat else it needs
(none)A published map of the catalogue, drawn by the map server (the same as "local")name
a server’s keyA published map of a registered server (step 3)name
"calculate"A new map, computed in the browser from the values of the maps in nameexpression (step 5)
"file"Features (points, lines, areas) from GeoJSON, a CSV or JSON list, or your own codejson written in the query, or type and a url
"xyz"Tiles from a tile service, addressed by zoom, column and rowurl with ${z}, ${x}, ${y}
"osm", "google", "arcgisrest"A ready-made basemapname (for example mapnik)

All of them in one map:

Click the picture to run it live - nothing is saved.
Edit it in the playground
The query 58 lines · runs as is
// Four kinds of source: a tile service (xyz), a published map (the default source), a calculated map (calculate) and features from a file (file), in one map.
// source says where a layer's pixels come from; the other properties of the layer depend on it.
[
  {
    title: "Terrain (xyz tiles)",
    name: "opentopomap",
    source: "xyz", // a tile service: ${z}, ${x} and ${y} are replaced for every tile
    url: "https://a.tile.opentopomap.org/${z}/${x}/${y}.png",
    visibility: true,
    opacity: 0.5,
  },
  {
    title: "States (published map)",
    name: "CSR:estados", // no source: a map of the catalogue, drawn by the map server
    visibility: true,
    opacity: 0.4,
  },
  {
    title: "Highlands (calculated)",
    name: "CSR:altimetria",
    source: "calculate", // the browser computes a new map from the values of the maps in name
    visibility: true,
    opacity: 0.8,
    beforeCalc: function () {
      this.setCalculateLegend([{ color: [160, 82, 45], value: 1, title: "Above 1000 m" }]);
    },
    expression: function (layersVals) {
      return layersVals[0] > 1000 ? 1 : this.nullValue;
    },
  },
  {
    title: "Two cities (file)",
    name: "two_cities",
    source: "file", // vector features: here written in the query (type json), in longitude / latitude
    type: "json",
    fromProj: "EPSG:4326",
    visibility: true,
    json: {
      type: "FeatureCollection",
      features: [
        { type: "Feature", properties: { name: "Belo Horizonte" }, geometry: { type: "Point", coordinates: [-43.94, -19.92] } },
        { type: "Feature", properties: { name: "Brasilia" }, geometry: { type: "Point", coordinates: [-47.88, -15.79] } },
      ],
    },
    defaultStyle: {
      graphicName: "circle",
      pointRadius: 9,
      fillColor: "#e74c3c",
      strokeColor: "#ffffff",
      strokeWidth: 2,
      label: "${name}", // an attribute of each feature, written on the map
      labelYOffset: -18,
      fontWeight: "bold",
      labelOutlineColor: "#ffffff",
      labelOutlineWidth: 3,
    },
  },
];

What to notice

  • The tile layer has no catalogue: its url is a pattern, and the map fills in ${z}, ${x} and ${y} for every tile it needs.
  • The calculated layer reads the elevation map pixel by pixel and keeps only what is higher than 1000 m - with a legend of its own. Step 5 is about these.
  • Calculated, file and tile layers have a panel: text, controls and row buttons under their row in the layer list (descriptionHtml, paramsButtonConfig). A published map has none.
  • The file layer holds its features right in the query (type: "json"), in longitude and latitude (fromProj: "EPSG:4326"). Its style can write an attribute on the map: "${name}". With type: "geojsonurl" or "csv" and a url, the features come from a file instead.
  • Basemaps are the layers below everything: a layer with group: "background" joins the background picker of the map instead of the layer list.

Try this

  1. Swap the tile service for OpenStreetMap: url: "https://tile.openstreetmap.org/${z}/${x}/${y}.png".
  2. Add a third city to the file layer, with its longitude and latitude.
  3. In the calculated layer, change 1000 to 500 in the expression and in the legend title.

Read more