Creating a Custom Map in Mapbox
Creating a custom map is one of the most daunting tasks in visual design, simply because when you are using a program like Mapbox or Mapme, your canvas is the size of the world itself. As a designer, you will be faced with a series of complex decisions, ranging from how best to represent a lake as opposed to an ocean, a village as opposed to a country, or a bridge as opposed to a tunnel. All the while, you will have to address the big picture question of how your map will work as a part of your product and brand.
Here are a few tips about how to build a custom map based on my experience designing a map in Mapbox for betterPT’s React website built on Node.js.
Define your map’s purpose
Before getting elbow deep in the hard work of choosing colors, icons, fonts and imagery, it is important to define the overall purpose of your map. Where will it live in the UX and UI of of your product? Is the map central to your app or website or is it of secondary importance? Tackling these big picture questions will help define the scope of your project and give you a good place to start before making more specific design decisions.
At betterPT, our goal is to connect patients and physical therapy providers in a seamless experience through our mobile app and website. When someone searches for a PT practice, there are a lot of criteria that determine a good match, not the least of which are physical therapists’ ratings, availabilities and insurance information. While a clinic’s location is also a key search criterion, it is not the sole driver of a user’s decision to book or not book with a specific PT.
For this reason, I decided that while our map must be a prominent feature of our UI, it shouldn’t jump out too much and distract the user from other information such as PT bios, reviews, or availabilities. In order to make our map less intrusive, I ended up using a lighter and softer color palette in my designs.
Choose a color palette
When deciding on a color palette, I was fortunate enough to have a base set of colors to work with, ones that I had chosen previously in the UI of our mobile app and website. Nevertheless, I quickly found that digital maps are both broad and nuanced, and require far more than a handful of bold brand colors in order to be brought to life. Being able to visually distinguish a local park from a national park, or a football field from a cemetery, may require that you use four different greens instead of the one or two recommended in your company style guide. And creating a sense of harmony and unity may require that you soften your colors.
When setting up my color palette, I found it very helpful to organize the most common geographical features of my map into groups and then assign each group a base color. For example, I decided that city blocks should be grayish tan, highways should be butterscotch yellow and parks should be sea green. Within each category, I created subcategories for more specific geographical features, and distinguished them by altering the saturation and tint of my base hues. In this way, I was able to generate a brighter gold to contrast major highways with local roads, or slightly darker green to differentiate local parks from national parks. Maintaining uniform hues offered consistency as my color palette grew.
When thinking about labels, think about zoom
The main labels in a digital map will vary depending on how much you zoom in. As betterPT patients principally use our map to discover clinics nearby, I placed special focus on how to display neighborhood labels and nearby points of reference. Generally, I found that using a darker, more highly saturated medium or regular weight sans serif font worked well and didn’t distract the eye when set against our more neutral grayish tan representation of busy city blocks and apartment clusters.
When zoomed out, I found that darker and heavier fonts were more legible when set against the broader contours of a country or state’s topography.
See how your map looks in different cities
When creating a digital map, you may find that instinctively, you pay close attention to how your home city looks in the designs while ignoring other locations. When deciding what colors, fonts and icons to use, poke around and make sure your map looks just as good in Memphis as it does in San Francisco.
Keep your icons simple
As betterPT expands across the country, it is important to maintain a consistent brand identity across all the products we put out. It is for this reason that I thought it might be a good idea to use our logo as a part of our map, as a way to represent betterPT clinics in patients’ search views and in doing so, encourage brand recognition. But when testing out my first iteration of this idea, I found that using our logo in this way was very distracting; with all the information displayed on a map, it’s important to keep things simple. After various trials with other icons, I ended up just using the top of our logo to display locations, as a pin not too different from the one that users of Google or Apple Maps are used to working with.
Ensure a smooth handoff
Good design requires a harmonious relationship with the people who give life to your ideas, build them out and present them as usable products in the real world. For this reason, it’s important that your development team have all the tools they need to incorporate your ideas into their projects. At betterPT, our web search is built with React on Node.js. A smooth handoff from design to development required that I generate a style URL, access token and custom markers such as our Mapbox icon as a .svg and .png file to work with.
In sum
Making a custom map is a challenge that will put all of your visual design tools to the test, from typography to color theory to the most fundamental skill of creating a product that is useful and pleasing to the eye. Taken literally, a map is a worldview, and it should therefore be curated as a reflection of your hopes and ideals. In betterPT’s case, our hope is that patients have a great experience discovering the right physical therapy clinic for them. Our custom map has guided us in the right direction.
