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 yaml configuration
• 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.yml for an example
• dataLayer:
  • Cluster point features from a geojson file
  • Prototype, feel free to contribute!
  • See storyBoard.yml for 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)