# Configuration

## Add your configuration

The main component `EventExplorerUi` gets a configuration object as a parameter:

```vue
<template>
  <EventExplorerUi :config="config">
    <!-- put your portals here -->
  </EventExplorerUi>
</template>
```

For an example on how to read the configuration from a JSON file, see [Installation and Setup](Setup.html#read-configuration-from-a-json-file).

## Configuration file

### Example

```json
{
  "ogcApiFeatures": {
    "url": "http://ogc/api/features/url",
    "collection": "lakes",
    "filters": {
      // Standard filter properties
      "limit": 300,
      
      // WGS 84 (from 160.6°E to 170°W and from 55.95°S to 25.89°S)
      "bbox": [160.6, -55.96, -170, -25.89],
      
      // e.g. October 01, 2022, 23:20:52 UTC
      "datetime": "2022-10-01T23:20:52Z",

      // Optionally, datetime can specify a date range
      // e.g. October 01, 2022, 00:00:00 UTC to October 31, 2022, 23:59:50
      "datetime": "2022-10-01T00:00:00Z/2022-10-31T23:59:59Z",

      // Additional custom parameters for filtering
      "severity": "high",
      "status": "confirmed"
    }
  },
  "geoJsonFeatures": {
    "url": "/path/to/features.geojson"
  },
  "websocketFeatures": {
    "url": "ws://websocket/for/event/updates",
  },
  "events": {
    // Enable event clustering
    "clustering": false,

    // If set to true, events can be switched on and off in the Layer Selector
    "showInLayerControl": true,
  },
  "ui": {
    "theme": "dark"
  },
  "map": {
    "center": [ 0, 0 ],
    "zoom": 2,
    "minZoom": 2,
    "maxZoom": 20,

    // Zoom level that is used when selecting a feature in the list
    "featureZoom": 10,

    // Enable zooming on features
    "featureZoomEnabled": true
  },
  "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
    }
  ],
  "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": [
      {
        "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"
      }
    ]
  }
}
```

### OGC API Features

You can add your events by providing an OGC API Features endpoint in `ogcApiFeatures`.

Put your name of your OGC API Features collection which should be added as
events in the `collection` parameter.

Add initial filter parameters to the filters object.

For more information about OGC API Features visit [OGC API - Features - Part 1: Core](http://docs.opengeospatial.org/is/17-069r3/17-069r3.html#_items_).

This example:

```json
{
  "ogcApiFeatures": {
    "url": "http://localhost:8080/ogc/api/features/url",
    "collection": "my-collection",
    "filters": {
      "limit": 100,
      "bbox": [0.0, 1.0, 2.0, 3.0],
      "datetime": "2022-01-01T00:00:00Z/2022-01-02T00:00:00Z"
      "status": "open",
      "severity": "high"
    }
  }
}
```

will be resolved to 

```
http://localhost:8080/ogc/api/features/url/my-collection/items
	?f=json
	&limit=100
	&bbox=[0.0,1.0,2.0,3.0]
	&datetime=2021-05-20T00:00:00Z%2F2021-06-05T00:00:00Z
	&status=open
	&severity=high
```

to get the events as GeoJSON.

Please be sure that your events contain an ID like in this GeoJSON example:

```json
{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 0,
            "properties": {
                "name": "Feature Name"
            },
            "geometry": {}
        }
    ]
}
```

### Static features from a GeoJSON FeatureCollection

Instead of pulling your features from an API endpoint, you can also load a 
static feature collection from a GeoJSON file.

NOTE: You can either use an OGC API Features endpoint or a static GeoJSON file, 
not both. If you define both in your configuration, the OGC API Features endpoint
will get priority.

```json
{
  "geoJsonFeatures": {
    "url": "/path/to/features.geojson"
  }
}
```

### Websocket Features

If you provide a URL to a WebSocket endpoint the list of events is able to get
updated or new events. GeoJSON features are expected to be send from the
WebSocket. To update data for an event the ID of the send feature need to
match with an existing event ID fetched earlier from `ogcApiFeatures`.
If it does not match an existing event it is considered a new event and will be
added to the list of events instead.

Example for a WebSocket payload (multiple features can be send too):

```json
{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 510,
            "properties": {
                "title": "New Event",
                "some_value": "value"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [0, 0]
            }
        }
    ]
}
```

### Event Clustering

To enable a clustered visualization of the events, set the `clustered` parameter to `true`.

```json
{
  "events": {
    "clustered": true
  }
}
```