The New Fabulous Mapbox Studio Tutorial - Making a more Accessible Map
/
**** 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!
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.
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).
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!
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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!
