Hi everyone 👋 I'm Andrea, a full-stack developer from Italy, living in Tenerife. Yes, that one, the island with the big Teide, a volcano, which is maybe why I ended up building this.
I have been building Vue apps in production for about four years: a blockchain explorer, a marketplace, editors, dashboards, data visualisation pages. What I had never built is a map. No GIS, no projections, no OpenLayers.
So I gave myself a small side project: a world map of natural events happening right now (storms, wildfires, volcanoes, icebergs), with a list next to it and a details card. Click a dot, see what it is.
It is called EarthPulse. It is not a big app. But a new library and a new kind of data are a good way to find out which of your habits still work and which do not. This post is about the mistakes I made on the way, in the order I made them. Some are OpenLayers things I did not know. Some are shortcuts I took because "it is just a prototype", and then paid for later on.
- Live app: https://andrearaccagni.github.io/earth-pulse/
- Code: https://github.com/AndreaRaccagni/earth-pulse
What it does
- It loads open events from NASA EONET (Earth Observatory Natural Event Tracker).
- It draws them on an OpenLayers map.
- It shows the same events in a list, with a date for each one.
- Click a dot or a row: the map flies there, the dot gets highlighted, and the card shows category, longitude and latitude.
- You can filter by category. The list and the map always show the same events.
Stack: Vue 3 with
