The New Fabulous Mapbox Studio Tutorial - Making a more Accessible Map

Accessible-Map.png

**** Spoiler Alert****Spoiler Alert

After reading all this fabulousness you will be told that you can't use it in Tableau (fingers crossed *yet*)!  Please enjoy, and add "Mapbox Studio Tableau integration" to your list for Santa and be very, very nice!!!!!

Here is an example of how beautiful your new maps can be.  This one was designed to be a background map that was elegant and provided an alternate to just the black, white, and that other one that no one uses, that come pre-designed in Tableau.   Check it out live and zoom in and out.  Notice the color gradations as you zoom in close.  Those would have taken forever to get right in Classic, not to mention how amazingly smooth it is to zoom in and out and pan around.  This is a map Ferrari!

Tableau Light

For a great explanation of how Mapbox Studio is different from Classic check out this post.    Are you beyond excited yet?  No more Carto CSS!  Up with Mabox GL Styling!  Ready to rock?  Go to the recently launched Mapbox Studio and login.  Your Mapbox Classic login will work here as well.  Then click on the New Style button.

Create New Mapbox Style

 

Pick a style to base your new map on and click on Create.  I am going to modify a style to be more accessible for folks with color blindness, more limited visibility and dyslexia (a suggestion from Allan Walker).  I am going to use the Basic style, so select that if you are following along (or don't, I won't be hurt).

Create based on Style

 

Wait - what's this? Where is all that icky Carto CSS that was on the right side?  What is this new slick and glossy, Mapbox GL easy to use interface?  This is gonna be way fun!

New Studio Layout

 

One of my favorite features of the new Mapbox Studio is the ability to change multiple properties at once for things like colors and fonts all at one time.

Properties Fonts

 

I wanted to add a font that was accessible.  In addition to wanting to add high contrast and a larger size to my fonts, I also wanted to font to be readable by dyslexic people and so  chose to use a font called Lexie Readable.

Lexie Readable Font

 

In the new Studio, I can simply select the Font stacks property to see all the fonts grouped by Value (the name of the font face) or by the Property (the layers where they are used).  I am going to select By value and then click on the first Text font box where it is showing Open Sans Semibold.   Another window appears where I can now upload my new Lexie Readable font.

Change All Fonts

 

Once my font is uploaded, I can select it just like any of the pre-loaded fonts.  Go ahead and do so for each of the fonts Values.  You should then end up with only 2 Values as there is only a bold and regular version of the Lexie Readable font.

My New Font

 

Once finished, close up the properties window and zoom in a bit on your map and you can now see the updated font.  How easy was that!

Map with New Font

 

But remember, I wanted it to have a high contrast to make it easier to read, so now we are going to play with the Colors property.  Click on the little grey circle next to Text color and a big beautiful color picker shows up.  You can select a color or type it in by RGB or HEX.  You can also adjust the transparency (by changing the value to less than 100 to the percent transparency that you would like).  I am going to change mine to black.  Right below it is the Text Halo Color.  I am going to change that to be white for full contrast.

Change Color

 

The next thing I wanted to do was to make the text larger.  Really, I just want to do this to show off the amazing style by zoom level feature.  Click on Text field in the Properties, and then select the Style by zoom level icon in the Size area.  It will show you what zoom level you are currently in on the map and allow you to set sizes at different zoom levels.  It then beautifully calculates how the font should scale between the stops.  Let's bump ours up a bit to 16px at Zoom Level 3.  Feel free to increase the size on the other Text fields as well.

Style Text by Zoom Level

 

Now all your fonts should be a bit larger and easier to read for those of you who are like me and are starting to need readers for close up.  Onto color!  I wanted to adjust the colors to be more friendly to color blind folks  and found the below 7 color palette.

Color Blind Safe 7

 

With the new Classic, it is super easy to change colors all at once.  Go back to the Properties and select Colors and make sure the icon that looks like a trapezium is selected.  Notice the fill colors and a list of the layers that they are used in.  Click on the blue circle by the water and change it to R0 G114 B178 for Blue.  Next change the green used in landuse_park to be Blueish green R0 G158 B115.

Colors Zoomed Out

 

As I mentioned before, one of my favorite features is the style by zoom level and we can use that for color too.  Click on the little icon to the right of the green dot for landuse_park and Enable styling by zoom level.

Style Color by Zoom Level

 

You can use this to adjust the color at each zoom level, but in this case I will use it to adjust the opacity.  The value on the far right is showing that the color should be at 40% opacity from the get go, but gradually move to being at a 20% opacity by zoom level 22.  Make your changes and zoom in and out and see your magic!

Color Change Opacity by Zoom Level

 

Next let's learn how to add a pattern so that we can make our roads be dashed lines.  Giving different textures and patterns to map elements is another way to help differentiate layers and make them more accessible.  I am going to select my road_main layer.

Style Roads

 

I can create a pattern very easily by creating a Dasharray.  The first number is the size of the colored dash and the second is the space between your colored dashes.  My main roads are now all instantly updated to be dashed lines.

Style Roads Dashed Line

 

Another fabulous feature is the ability to multi-select layers and change them all to be the same.  For example, now that my road_major is dashed, I want to make m bridge_major and tunnel_major layers dashed too.   Using the Control  key (or command key on a Mac), multi-select all 3 major types  Notice now that several of the styling options say "Pick one".  Let's click the Pick one near the Dasharray.

 

Multi Select layers

 

It now give me the options to pick if I want to style them all like the road_major or like the tunnel_major.  I am going to pick the road_major so they will all have the dashed style.

Pick One

 

 

There is so much more to explore!  In just a few clicks you can create a beautiful, customized map to show off your data (hopefully in Tableau soon!) hopefully taking accessibility into account.

Happy Mapping!