Mapbox Sudio Tips

By peterm, 9 August, 2015

Project Objectives

In this round of changes, we're going to want to further our re-design objectives from last summer. Some of these are simple label changes, some are color palette and or style issues some may need additional tagging at the OSM layer, such as Parking lots. Our parking lots are marked permissive. This gives them all the same style. In fact, some parking lots are restricted, so we may need to correct data and come up with a style for those items. We also continue to want to hide the visual clutter of too many footpaths, poi's, waterways. That's because we're looking to communicate way finding, parking, buildings to help visitors.

Migrating from TileMill to Studio

Because I work on maps a couple of times a year, I forget some of the steps. So I worked more dilligently to pull my steps and approach into my notes for future reference. 

I wanted to work on styling buildings, roads, areas for UC Santa Cruz (http://maps.ucsc.edu). I first started by pulling copies of my last round of work from TileMill and recording the SQL queries.

Studio and PostgreSQL Tips

At http://www.openstreetmap.org/#map=18/36.98889/-122.05836&layers=N I'd like to remove the illegal bike path "No Brakes" from our official UCSC map. Here's what worked in Mapbox Studio. 

One of my debugging issues to get around was that this item appeared to be styled by both #roads_high and #road. #roads_high is a stylegroup of type=path and stylegroup=noauto. We can figure out how that stylegroup is created if we go back into TileMill and find the road_high layer and SQL. The #road style is class=path, type=footway. I could style all my footways, but that is too much. Need to drill down to just the item, so we're going to use osm_id as the selector.

Here's a protip. osm_id= as a selector should not use quotes. That took a while to figure out.

#road {

  [osm_id=46859144] {

    ::case {

      line-opacity: 0;

      line-width: 0;

      }

    ::fill {

      line-opacity: 0;

      line-width: 0;

      }

    }

  }

#road_label[name='No Brakes'] {

  text-opacity: 0;

  text-halo-opacity: 0;

  }

Here's a similar change for another illegal bike trail called "StarWars".

#road_label[name='StarWars'] { 

  text-name: @name;

  text-face-name: @sans;

  text-size: 12;

  text-opacity: 0;

  text-halo-opacity:0;

  }

#road {

  [osm_id=32919203] {

    ::case {

  line-width: 0;

  line-opacity: 0;

  }

    ::fill {

        line-width: 0;

  line-opacity: 0;

      }

    }

  }

The big aha momemt was thinking through the fact that these were both roads. While I could style the road, I wasn't able to actually set the opacity to 0 until I figured out that as a road it has both fill and case that needs to be styled.

Given a short list of tracks that we want to hide from view, we can re-write a PostGIS query that can be added as a source to Studio for later styling.

select * from san_francisco_bay_california_osm_line

where

osm_id IN ('46859144', '46866182', '194541215', '47461532', '47461531')

Here's another aha moment. When working between PostGIS, Mapbox, Studio, I was trying to add an interactive layer so to test how popups would work. It took a while to come to the conclusion that adding an interactive layer requires that you test from a basic index.html page and include your map id. I guess I was expecting this in both the editor and the Studio app.

Also, the online editor UI is depective in a few places. For example to add/subtract layers you need to click the “Toggle Layers” text in the layers tab. This will allow you to add/subtract and toggle layers. I guess I was looking for a button or something. Or, I was just tired.

Styling Rules

We're going to want to style for these changes in Studio this Summer 2015.

  • Arboretum and CASFS still have labels that are too long
  • There's a point near BSoE that shows University of California Santa Cruz - set its maker and style to opacity:0.
  • Water tank at Arb is still showing
  • Some parking lots that are "private" are still showing as P public
  • paved footpaths could use some better styling
  • waterways are still showing
  • service roads and one ways might better styled
  • double labels at z18 on core west
  • might look at various road styling 
  • service roads below lower east field in great meadow?
  • at z18 19 across from pull out on Coolidge, we see Arboretum, service road.
  • should mark the turnout as unauthorized parking and not style it?

From May 2014 Edits

Level 14 (full campus map):

- University of California Santa Cruz

Level 15:

- college names

- names of primary roadways (Heller, McLaughlin, Hagar, Coolidge)

Level 16:

- names of secondary roadways (e.g., Steinhart, Meyer, Chinquapin, etc.)

- names of non-college residential areas (e.g., Graduate Student Housing, Crown/Merrill Apartments, College Nine/Ten Apartments)

 - names of "neighborhoods" (e.g., Science Hill)

Level 17:

- parking lots (e.g., a blue P with the lot number, not individual ADA parking spaces)

- names of sporting facilities (e.g., tennis courts, pool, basketball)

- names of individual buildings (e.g., Dance Studio, East Field House, Sinsheimer Labs)

- dining/coffee icons (and names)

- transit stop icons

Level 18:

- restroom icons

- names of individual residence halls or apartments

- names of quads and circles (e.g., Porter Circle, College Eight Quad)

- water fountain icons

- public phone icons

- ADA parking spaces IF we can change the icon to differentiate from the Parking Lot icon

- market icon and label for Kresge Co-op

- icon for gates (e.g., security gates at the EOC)

- traffic light icons

For what it's worth, here are things we should never show:

- names of unpaved paths

- natural reserves

- names of meadows

- names of Arboretum collections or groves

- inclusion area names

- recycling symbols

- names of bridges

- icons for libraries, fire stations, theaters, viewpoints. mailrooms, or police departments

At some point, I'm assuming we can talk about color, and how different surfaces are rendered. But this is a start...

Tags