Get Started

This documentation outlines the structure and usage of the SILAS Web demo app codebase.

Usage

1. Installation

npm install --legacy-peer-deps

yarn

2. Mapbox Token

Add your Mapbox access token to the environment variable:

export MapboxAccessToken=<your_mapbox_token>

3. Start the App and Backend Server

npm run start
npm run server

4. Data Loading

The SILAS Web demo app supports loading data from various sources to enhance the map visualization. The app integrates with Kepler.gl to provide a seamless data loading experience. Key features include:

Remote Data Loading: The app can fetch data from remote URLs using the loadRemoteMap action. This allows users to visualize data from external sources dynamically.
Sample Data Configurations: Users can load pre-defined datasets from the app's configuration using the loadSampleConfigurations action. This provides a quick way to explore the app's capabilities.
Cloud Integration: The app supports loading data from cloud providers like Dropbox through the loadCloudMap action. This feature enables users to access and visualize data stored in the cloud.
MQTT Data Streaming: The app subscribes to MQTT topics to receive real-time data updates. This allows for dynamic visualization of changing data, such as drone positions and trajectories.
Kepler.gl Configuration: The app loads Kepler.gl configurations from a JSON file, allowing for customized map settings and data visualizations.

These data loading capabilities are powered by a combination of Redux actions and Kepler.gl components, ensuring a flexible and extensible data visualization platform.

5. Interaction

The app provides various user interaction features:

Map Panning and Zooming: Users can pan and zoom the map using the mouse or touch gestures.
Data Exploration: Users can interact with data points on the map to view details and filter data.
Visualization Customization: Users can customize the appearance of the map and data visualizations.

Introduction Source Code