Configure and customize the map

The configuration is the place where you configure your OGC API features and [WebSocket]((Setup.html#Websocket-Features) endpoint, map layers and event clustering.

Basemap

Multiple basemaps can be defined as a list of objects in the basemapLayers attribute:

Basemaps can be requested using the WMS or WMTS protocol (OGC standards), or the XYZ scheme.

"basemapLayers": [
  {
    "id": "MyBasemap",
    "type": "WMTS",
    "baseUrl": "https://my/wmts/url",
    "layer": "MyLayer",
    "matrixSet": "generic_google_mercator",
    "style": "default",
    "format": "image/png",
    "title": "My Basemap",
    "attributions": "The Author",
    "defaultVisibility": true
  }
]

Overlay Layers

Multiple selectable overlay layers (raster, vector) can be added by to the basemap in the overlayLayers attribute.

All layers are required to be added to a group.

Raster layers

Raster layers can be requested using the WMS or WMTS protocol (OGC standards), or the XYZ scheme.

A layer definition can look like this:

"overlayLayers": {
  "raster": [
    {
      "id": "PopulationDensity",
      "type": "WMS",
      "baseUrl": "https://map-services.gfz-potsdam.de/geoserver/wms",
      "layer": "GFZ:population_density",
      "style": "",
      "title": "Population Density",
      "attributions": "Population Density: <a target=\"blank\" href=\"https://sedac.ciesin.columbia.edu/\">NASA SEDAC</a>",
      "defaultVisibility": false,
      "maxResolution": 30000,
      "opacity": 0.5,
      "zIndex": 20,
      "legendImage": "population_density.svg",
      "group": "My Group 1"
    }
  ]
}

Vector layers

At the time of writing, only static GeoJSON is supported for vector layers.

A layer definition can look like this:

"overlayLayers": {
  "vector": [
      {
        "id": "AOI-1",
        "type": "GeoJSON",
        "title": "AOI 1",
        "url": "/geodata/AOI-1.geojson",
        "attributions": "Example AOI: <a target=\"blank\" href=\"https://www.gfz-potsdam.de\">GFZ</a>",
        "defaultVisibility": false,
        "opacity": 1,
        "zIndex": 30,
        "fillColor": "white",
        "strokeColor": "red",
        "icon": "/images/default-marker.png",
        "group": "My Group 2"
      }
  ]
}

Custom Map

The Main Map can be customized to your needs by adapting the following components:

Please refer to the Custom Layout section for more information about how to replace the existing components with your own custom components.