Scrollymap ✒️🌍
A svelte.js and openlayers based scrolly map application.
Purpose 💡
Create a scrollytelling map application with a simple configuration.
Features 🍜
- Basemaps
- Topic layers
- Highlight ares (rectangle)
- Show markdown Content (video, graphics)
- charts (echarts)
- clustering of data point layer
Configuration ⚙️
- Simple
yamlconfiguration - See full example:
public/storyBoard.yml - Predefined baselayers:
| config id | info | extent | link |
|---|---|---|---|
| osm | OSM | world | GetMap |
| topplus-bkg | TopPlusOpen BKG | world | GetMap |
| sen2europe | Mosaic based on Sentinel-2-Data by BKG | europe | GetMap |
| sentinel-rgb | Sentinel Mosaik by mundialis (channels 040302) | selected areas wordwide | GetCapabilities |
| sentinel-comp | Sentinel Mosaik by mundialis (channels 8A1104) | selected areas wordwide | GetCapabilities |
Note: Please consider to cache the layers to archive best performance.
- chart: See
storyBoard.ymlfor an example - dataLayer:
- Cluster point features from a geojson file
- Prototype, feel free to contribute!
- See
storyBoard.ymlfor an example
Development 👨💻
bun.sh is used as bundler (Node.js compatible).
Install the dependencies...
bun i
bun run dev
Open example application http://localhost:5173/?config=public/storyBoard.yml.
Building and running in production mode 🏗️
To create an optimised version of the app:
bun run build
Put all files in dist on your webserver, or test it locally, e.g. python3 -m http.server.
Credits
- Russel Goldenberg (https://pudding.cool)
