The plot: for one scrolled pixel, you travel for one kilometer. Thus the name "28771 kilometers" as this is the total length of the trip.
Additionally I needed a way to zoom in to specific areas/countries as I speak, so a quick, reliable and most of all invisible (for the audience) UI was needed. Inspired by one of Marcin Wicharys talks, I implemented an "invisible UI":
Start typing the first letters of a country along the route to zoom in and fit the country into the viewport (also jumps the head of the route to the border). For example: "IRA" for Iran, "MAL" for Malaysia.
This is in no way a finished product but it served me well during my presentations and was fun to build.
title: "28771 Kilometers" year: "2017" date: "2017" tasks: "Concept, Design, Development" type: "web app" tools: "Leaflet, Mapbox, Webpack" link: "https://28771km.grooovinger.com/" short: "Travel along as you scroll. 1 pixel = 1 kilometer." featured: true cover: "https://user-images.githubusercontent.com/465547/202228535-b623696f-f124-4dd9-820a-4687aa321dd8.jpg"
For my slide show Transasia – Mit dem Motorrad von Meidling nach Malaysia I needed an interactive way to visualize the route I traveled through asia. I built this little web app, where I can control the drawing of my route simply by scrolling.
The plot: for one scrolled pixel, you travel for one kilometer. Thus the name "28771 kilometers" as this is the total length of the trip.
Additionally I needed a way to zoom in to specific areas/countries as I speak, so a quick, reliable and most of all invisible (for the audience) UI was needed. Inspired by one of Marcin Wicharys talks, I implemented an "invisible UI":
Start typing the first letters of a country along the route to zoom in and fit the country into the viewport (also jumps the head of the route to the border). For example: "IRA" for Iran, "MAL" for Malaysia.
This is in no way a finished product but it served me well during my presentations and was fun to build.
Visit "28771 kilometers"