The #30DayMapChallenge Begins

Recently, I was very impressed by 10 Years, 10 Adventures, a collection of ten WebGL-powered animated travel maps featuring 3D terrain, animated elements and trip narration. So, for today's #30DayMapChallenge, I decided to try creating something similar: a 3D map of Cap d'Antibes, which I recently visited in the South of France.

My interactive 3D Map of Cap d’Antibes lets you fly around the peninsula, discover some of its best-known landmarks and view the route of an incredible coastal walk. The map includes clickable points of interest, with three photographs I took on my vacation. You can also follow an animated walking route along the coastal Sentier de Tirepoil, watching the route gradually draw itself across the 3D terrain.

The map was created using Three.js, with elevation data from Mapterhorn, a service providing terrain elevation data for creating 3D maps of the Earth's surface. The elevation data was downloaded as a GeoTIFF, a georeferenced image format which stores geographic information alongside the elevation values for each pixel. This data was then converted into a 3D terrain model.

The walking route was plotted separately using geojson.io, an online tool for creating and editing GeoJSON geographic data. The resulting LineString was added to the 3D terrain and animated, with its height adjusted to follow the contours of the landscape.

My map is not a patch on the maps in 10 Years, 10 Adventures, but I'm happy with the results so far. With a little vibe-coding help from ChatGPT, the map only took 3-4 hours to develop. I probably won't take the project much further, as I suspect the map isn't of much interest to anybody else. However, there are plenty of ways I could improve it, including adding more photographs and points of interest, incorporating additional walking routes, and perhaps even adding narration to turn it into a more complete virtual tour of the peninsula.