How we used Mapbox neat features to present car dealers
We recently launched a new product page for Subaru where an interactive map was one of the features. We looked at the options to use Google Maps, OpenStreetMap, and Mapbox to build it and landed on the latter. Let’s look at why we choose the API and some of the neat features we used.
What is Mapbox? Mapbox is a mapping and location cloud platform. Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.
Why did we land on Mapbox?
Clear documentation. It was very easy to get started and navigate through the Mapbox documentation.
Customization in hand. As a digital design studio, we care about consistent brand identity. With Mapbox, it was easy to adjust typography, color palette, map structure. Since Mapbox has a very intuitive studio, it is possible for designers to go in there and create the right style for the map.
React-map-GL library makes it easy to implement Mapbox GL JS with React.
Personal: Seeing how Strava, the app we use to track physical activity, has utilized the Mapbox API gave a point about why we landed on this solution.
Let’s look at some of the Mapbox features we used.
Display the markers on the map with Geocoding
Page visitors should see the map with icons in a specific location. To do this, we used the Marker (react equivalent) component which is fully customizable in terms of styling and can be placed in a correct position on the map when latitude and longitude parameters are given.
Originally we had a list of dealers with their addresses but addresses are not enough to place the Markers on the map, we had to get longitude and latitude. To do this we used Geocoding API which outputs latitude and longitude from a given address. So the following address “Løkkenveien 175, 7332 Løkken Verk” is converted to latitude 63.117790, longitude 9.702530. Make sure that the address is full and has no spelling errors, as this may cause the markers to appear in a completely random place.
With Geocoding in hand, we were able to reproduce the markers in the right place, but since we had to call the API every time the page was loaded, it led to a significant drop in page performance. It would not be a problem if we had fewer data points, but we had over 70. We tried some solutions such as batch Geocoding which reflected in a slight improvement in performance but did not solve the issue completely.
To solve the performance issue, one can save the output data from the first Geocoding call in the database. The geocoding will still be called in case a new address is added, but that will not affect performance, since the latitude and longitude output will be stored after the first call.
Fly to location
After showing the markers on the map, we created a connection between the map and the list of dealers. In short, when clicking on a marker on the map, the user should be navigated to the correct dealer tab, and conversely, when clicking on a single dealer tab, the map should navigate to the dealer’s location.
To achieve this, we used the FlyTo (react equivalent) built-in method with latitude and longitude as the parameters. To make the connection between the dealer cards and the markers on the map, we found IDs for the items in both lists. So when a user clicks on a dealer tab, the map will zoom in to the marker with the associated ID.
To make the transition from one point to another more smooth we adjusted the flying and zoom speed and added transition easing. You can try it out on subaru.no/forhandlere.
Moving forward
In this project, we have just touched on the surface of the Mapbox API, but there are many fun things to try. Some of them create a visualization with heatmaps, 3D maps, mapping of live data. Share your ideas and experiments with us ☺️☺️
