Our client had a formidable challenge, and we were tasked with finding a solution. We needed a way to display regional statistics of their operating area in an elegant and user-friendly way. Working with the design team, we noted several requirements, including a map overlaid with clearly defined regions that would display statistical data when selected. Taking inventory of our technologies on hand, we thought this could be achieved by using our Sitecore backend for storing data, and Mapbox frontend for intuitively displaying the data.
Exploring with Mapbox Studio
We took a deep dive into Mapbox to see what it was capable of and we were amazed by what we found. Mapbox offers Mapbox Studio, a feature-rich design portal for creating custom maps. Mapbox Studio is broken into several sections; most relevant to us was the style designer and dataset designer.
Mapbox Studio’s dataset designer is where we spent a lot of our time since it housed most of the map data we needed for the experience. Inside the designer are three different types of features that can be added to a geographic map: points, lines, and polygons. Each feature can also contain text-based properties such as an id, name, or color. When all the points and data are entered, the dataset can be added to Mapbox Studio style and the custom properties can be accessed via JSON when the map is added to a web page. For our solution, we used public ZIP code data to manually plot out groups categorized into 12 geographical regions.
Inside the style designer there is very granular control on every aspect of the map: changing colors of terrain/water, showing/hiding things like traffic routes/points of interest, even controlling the look of the map depending on the zoom level. Once we finished our work in the dataset designer, we brought that into the style designer to add the next layer of detail to the experience. We worked on colorizing each region and handling zoom transitions. For the zoom transitions, we set the opacity for each colored region to change, so that the more the user zooms in the more translucent the overlay became. We also added a hover state layer so that when a region is hovered on the web page, it’s color/style changes.
Architecting the Data Storage in Sitecore
With the map piece figured out, we needed a way to store the statistics for each region so that a content author could modify them as needed. This is where Sitecore came in. We set up new templates inside Sitecore to represent regions and statistical data for each region. This would give the content author enough flexibility to modify regional data on the fly or add new types of statistics to each. Once the data content was set up we could import it into Mapbox as a JSON object and connect the region IDs from Mapbox and Sitecore to display the proper data per region.
Bringing the Pieces Together
We connected the Mapbox map and Sitecore data on a web page and worked on the final functionality portions. Using the region IDs from both systems, we wired up the hover and click events so the region would change color when hovered and display the correct statistical data when clicked. Next, we added a smooth pan/zoom to each click event so that the clicked region would slowly center and zoom in on the screen until it took up the whole map viewport.
In the end we created a streamlined cohesive experience that fit the client’s need and engaged the user.
For the Future
While exploring the tool set of Mapbox Studio, we came across a neat feature that we thought could be used in a future project. We found that by creating custom shapes, we could then extrude those over the map to create a 3-D effect simulating buildings or structures. It was a bit above the needs for this project but could be useful in a future endeavor.