# Configure and customize the map

The [configuration](Configuration.html) is the place where you configure your [OGC API features](Setup.html#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.

```json
"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:

```json
"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:

```json
"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:

| UI Component | Portal Target |
|----|----|----|
| Main Map | ex-map |
| Layer Selector | ex-map-layer-control |
| Map Layers | ex-map-layers |
| Map Event Layer | ex-map-event-layer |
| Map Legend | ex-map-legend |

Please refer to the [Custom Layout](CustomLayout.html) section for more information about how to replace the existing components with your own custom components.