Installation and Setup

Project Template

For a ready-made setup of the Event Explorer UI see the Event Explorer Template repository.

The template project consists of three parts:

Backend: Python server based on PyGeoAPI that implements the OGC API suite of standards.
Frontend: User Interface based on Event Explorer UI
Docker: A Docker recipe for development purposes to start all services locally

In order to use the template clone or download the repository.

Build your own app

Install npm package

To add the component library to your Nuxt project you can install it via npm or yarn:

# execute once:
npm config set '@id2:registry' 'https://git.gfz-potsdam.de/api/v4/projects/2387/packages/npm/'

# then install the library with:

# npm:
npm install --save @id2/event-explorer-ui
# yarn:
yarn add @id2/event-explorer-ui

You will also need to install the peer dependencies listed in the package.json.

It is needed that the Event Explorer UI is installed as a plugin in your Nuxt project.

Add the file plugins/exInit.js with the following content:

import { defineStore } from 'pinia'

import ExFramework from '@id2/event-explorer-ui/utils/ExInit.ts'

import {
  exStoreInitialState,
  exStoreGetters,
  exStoreActions,
} from '@id2/event-explorer-ui/store'

export default ({ app }, inject) => {
  ExFramework.init()

  const store = defineStore({
    id: 'exStore',
    state: () => (exStoreInitialState),
    getters: exStoreGetters,
    actions: exStoreActions,
  })

  inject('exStore', store)
  inject('exState', store())
}

Register the plugin in nuxt.config.js:

export default {
  // ...
  plugins: [
    { src: '~/plugins/exInit.js', mode: 'client' },
    // ...
  ]
}

Set up the component

The EventExplorerUi component should be used in a single-page application way by defining it as the only component in a file within the pages directory of Nuxt.

The layout for this page should only include <nuxt /> so that it does not interfer with other layout components.

Example for layouts/default.vue:

<template>
  <nuxt />
</template>

Example for pages/index.html:

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

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import EventExplorerUi from '@id2/event-explorer-ui/components/EventExplorerUi.vue'

@Component({
  components: {
    EventExplorerUi,
  },
})
export default class IndexPage extends Vue {
  config = require('../conf/ex-config.json')
}
</script>

Read configuration from a JSON file

With the following line you can read your configuration from a file. Make sure to have valid JSON file in the conf folder.

config = require('../conf/ex-config.json')