We just released a new map tileset of Washington, DC called DC Bright on MapBox.com. This map focuses on the city’s neighborhoods, showing their boundaries while letting you drill down to see street names and other landmarks. With the design of this map, we wanted to create a clean, light canvas that serves as a good base to add clusters of data points and information to. The map has a soft color palette, and street level labels turn on at zoom level 15.

You can integrate these map tiles directly into your websites via TileStream (hosting is free for all MapBox tiles) or download it to run off your MapBox iPad App.

Using open data to create layers

All of the map layers you see in the DC Bright tileset were created using open data. Shapes, including buildings, parks, roads, and neighborhoods, were provided by the Washington, DC government on data.dc.gov, and the outline of the city and the street labels came from OpenStreetMap data of Washington, DC provided by Cloudmade.

Many of the shapefiles were altered using QGIS, and label names with descriptions were customized from this neighborhood shapefile using the spreadsheet tool in LibreOffice. Neighbourhood names were derived from this mapped image of dc neighbourhoods on wikipedia. This overall allowed us to better match to the design and purpose of the tileset.

Labeling rivers

To identify the Potomac River I wanted to create a label that followed the shape of the river. Using QGIS I added a custom linestring, exported this as a shapefile, and applied the following properties to my newly created line:

#potomac-label[zoom>11] { text-name:"'P o t o m a c R i v e r'"; text-face-name: @sansbold; text-fill: #72bfcf; text-placement: line; text-transform: uppercase; text-spacing:500; text-min-distance:500; [zoom=12] { text-size: 9; } [zoom=13] { text-size: 12; } [zoom=14] { text-size: 13; } [zoom>14] { text-size: 14; } }

There are other techniques that allow you to set labels with spacing such as text-spacing or text-character-spacing when text-placement is set to a point, vertex, or interior. For our purposes and because text-placement is set to line, I manually applied the spacing required to achieved the ideal result.

The solution above worked for our needs but you could also achieve similar results by applying a replace() method from the text-name property. The advantages of doing this as with any regexp is a greater granular control over the string itself.

text-name:"'Potomac River'.replace('([\w\ ])','$1 ')";

This map was designed using [TileMill, our open source map design studio](http://tilemill.com/), and is freely available for download on [MapBox.com](http://mapbox.com/). You can find documentation on how to use MapBox tilesets at [support.mapbox.com](http://support.mapbox.com/). There is also a [gist available of the final result](https://gist.github.com/988709).