🗺️ spacethyme 🌍

🗺️ spacethyme 🌍 is a ready to deploy web application that allows you to visualize and interact with your data on a map.

It is the submission by @zeyus and @sashapustota for the Cultural Data Science - Spatial Analytics course at Aarhus University.

Features

Current

• 🌍 Map - Visualize your data on a map, integrated by default with OpenStreetMap using Leaflet.
• 🗃️ Data - Upload your data in CSV format and visualize it on the map.
• 🗺️ Vizualisation - Data can be presented as markers on the map.
• 📅 Filtering - Data can be filtered by date.

Planned

• 🗺️ Vizualisation - Data can be presented as heatmaps on the map.
• 🗺️ Vizualisation - Customize radius, color, icon, etc. based on data.
• 🗺️ Vizualisation - More informative map marker popouts.
• 📶 Data sources Import JSON, GeoJSON, TSV, and more.
• 📅 Filtering - Data can be filtered by category.

Demo Version

A demo version of the application is available at http://st.zys.im:40080/, this is mainly for previewing the application and the demonstration data. This server is reset at regular intervals and no uploaded data will be retained.

Installation

Docker

The very easy way to get this running is via Docker (including Docker Desktop for Windows and OS-X). If you have Docker installed, you can use the latest built Docker image on the Github Container Registry.

Once you have Docker installed, you can use one of the following methods to run the application.

Method 1: Docker Compose (Recommended)

If you have Docker Compose installed, you can use the following command to start the application:

docker compose up -d

Then 🗺️ spacethyme 🌍 is available at http://localhost:8080.

Note: The configuration for docker compose is in the docker-compose.yml file. You can modify this file if you would like to change the port the application is running on. By default it is 8080. For example, you can change the line ports: - "8080:8080" to ports: - "80:8080" if you would like to run the application on port 80 (standard web http port).

Method 2: Docker Run

docker run -p 8080:8080 ghcr.io/zeyus/cds-spatial-exam:main

Then 🗺️ spacethyme 🌍 is available at http://localhost:8080.

Manual

If you want to run the application manually, you will need to have Node.js installed. Once you have Node.js installed, you can run the following commands to start the application:

Clone the repository:

git clone https://github.com/zeyus/cds-spatial-exam.git
cd cds-spatial-exam

Install dependencies:

cd spacethyme
npm install

Build the application:

npm run build

Copy the environment settings:

cp .env ./build/.env

Note: You can modify the .env file if you would like to change the port the application is running on. By default it is 8080. For example, you can change the line PORT=8080 to PORT=80 if you would like to run the application on port 80 (standard web http port).

Start the application:

cd build
node -r dotenv/config index.js

Then 🗺️ spacethyme 🌍 is available at http://localhost:8080 (or another port if you changed the PORT setting).

Data

Example Data

🗺️ spacethyme 🌍 comes with some example data to get you started.

Earthquakes

Significant Earthquakes, 1965-2016, US Geological Survey License: Public Domain CC0 1.0 Universal. Obtained from Kaggle: https://www.kaggle.com/datasets/usgs/earthquake-database.

Custom Data

The application accepts data in CSV, TSV or JSON format. If CSV or TSV data is uploaded, the first row is assumed to be the header row. The application will attempt to automatically detect the column types, but you can also manually specify the column types if you would like.

Required data columns:

• latitude - The latitude of the data point, in decimal degrees.
• longitude - The longitude of the data point, in decimal degrees.

Optional data columns:

• label - The label of the data point, which will be displayed on the map.
• description - The description of the data point, which will be displayed on the map.
• category - The category of the data point, which can be used for filtering or display.
• radius - The radius of the data point, in kilometers. If this column is not present, the data point will be displayed as a marker on the map.
• intensity - The intensity of the data point, which will be displayed as a color on the map. Intensity should be contain values between 0 and 1. If the values are outside of this range, they will be normalized to fit within this range.
• date - If a date column is used, it can be used to filter the data points by date. The date column should be in the format YYYY-MM-DD (not strictly required, but it must be able to be parsed by Date.parse()).

Note: The column names do not have to match the ones specified above, but the data must conform to the specified format.

Development

UI

This project uses SvelteKit as the framework for the web application. The application is written in TypeScript. The UI is written in Svelte, and uses the Flowbite Svelte component library.

Map

The map is rendered using Leaflet. The map is integrated with OpenStreetMap, and uses the OpenStreetMap Standard Tile Layer by default.