Creating an Interactive Regional Map with Mapbox and Sitecore

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.

Screenshot of Mapbox Studio Dataset Designer.
Mapbox Studio Dataset Designer

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.

Screenshot of Mapbox Studio Style Designer.
Mapbox Studio Style Designer

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.

Animation depicting a region click on an interactive region map.

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.

Related Ideas, Info and Stuff You’ve Gotta Read

Creating Immersive Front-End Sitecore XP Experiences with GreenSock and ScrollMagic

Creating Immersive Front-End Sitecore XP Experiences with GreenSock and ScrollMagic

Learn how we crafted a smooth, interactive, immersive experience that takes the user through the patient’s journey from beginning to end.
Charting a Path to Sitecore with Highcharts

Charting a Path to Sitecore with Highcharts

Read how we showcased 1,000+ charts of medical data into a navigable, memorable user experience.
Migrating Sitecore Indexes from Lucene to Solr

Migrating Sitecore Indexes from Lucene to Solr

When we were upgrading our Sitecore 8 project to Sitecore 9, we needed to come up with a new solution for indexing the data. Our Sitecore 8 project was using Lucene for indexing which posed two problems: Lucene was not supported in our Sitecore 8 environment configuration, and Lucene was not supported in Sitecore 9.
Improving User Experience with React and Sitecore

Improving User Experience with React and Sitecore

As a health-care organization that provides quality care to many current and prospective patients, the ability to easily navigate thousands of physicians to find one that is “just right” is critical.
Paul Brienza
Paul Brienza
Chief Growth Officer
(414) 270-7175
paul.brienza@laughlin.com

Let’s Talk

    Be in the know, now!

    Receive a monthly dose of big thinks. Don’t worry, you can unsubscribe at anytime. Privacy Policy