3 Ways to Style Maps

Adam DuVander
Jun. 25 2012, 12:42PM EDT

It used to be you could change anything layered on top of a map, but you couldn't change the underlying map itself. Now you have several options for changing the color palette and the visibility of different objects that make up your base map. The options vary on the amount you can customize and how much work is required. But all three of these APIs can have you map scripting with style.

Google Maps: Styled With JSON

Google MapsThe Google Maps API may be the granddaddy of mapping APIs, but it wasn't the first to offer styled maps. However, it may be the easiest, making it a popular choice for developers. Styling a map is done via a JSON object that is sent along with your map initialization details. It's fairly readable data for most programmers, so you should be able to play around with it and see the changes quickly in your app.

Google has a wizard that makes it even easier to play around with styles. Click around the options in the left, then set colors and other criteria. You can see the changes instantly on the embedded map.

Until recently, styled maps had a low rate limit. However, now you can use up to 25,000 map views per day before you have to pay Google anything. Hopefully by that point you'd be making enough off your project to afford $0.50 per 1,000 map load.

Cloudmade: Built on Open Data

CloudMadeWhen Google styled maps launched, we said "look out Cloudmade." The company based on OpenStreetMap data was by far the first to have the option to change your maps. It still has a great balance of editable features and ease of interface.

Perhaps the most intriguing feature Cloudmade has over Google is the ability to change the map based on zoom level. That means you can have parks, for example, be a different color every time the user zooms. More practically, it means selectively showing and not showing certain elements depending on how close-in the view is. Google and most mapping providers do this automatically, such as with neighborhood streets versus freeways.

With the Cloudmade editor, you can start with a template similar to what you want. The company lists hundreds in its gallery, including a handful by famed visualization company Stamen. The templates begin with settings you'd most want, then you can choose whether to change things globally or by the zoom level.

When you're finished, you publish the style, optionally making it available to others. Then you can include it in your map applications by calling your style ID. As you might expect, the styles are only available via the Cloudmade API.

MapBox: Customize Almost Anything

MapBoxThe last and most involved example of styled maps is the MapBox API. This was the choice when foursquare left Google Maps. It gives you the most options for customization, but it's also the most involved and will involve a monthly fee for most developers.

You build your maps in TileMill, a desktop app made by Development Seed, the company behind MapBox. GIS experts will be most likely to enjoy this one, because it supports shapefiles, a format where geographic data is frequently stored. There are also a number of pre-configured map examples, as well as pre-packaged data within TileMill. You have a lot of options to style maps here, but again, it can get pretty involved, especially if you want street maps (and most of you do).

Once your maps are styled, you then need a place to host them and a way to display them. MapBox has several pricing plans, but you can also use the open source Tile Server and host it yourself. Then you'll need to use a mapping library that allows for custom tiles to display them. The Leaflet API (by Cloudmade) is a fairly new, lightweight choice. The OpenLayers API is a popular one and has a long track record. I should also mention Mapstraction, an open source library that sits on top of many mapping APIs, allowing you to change providers without rewriting code. Mapstraction is used throughout my map programming book.

Now that you can style maps, it's time to be inspired. Check out maps without maps, based on Google Maps. Get lost in the James Bonds-esque Midnight Commander on Cloudmade. And see how foursquare has made MapBox its own.

And, of course, when you publish your styled map, add it as a mashup on ProgrammableWeb.

Photo by Sami Niemelä

Adam DuVander Hi! I'm Developer Communications Director for SendGrid and former Executive Editor of ProgrammableWeb. I currently serve as a Contributing Editor. If you have API news, or are interested in writing for ProgrammableWeb, please contact editor@programmableweb.com Though I'm a fan of anything API-related, my particular interest is in mapping. I've published a how-to book, Map Scripting 101, to get anyone started making maps on websites. In a not-so-distant past life I wrote for Wired and Webmonkey.

Comments

Comments(2)

User HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

Thanks for the article, I've been meaning to play with Google Maps styling options, good to get a preview of what's available.

There are some other options that are similar to MapBox but more user friendly for users who aren't familiar with coding.

Check out Mango Map www.mangomap.com (which is free) or ArcGIS Online - www.arcgis.com (offer a limited free plan).