Monday, October 16, 2017

Animated Markers in Mapbox

Arden de Raaij, a developer from Lisbon, has released a nicely designed Mapbox map for geotagged photos. The map shows where photographs were taken and allows you to view them directly from the map. It also has some very impressive animations and transitions which are fired when the user interacts with a map marker.

There are two main animation effects used for each map marker, which are triggered by mousing over a marker and clicking on a marker.  When you mouse over a marker the marker grows bigger on the map (it shrinks back to normal size when you move the mouse off the marker). When you click on the marker the photo thumbnail, embedded in the marker, expands to fill the whole map.

Mapbox Map with Animated Marker Icons would make a great template for anyone who wants to create a map based photo gallery. The expanding and shrinking markers is an impressive effect that could be used with any interactive map which uses map markers. Mapbox Map with Animated Marker Icons is available on CodePen. So, if you like the marker animations, it is possible to easily view the code and/or fork Arden's CodePen.

No comments: