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:

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)