Frontend for get.openspacedata.org

This svelte app provides the frontend UI for OpenSpaceData. It provides the request form to accessing the data and requesting the individual guides to get the information out of the data. This svelte app connects with the OpenSpaceData API.

More information about the idea of OpenSpaceData you can read here: Interview: OpenSpaceData Wants to Democratise Access to Satellite Data

Prototype

There is a clickable wireframe that shows the functionality and output of the frontend. Try it out: https://www.figma.com/proto/KovwIzegMALA6qJjGabT7D/%5BOSD%5D-Wireframe-Frontend?node-id=111%3A10&scaling=min-zoom

Run Locally

Clone the project:

  git clone https://github.com/OpenSpaceData/get.openspacedata.org.git

Install the dependencies...

cd get.openspacedata.org
npm install

...then start the app:

npm run dev

Navigate to localhost:3000. You should see the app running. Edit a component file in src, save it, and reload the page to see your changes.

The app

The app has two main routes - form & guide. You will find both in the src/routes folder of the project. The form view is the index.svelte (the first route that is loaded when the app is launched).

Guides are dynamically routed based on the selected case. Template and data files can be found in the src/routes/guide folder. Guides require the following data to be passed as query parameters with each page request:

• location: The selected user location represented as a bounding box (bbox) array.
• from: The starting date set by the user. If the user is requesting that latest data, then this will be set automatically to 2 months before the current day.
• to: The starting date set by the user. If the user is requesting that latest data, then this will be set automatically to the current day.

Other data

Currently, data for the categories, cases and guide content are compiled in individual JSON files at build time. The category.json and cases.json are used on the index page and passed through to their respective components. The guides.json file is used as a reference for generating data for individual guide routes in src/routes/guide/[slug].json.js.

Data structure

All information relating to research categories & cases is kept in the src/guides folder.

guides
 ┣ vegetation
 ┃ ┣ cateogry.md // The category.md file stores a category id & text string in frontmatter (see example below)
 ┃ ┗ cases
 ┃   ┣ barren-soil // Content for each case is kept in a sub-folder (case/...) to avoid clutter
 ┃   ┃ ┣ case.md // The case.md file stores a case heading & difficulty strings in frontmatter (see example below)
 ┃   ┃ ┣ introduction.md // Introduction into the topic and the upcoming work
 ┃   ┃ ┣ interpret.md // Guide to interpret the data right and further resources to the topic
 ┃   ┃ ┗ process.md // Step-by-step guide to process and editing the data
 ┃   ┗ ...
 ┗ ...

Example category.md

---
id: 'vegetation'
text: 'Analyse vegetation and geology'
image: '/img/forest.jpg'
---

Example case.md

---
heading: 'Visualizing Barren Soil'
difficulty: 'moderate'
id: 'barren-soil' 
# The id should correspond with a "machine_name" field in the API. 
---

Other pages

The About and Help pages can be found inside the src/routes folder. Content can be added using markdown, or Svelte components. The pages are in .svx files, and are compiled using mdsvex.

Styles

Global CSS is found in the src/lib/css folder. Styles are organised by utility type, making it easier to find and update certain styles. When a new .css file is added here, it should be imported into src/app.css in order to be compiled.

Alternately, global CSS styles can be added directly to src/app.css file.

ENV Variables

This project uses Mapbox for geocoding & static map images. A Mapbox API key should be added in a .env file using the VITE_MAPBOX_API variable name. This environment variable is exposed through the src/lib/data/mapbox.js file. In order to use the API key in a Svelte component, you must first import it using import {MAPBOX_API} from '$lib/data/mapbox'.

API data

The file api-respond.json is located in the static/sample folder. It is an example of an API respond by the OpenSpaceData API.

The planned guides for the Beta version:

Funding

This project is funded by the German Federal Ministry of Education and Research and is part of the 9th round of the Prototype Fund.