Image for post
Image for post

Prototyping experiences with live location data — Part 2/3

Ankur
Ankur
Jan 4, 2019 · 4 min read

This is part 2 of a 3 part series on prototyping experiences with live location data using Framer and Mapbox. In part 1, we added live location to a map with markers and popups. In part 2, we build up on the code to get routes and places, then animate movement on the map.

In part 1, we set up Framer to use Mapbox and added simple markers on the map. In part 2, let’s move on to more advanced experiences using Mapbox APIs.

Get place name

We will use the Mapbox reverse geocoding API to get place names.

Note — We are using the url in bypass_cors as a service in order to bypass cross origin request issues (CORS).

Note — Mapbox returns an array of possible matches to a given lat long. By default, we are taking the first entry of the array and showing its name. In case you want to search for specific category of places or show the address in a different way — you can easily change query params and the way you construct the address string. Find more in their API Documentation.

Show place name in the popup on click

Now that we have the function to fetch the place name, let us modify our addInfobox function we created in part 1 to show the right place name on click.

Get route between places

Let us move on to drawing routes between two places. Mapbox provides Directions API that can give you the route between two places. We will also use Turf — a library of really helpful functions for map.

Get directions

Let’s define two points origin and destination between which we want to draw the routes. We would call the getRoute function to fetch the directions.

Draw route

Once we have the path on the map, we would need to draw a line on map. We have defined the line properties in drive_line_paint and let’s also define a drive_step which we would come to later.

Note — If you wish to change the styling of the line, refer to this documentation — https://www.mapbox.com/mapbox-gl-js/style-spec/#layers-line

The trick to doing that is to keep on adding points to the line geojson object over certain time intervals which would give the effect of a line being drawn.

Drive step

For this to happen, we first need to break down the path into multiple points separated at a distance. That’s where the drive_step comes into picture.

Then we define a geojson object for our line and finally we loop over all the points over a set interval to keep adding them.

Note — You might have to play with the drive_step variable and the interval to get the perfect animation based on your zoom view and preferences.

At the end of this example, you should have an animated line between two points.

Auto adjust zoom to include the route

At this point, we might want to define another helpful function to automatically adjust the map to zoom to a level that includes the 2 points

Show movement on the map

Now that we have a source, destination and the route between two points, the next step is to move the marker over that route.

It is actually quite similar to how we had drawn the line. Here, instead of adding points to a geojson object, we would just be changing the location of the marker and the pulse marker.

If you have read this far, you would have got a pretty good idea of how to use different Mapbox APIs and use real data in these prototypes. If you still have any doubts, feel free to write to me at ankur@hypertrack.com.

In the next part, I share learnings from maintaining these prototypes as they grow in functionality, some best practices for structuring them and some more advanced functions you might need.

We at HyperTrack are doing some really amazing things with location. Have any doubts, doing interesting things with location or just want to have a coffee ☕️ — say 👋 to our team in Bangalore and San Francisco.

Get in touch

Credits — John Sherwin for the initial seed, Ivan Flores for this amazing Framer moduleand Bryant Jow for the inspiration.

HyperTrack

Build applications that track the movement of your business

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store