Prototyping experiences with live location data— Part 1/3

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

Note — Although the code is in CoffeeScript, it may be applied to regular JavaScript. You can see a live example of it on HyperTrack home page

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 mapboxgl

We are all set to start using Mapbox now.

Note — Mapbox references are saved in mapboxgl

Add a map

You would need to define two more variables map_style_dark and 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 movement_marker.

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 hearbeat.
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_infobox
Next we add the function to add this popup.

Note — My design of popup has two sub-layers place and 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.

Get in touch

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