This is a 3-part series of prototyping experiences with live location. When mapping live location data — interactions, real data and movement are essential to keep the experience as real as possible. We would be using Mapbox to get this data and Framer as the tool to prototype with.
Here is a breakdown of the series :
- Part 1 — Adding map, markers and popups
- Part 2 — Using Mapbox API to get real routes, place names and animating movement on the map
- Part 3 — Best practices in maintaining a large prototype, storyboarding and advanced interactions
So let’s get started with this. Here is a preview of what we are building —
Set up the environment
First include Mapbox JS in your project.
We will define two functions to add CSS and JS in our framer prototypes. You may include them in your HTML file directly but I prefer to keep these things modular and in one place.
Now that we have these two functions defined, let’s start by initialising
We are all set to start using Mapbox now.
Note — Mapbox references are saved in
Add a map
You would need to define two more variables
origin. Our function
addMap would add the map with the basic defaults.
You can include more parameters from the Mapbox API specs
Add a marker
Next step would be to add a marker on your map.
Start by creating the design in the design tab in Framer. Let’s call it
Note : We save the initial reference to the design component in
marker.element as we might need it for animation or other framer specific functions later.
Add a blinking animation
Let’s try adding a small blinking animation behind this popup now. Create an empty frame of 0x0 size in design tab of Framer. Let’s call it
We would give it a slight animation that feels like a pulse.
Note — You might face an issue with the pulse showing over the initial marker. You can use the index property to place it below the marker.
initialMarker = addMarker( origin, movement_marker )
pulseMarker = addPulse( origin, heartbeat )initialMarker.element.index = 1
pulseMarker.element.index = 0
Add a popup on the marker
We might want to add a popup on the marker for a better experience.
Let’s create a design in the design tab of Framer and call it
place_infoboxNext we add the function to add this popup.
Note — My design of popup has two sub-layers
duration so that I can change these values programatically.
- Do function is required to make sure animation runs in sync
- Let’s set the initial height and opacity to 0 to make sure the animation runs smooth
Now let’s open that popup on clicking the marker
initialMarker.element.on Events.Click, ->
infobox = addInfobox( origin, place_infobox )
infobox.element.index = 2
Show animation on map load
Here is a little bonus to add a little animation on the map load. In the initial function
addMap change the zoom level to 10 and then call this function on map load. It would add a small animation while loading the map.
That’s it for this part. In the next part we move onto draw paths, get routes, add real time information on the popups and show movement on the map.
We at HyperTrack are doing really amazing things with live location and movement. Have any doubts, doing interesting things with live location or just want to have a coffee ☕️ — say 👋 to our team in Bangalore and San Francisco.