Introducing Quiet L.A.

    A new open-source template for a muted base map about Southern California, and the lessons we learned making it

    Ben Welsh Los Angeles Times
    BASE LAYER: The view of downtown Los Angeles in The Times’ new open-source map. Visit the demonstration page to see it in action.

    Today we an­nounce the re­lease of Quiet L.A., a free and open-source base map for South­ern Cali­for­nia. It is de­signed to serve as a muted back­drop for over­lay­ing data visu­al­iz­a­tions. We put it to use Wed­nes­day with this in­ter­act­ive map of 911 re­sponse times across the city of Los Angeles.

    The most pop­u­lar on­line maps are in­ten­ded to provide driv­ing dir­ec­tions. That en­cour­ages filling up space with as many la­bels and land­marks as pos­sible, which is use­ful when you’re find­ing your way around town, but dis­tract­ing when you want to fo­cus on a data over­lay.

    The goal of Quiet L.A. is to re­move ex­traneous de­tail, but re­tain enough in­form­a­tion for the re­gion to re­main re­cog­niz­able. It was de­veloped us­ing Map­Box’s ex­cel­lent map design stu­dio, Tile­Mill.

    We are re­leas­ing the code we used to design and de­ploy the map, avail­able here on Git­Hub, with the hope that it might be of help to oth­ers and with the faith that the open-source de­vel­op­ment pro­cess will lead to im­prove­ments we can be­ne­fit from. We know it has flaws, but we’re put­ting it out there.

    What’s in it

    The map is gen­er­ated en­tirely us­ing open data. Roads, build­ings, wa­ter­ways and land­use des­ig­na­tions are provided by Open­Street­Map, a free data­base that could be fairly called the Wiki­pe­dia of maps. The loc­a­tions and la­bels for cit­ies and oth­er places are provided by the U.S. Census via a data portal pub­lished by In­vest­ig­at­ive Re­port­ers and Ed­it­ors. Los Angeles re­gions and neigh­bor­hoods are provided by The Times’ own Map­ping LA pro­ject, which was built out of a crowd­sourcing col­lab­or­a­tion with Times read­ers.

    What we learned

    The main les­son we learned in this pro­ject is to ap­proach de­vel­op­ing a map like any oth­er Web ap­plic­a­tion. That means:

    Use ver­sion con­trol

    A Tile­Mill pro­ject can be tracked in ver­sion con­trol soft­ware such as Git just like any oth­er soft­ware pro­ject. You reap the same be­ne­fits and all that’s re­quired is you con­nect your loc­al ver­sion of the re­pos­it­ory to Tile­Mill’s pro­ject dir­ect­ory, which can be done with a stand­ard sym­bol­ic link.

    $ ln -s /path/to/this/repo/quiet-la /path/to/Documents/MapBox/project/
    

    Break goals down in­to small, man­age­able tasks

    Col­or­ing in lakes, la­beling moun­tain ranges, pick­ing icons for fire sta­tions or fine-tun­ing high­way shields can all be achieved one by one. It’s best to make a long list of all the im­prove­ments you’d like to make and tackle them one at a time. A lot goes in­to even a simple map and it can be over­whelm­ing if you try to tackle everything at once.

    One ap­proach we like is treat­ing every zoom level in your map as a sep­ar­ate fea­ture and then per­fect­ing them one at a time. Today’s re­lease of Quiet L.A. provides only six zooms, but adding more is something we aim to do gradu­ally in the fu­ture.

    Pack­age to dis­trib­ute

    Look at up­grades to your map tiles the same way you would a soft­ware pack­age. As­sign a num­ber to each re­lease. Then auto­mate the pro­cess of de­ploy­ing a new ver­sion. We ac­com­plish this by us­ing Fab­ric, the de­ploy­ment tool we typ­ic­ally use to roll out changes to our Django Web ap­plic­a­tions.

    When we’re ready to up­grade, we vis­it the set­tings for our Tile­Mill pro­ject and in­crease the ver­sion num­ber stored there. Then the fol­low­ing Fab­ric func­tion uses Tile­Mill’s com­mand-line tools to ex­port a new tile set.

    def build_tiles():
        """
        Cre­ate a set of tiles so it can be de­ployed.
        """
        print('Build­ing map tiles')
        # Have Tile­Mill build the cur­rent pro­ject as an mb­tiles file
        loc­al('%(tile­mill)s ex­port quiet-la ./%(re­lease_­name)s.mb­tiles --format=mb­tiles' % env)
        # Crack open the mb­tiles file as a dir­ect­ory
        print('- Open­ing mb­tiles file')
        loc­al('mb-util ./%(re­lease_­name)s.mb­tiles %(re­lease_­name)s' % env)
        print('- De­let­ing mb­tiles file')
        loc­al('rm -rf ./%(re­lease_­name)s.mb­tiles' % env)
        print('- De­let­ing ex­port log')
        loc­al('rm *ex­port*')
        print(green('Suc­cess!'))
    

    This next Fab­ric func­tion takes that dir­ect­ory and uses Chris­toph­er Groskopf’s ivs3 tool to up­load the tiles to our host­ing pro­vider, Amazon S3.

    def de­ploy_tiles():
        """
        Up­load a re­lease folder to Amazon S3 buck­ets
        """
        print('De­ploy­ing tiles to Amazon S3')
        for buck­et in env.tile_buck­ets:
            print('- Up­load­ing files to %s' % buck­et)
            loc­al("ivs3 -P %s %s/%s" % (
                env.re­lease_­name,
                buck­et,
                env.re­lease_­name,
                )
            )
        print('- De­let­ing file dir­ect­ory')
        loc­al('rm -rf ./%(re­lease_­name)s' % env)
        print(green('Suc­cess!'))
    

    Don’t re­peat your­self

    We also auto­mate oth­er com­mon tasks, like up­dat­ing our Cali­for­nia slice of the Open­Street­Map data­base and boot­strap­ping the pro­ject on a new ma­chine. You can find all our tricks in the Git­Hub re­pos­it­ory.

    What you can do

    If you’d like to par­ti­cip­ate in im­prov­ing Quiet L.A., here are a few ideas:

    1. Work on con­fig­ur­ing the ex­ist­ing fea­tures for a new zoom level.
    2. Fork the re­pos­it­ory and ap­ply our style to your area.
    3. Help us fur­ther re­fine how we query roads at each zoom level.
    4. Im­prove the dis­play and size of wa­ter­way la­bels at each zoom level.
    5. Query and style a land­use type you think we ought to add.
    6. Spot something ugly and point it out.

    Much re­spect due

    The tech­nic­al design of Quiet L.A. is heav­ily bor­rowed from Map­Box’s ex­cel­lent osm-bright. The cos­met­ic design is modeled on a 2008 map of Or­ange County elec­tion res­ults by Thomas Suh Laud­er. The code was de­veloped on top of a ground­break­ing found­a­tion by my col­league Ken Schwencke.

    Readers: What’s your take? Share it here.

    Advertisement

    Latest work

      About The Data Desk

      This page was created by the Data Desk, a team of reporters and Web developers in downtown L.A.