Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 20 2012

15:20

How to Create a Minimalist Map Design With OpenStreetMap

Mapping can be as much about choosing what data not to include as to include, so you can best focus your audience on the story you are telling. Oftentimes with data visualization projects, the story isn't about the streets or businesses or parks, but rather about the data you're trying to layer on the map.

To help people visualize data like this, I've started to design a new minimal base map for OpenStreetMap. What's great about OpenStreetMap is that the data is all open. This means I can take the data and design a totally custom experience. Once finished, the map will serve as another option to the traditional OpenStreetMap baselayer.

I'm designing the new map in the open-source map design studio TileMill, which Development Seed has written before about here. The map can be used as a light, very subtle background to add data on top of for use either with our MapBox hosting platform's map builder or on its own. It still provides the necessary geographic context for a map, but moves the focus to the data added on top of the map -- and not details that are irrelevant to its story.

Here's an early look at the features and design aspects I've been working on for the map.

A look at Portland, Ore., on the new OpenStreetMap Mininal basemap Portland, Ore., on the new OpenStreetMap minimal base map.

Behind the design decisions

I used the open-source OSM Bright template that you can load into TileMill as a starting point for the design and removed all color, choosing to limit the palette to light grays. For simplicity, most land use and land cover area types have been dropped. However, wooded areas and parks remain, indicated with subtle textures instead of color. The fact that OpenStreetMap's data is open gives me full control of choosing exactly what I want to show up on the map.

The style now includes more types of roads. Tracks have been added, as have pedestrian routes, bike paths, and bridleways, which are shown as dotted lines. Roads without general public access (for example, private roads) are shown faded out. The rendering of overlaying tunnels, streets and bridges has also greatly improved, with most overlapping lines separated and stacked in the proper order.

Example Boston bridges
Overlapping bridges in Boston.

Coming soon: OSM Bright

Many of the adjustments that I've made for this minimal style are things that can be pulled back into the OSM Bright template project. I'll be working on doing this in the near future as I wrap up work on the minimal design. Keep an eye on GitHub for these improvements as well as our blog for information about when the minimal design will become available for use.

MapBox for design

If you're interested in making your own custom maps, try using TileMill to style your data and pull in extracts from OpenStreetMap. Documentation is available on MapBox.com/Help. We are close to launching TileMill on Windows, so that in the coming weeks anyone using Windows, Mac or Ubuntu operating systems will be able to easily design custom web maps. You can see a preview and sign up for updates on MapBox.com/Windows, and we'll post details here on Idea Lab once it's available.

For more information on these tools and on hosting plans to share them online, check out MapBox.

July 11 2011

16:02

How TileMill Improved Ushahidi Maps to Protect Children in Africa

In May I worked with Plan Benin to improve its Violence Against Children (VAC) reporting system. The system uses FrontlineSMS and Ushahidi to collect and visualize reports of violence against children. Ushahidi develops open-source software for information collection, visualization and interactive mapping. While in Benin, I was frustrated by the lack of local data available through Google Maps, Yahoo, and even OpenStreetMap -- the three mapping applications Ushahidi allows administrators to use without customization.

While these mapping services are great for places rich in geographic data, many places -- like Benin and other countries in the developing world -- are poorly represented by the major mapping services. Making matters worse is the fact that even when good data is available, slow and unreliable Internet access turns geolocating incidents and browsing the map into a frustrating, time-consuming challenge for staff and site visitors in-country.

In an effort to create a custom map with more local data, I tested out TileMill, Development Seed's open-source map design studio, with successful results.

An area of northwest Benin shown with Google Maps (left) and a custom map built with TileMill (right). Note the number of towns and villages that appear in the map at right.

With little hands-on experience with map design or GIS (geographic information systems), I was happy to find TileMill's Carto-based code intuitive and easy to use.

Because of the lack of data on Benin available through the major mapping services, I thought it would be interesting to visualize the VAC Benin data on a custom map using geographic data obtained by Plan Benin through CENATEL, the National Centre of Remote Sensing and Forest Cover Observation in Benin. I exported reports of violence from Ushahidi into a CSV file using Ushahidi's built-in export functionality. From there, I used Quantum GIS -- an open-source GIS tool -- to convert the data into GeoJSON, an open standard for data interchange that works very well with TileMill.

I then used TileMill to create a map that includes only the data relevant to Plan Benin's activities on this particular project, which helps users focus on the information they need. The map includes geographic data for Atacora and Couffo, the two "Program Units" where Plan Benin operates. (These are highlighted in light blue on the map.)

I also included labels for the important cities in both Program Units and, if you zoom in several levels, village names in Atacora. The red dots indicate reports of violence, and if you mouse over or click on a dot, you can see a summary of the incident. The reports were geolocated by hand using information sent via text message. The map also incorporates MapBox's open-source World Bright base-layer map, adding country borders, custom labels, population centers (in light yellow/brown tones), and other information to the map.

The Tip of the Iceberg

This is really the tip of the iceberg in terms of what TileMill can do. It would also be possible to add as many cities and villages as there are in the dataset, include multimedia-rich interactivity, use a choropleth scheme to indicate hotspots of violence, cluster reports, and so on.

With just a few design choices, this custom map dramatically improves the experience of interacting with data collected through Ushahidi. Highlighting the Program Units draws the eye to the important areas; using deep datasets and custom map labels solves the problem of missing local data; and the built-in interactivity means that visitors don't need to browse to multiple pages (a killer in low-bandwidth environments) to view information on individual reports.

Compositing, which was just rolled out on TileStream Hosting, helps the map load quickly, even in low-bandwidth environments (the maps are now faster than Google Maps), and this map can also be used offline via either the MapBox Appliance or the MapBox iPad app. Finally, TileStream Hosting makes it easy to host the map and generates embed code so the map can be widely shared.

Take a look at the map below and feel free to click over to the VAC Benin Ushahidi site to see the difference for yourself.

VAC Benin data collected with Ushahidi and visualized with TileMill:

Paul Goodman is a master's student at the UC-Berkeley School of Information and is spending the summer working with Development Seed.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl