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.
Let’s define two points
destination between which we want to draw the routes. We would call the
getRoute function to fetch the directions.
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.
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 firstname.lastname@example.org.
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.