Playing with Map Styles

If you like your maps with a little style your options just got wider. Mapzen has released a new browser based map style editor. Tangram Play is a real-time tool for editing Tangram map styles directly in your browser.

Tangram Play is split into two main areas the map and the map editor. You can adjust the style of any of the map layers directly in the map editor and all the changes you make to the style will be instantly shown in the map pane. The editor includes color pickers in the map editing pane which enables you to simply select the colors you want for different elements on the map from the pop-up color picker.

When you are happy with your map style you can save your style. You can then share the style with others by getting a shareable link to your styled map. If you want to use the style in your Tangram maps you can grab the JavaScript code which you can then use with your Mapzen account.


Mapbox GL also has its own browser based map style editor. Mapbox Studio. Mapbox Studio gives you complete control over the design of your Mapbox created maps. It allows you to define the colors of map layers, change the size & fonts of map labels and even add & style your own data on the map.

Mapbox Studio is probably the most complete browser based style editor for interactive maps. It currently gives you the option to customize the look and feel of more map features than other map style editors. The ability to add and style data to the base map also means that you have control not only of the look of your base map but of your completed map visualization of geographical data.


The Google Maps API also allows you to change the colors of different map elements and to define which map elements are visible on your finished map. To start creating your own custom map styles for Google Maps you can use the Google Maps APIs Styling Wizard. The wizard allows you to quickly adjust the number of labels, landmarks and roads that are visible on the map. It also contains a number of pre-designed themes, such as the vintage and night-time map styles.

If you want to change the look of your map style even further just click on the 'more options' button. This will allow you to control which feature types you wish to display in your style and allow you to change their appearance on the map.

You can learn more about custom map styles in the Google Maps API documentation for Android, iOS and JavaScript.

Spinal Map

Thunderforest, designers of some of the world's most popular interactive map styles, has released a totally new map tiles style. Thuderforest is probably best know for its OpenCycleMap map style. It also hosts a number of other popular interactive styled map tiles, including Transport, Landscape, Outdoors and Transport Dark.

Thuderforest's new style is a little different. Spinal Map is a heavy rock inspired map style. It comes complete with a Gothic font and rivers & seas of fire. The font makes heavy use of metal umlauts. Place names on the map that include the word 'City' have also become 'City of Rock'.


Fans of rock might also like Mapbox's Wheatpaste map style. Wheatpaste is a map style inspired by the cut & paste, collage style of music flyers & posters, popular with punk and new wave bands.

If you want to explore some more interesting styled maps then you check out this Map Styles Gallery map.

The Google Maps Flâneur

To enter Random Google Maps is to undertake a journey through the labyrinthine streets and hidden spaces of the map. It is an immersion in the secret language of the map; it is to see the map, to be at the center of the map, and yet to always remain hidden from the map¹.

Sorry - I got lost for a second there. Actually Random Google Maps is an animated journey through random locations on Google Maps, with each new location decorated in a random Google Maps style. Just fire up Random Google Maps and sit back as the application takes you through an ever changing landscape of random locations presented in ever changing random colors.

If you take a little peak at the JavaScript behind Random Google Maps you will discover that the locations aren't really that random at all. The map picks from 26 locations around the world at random and then applies random colors to a number of the map features.

It's still a fun little map though.

¹ with apologies to Walter Benjamin

How to Create Styled Google Maps

Yesterday I wrote about Six of the Best Mapbox Styles. Today I thought it might be interesting to look at styling maps with the Google Maps API. While the Styled Maps feature in the JavaScript Map API is nowhere near as powerful as Tilemill or Mapbox Studio it does allow developers to control some design elements of a Google Map, such as defining the colors of map features.


A good example of what can be achieved with the Styled Maps feature is Yarr, Pirate Maps. Yarr, Pirate Maps uses a few clever tricks to create a distinct pirate themed design, complete with animated waves, birds and pirate ships.

The colored map tiles are created using the Google Maps API Styled Maps feature. The styled map is augmented by a few other non-Styled Map features. For example, the paper looking effect is created by using a number of background images and z-index on the map. The animated waves, birds and ships on the map are achieved by using animated gifs as map markers.


If you want to use a styled Google Map then your best bet is probably to start with having a look at styles that have already been created by other users. Luckily a great repository of ready made Google Maps styles already exists.

Snazzy Maps is a collection of different styles for Google Maps. You can browse through the many example map styles on Snazzy Maps by the 'most popular' and 'most recent'. You can also filter the maps shown by a number of useful tags, such as 'dark', 'light', 'two-tone' etc.

Map developers contribute to the repository by adding map styles that they have created themselves. Once you find a map style that you like you can click on its title and grab the style array. Snazzy Maps even provides an option to download a simple example of each style.


If you want to start from scratch and create your own Google Maps style then you can use Google's Styled Maps Wizard. The wizard allows developers to play with the colors and styles of individual map elements and create the JSON code that can then be used with the Google Maps API.

Other, third party, style wizards also exist to help you create your own Google Maps styles. Map Stylr, Think Tank's Custom Google Maps Style Tool and Google Maps Colorizr are all great style wizards designed to help making your own map styles as easy as selecting map features and selecting your favorite colors.

If you want more inspiration for creating your own Google Maps styles then you can also have a look through some of the great map styles previously featured on Maps Mania by using the Styled Maps tag.

Neon Maps

M+, Hong Kong’s museum for visual culture, has released an interactive online exhibition celebrating Hong Kong’s neon signs. Neon Signs explores, maps and documents the city's wonderful neon signs.

The public can upload images of their own favorite neon signs from throughout Hong Kong and they will appear on the Neon Signs Google Map. The map itself uses the Styled Map feature and custom map markers to create a unique looking map. The markers use horizontal neon colored lines that stand-out on a black and grey themed map.

The black and grey map tiles also ensure that the colorful photos of the city's neon signs appear bright against the dark map background.

Post-Apocalyptic Google Maps

Frequency 2156 is a radio station and Google Map that has been transmitted back through time from the year 2156. In the year 2156 the world is suffering from a twenty year long nuclear war.

Frquency 2156 appears to be gathering data about survivors of this global nuclear war. The map allows you to listen to the messages sent into the station from survivors around the world. You can really mess with the heads of those survivors by recording your own message on the map. Your message will then be transmitted forward through time to this future dystopian world.


RadiantCopenhagen is another Google Map that is somehow sending back important information from a dystopian future.

The map shows a number of important future locations in Copenhagen. When you click on a map marker an information window opens with news that is dated a number of years in the future, usually describing a world that seems to have been hit by global warming and a global depression.

The map also includes a handy time-line, which is useful for those who like their dystopian futures prophesied chronologically rather than spatially.


Map of the Dead is a handy MapBox guide to surviving the approaching zombie apocalypse.

Once you enter your address into Map the Dead you are presented with a map of the area, displaying nearby places that are likely to have resources to help you survive once the zombies begin to take control. It is highly likely that the internet will not survive the rise of the dead so you are advised to print out your personalized Map of the Dead and store it in a secure location.

Styling Google Maps

Map Stylr is a new Google Maps API Styled Maps wizard that can help you create a unique style for your own Google Maps.

Map Stylr includes the Styled Maps wizard and a showcase of styles created by users of the site. The Map Editor allows you to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.

Instead of using the Map Editor tool you can use the Map Stylr 'showcase' to select from styles created by other map developers. If you find a style that you like in the showcase you can simply cut & paste the style JSON code into your own Google Maps creations.


If you want a nice map style for your Google Map but don't want to go to the effort of creating your own unique style then you can find some great map styles on Snazzy Maps. Snazzy Maps is a repository of different color schemes for Google Maps. You can browse through the many example map styles on Snazzy Maps by the 'most popular' and 'most recent'. You can also filter the maps shown by a number of useful tags, such as 'dark', 'light', 'two-tone' etc.

Once you find a map style that you like you can click on its title and grab the style array. Snazzy Maps even provides an option to download a simple example of each style. Map developers can contribute to the repository by adding map styles that they have created themselves. Developers who regularly use the Google Maps API should definitely bookmark Snazzy Maps as a useful resource.


Designmodo has also created a nice Google Maps styled maps wizard. Flat UI Maps allows you to play with and create Google Map styles using Designmodo's flat UI framework.

The wizard is a handy tool for anyone who wants to experiment with a flat UI style in their Google Maps projects. It allows the user to select the colors of map features by simply selecting the colors from a series of drop-down menus. Once you are happy with your created style you can grab the JSON to add to your Maps API Javascript file.


Think Tank has also released a Custom Google Maps Style Tool, that lets you play around with the colors of the Google Maps map tiles and generate the code that you need to create a custom Google Maps style. 

When you are happy with the look of the map you can then simply cut & paste the style code, which is generated beneath the tool.


The advertising agency stadt.werk has created a wizard that lets you design your map style in the familiar HEX RGB colors. The Google Maps Colorizr conveniently transfers your HEX RGB colors to the HSL colors used by Google Maps and allows you to cut and paste the code of your finished map style.

The Google Map Colorizr even has a dynamic URL. So if you want to ask someone's opinion about a particluar map style you can send them a link.


Google themselves have created their own Styled Maps Wizard. The wizard allows developers to adjust the colors of individual map elements and create the JSON code that can then be used with the Google Maps API.

The Endless Atlas

The Endless Atlas is an interesting collaborative art project dedicated to finding and curating the sometimes beautiful and sometimes mundane imagery that can be found on Google Maps Street View.

The found Street View images can be explored on The Endless Atlas Google Map, via the image tags or in collected 'itineraries'. If you want to take part in the project you can submit your own Street View discoveries to the Endless Atlas.

The Endless Atlas map makes good use of the Google Maps API Styled Maps feature to create a minimal map style. If you like the style you can find the Javascript style array used on the Endless Atlas on Snazzy Maps.

Finally a Repository of Google Map Styles

For a while now I've been looking for a good library of Google Maps map styles. Google Maps map style wizards are really useful in helping developers create their own map styles but sometimes you just want to be able to browse through examples of styles and pick and choose an appropriate style for your map.

Thankfully we now have Snazzy Maps. Snazzy Maps is a repository of different color schemes for Google Maps. You can browse through the many example map styles on Snazzy Maps by the 'most popular' and 'most recent'. You can also filter the maps shown by a number of useful tags, such as 'dark', 'light', 'two-tone' etc.

Once you find a map style that you like you can click on its title and grab the style array. Snazzy Maps even provides an option to download a simple example of each style.

Map developers can contribute to the repository by adding map styles that they have created themselves. Developers who regularly use the Google Maps API should definitely bookmark Snazzy Maps as a useful resource.

5 Beautiful OSM Styled Maps

One area where OpenStreetMap wins hands down over the Google Maps API is in the ability to create custom styles. The Styled Maps feature gives Google Maps developers some limited control over the colors of map features but nowhere near as much control as is possible with OpenStreetMap.

OpenStreetMap gives developer the option to change colors, line thicknesses and even change the fonts used in the map labels.

Here are five great examples of OpenStreetMap map styles:

1. Watercolor Map

Stamen's Watercolor Map is rightly one of the most popular and well known map styles. I've even seen this one popping up in maps developed with the Google Maps API, swapping out the Google Map tiles for this beautiful OpenStreetMap. If you like the Watercolor Map style you should also have a look at Oregon State University's Crinkled Watercolor Map.

2. The Comic Sans Map

This one really shouldn't work. Using the world's most despised font you would think would make this map style a complete disaster. However the Comic Sans Map is not only a great example of how changing the label font can have a huge influence on a map's design it actually looks great as well.

3. The Burning Map Style

Back to Stamen again. I'll admit outside a fun Burning Man map I can't think of many cases when you would want to use the Burning Map style. However the Burning Map is a great example of how you can use the latest WebGL technology to interact with the underlying OpenStreetMap data to create truly dynamic maps.

4. Red Alert

Cloudmade's Map Style Editor has a huge number of example map styles created with the editor. There are hundreds of styles to choose from here. I went for this Red Alert style but you can browse through the user submitted styles yourself (under Change Style) to find your own favorite styles.

5. MapBox Streets

MapBox Streets is probably the most ubiquitous OpenStreetMap style (for example it's used by foursquare). The map itself was built to be customized and users can change the map colors, show and hide features, and even configure the labeling language.

Styled Maps Wizards

Designmodo has created a nice Google Maps styled maps wizard. Flat UI Maps allows you to play with and create Google Map styles using Designmodo's flat UI framework.

The wizard is a handy tool for anyone who wants to experiment with a flat UI style in their Google Maps projects. It allows the user to select the colors of map features by simply selecting the colors from a series of drop-down menus. Once you are happy with your created style you can grab the JSON to add to your Maps API Javascript file.

Designmodo has also released a really great video tutorial explaining how the map was created.

Other Styled Maps Wizards:

• Custom Google Maps Style Tool
• Google Maps Colorizr
• Styled Maps Wizard

The Illustrator's Map of San Francisco

Illustrator and graphic designer Abby Putinski has created a beautiful Google Map documenting her experiences and adventures in San Francisco.

You can view Abby's animated illustrations directly on the map. The scenes include a number of landmarks around the city, including the Golden Gate & Bay Bridges, the Ferry Building, China Town and the Palace of Fine Arts. 

This beautiful map is enhanced by using the Styled Maps feature of the Maps API with the addition of a number of well known sights that can be seen in the city. 

Oh Google Maps - You're so random

I think that the Google Maps API Styled Maps feature is still underused by many Google Maps developers. That can't be said of Kim Asendorf.  

Kim Asendorf Maps uses random stylers to create a different looking map every time you refresh the map. Press your browser refresh button and you will be taken to a random location, at a random zoom level on Google Maps. You will also see a new configuration of colours of the map tiles in each new map.

Google Maps Styled Maps Wizards

Think Tank has released a Custom Google Maps Style Tool, that lets you play around with the colors of the Google Maps map tiles and generate the code that you need to create a custom Google Maps style. 

The Styled Maps class in the Google Maps API allows developers to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas. The Custom Google Maps Style Tool includes slider tools that allow users to adjust the hue, saturation and lightness of 'Landscape', 'Roads', 'Water' and 'Points of Interest' elements. 

When you are happy with the look of the map you can then simply cut & paste the style code, which is generated beneath the tool.


The advertising agency stadt.werk has created a wizard that lets you design your map style in the familiar HEX RGB colors. The Google Maps Colorizr conveniently transfers your HEX RGB colors to the HSL colors used by Google Maps and allows you to cut and paste the code of your finished map style.

The Google Map Colorizr even has a dynamic URL. So if you want to ask someone's opinion about a particluar map style you can send them a link.


Google themselves have created their own Styled Maps Wizard. The wizard allows developers to adjust the colors of individual map elements and create the JSON code that can then be used with the Google Maps API.

The Google Maps Guides to the World

The travel guide publishers Rough Guide have used the Google Maps API to provide a guide to great place to visit worldwide.

As you navigate the Rough Guide website look out for the 'view map' option that allows you to view Rough Guide recommended locations on a map. The drop-down menu above the map allows you to select individual countries and cities.

If you select a country or city from the menu then a general introduction to your chosen destination is given beneath the map and all the Rough Guide recommended places to visit are displayed on the map.


Spiegel Online has also released a travel guide to the world. The Google Maps based guide is a mixture of Spiegel travel reports, travel writer's travel tips and Spiegel readers' travel tips.

Die Welt Entdecken (Explore the World) allows the user to search a Google Map by location and to filter the travel suggestions shown on the map.  The filters include these different types of travel tips and advice and also categories, such as food & drink, where to sleep and places to visit.

Die Welt Entdecken is in German.

The Euro-Pop Map

At about this time every microformats.dk creates a Google Map of all the songs featuring in the annual Eurovision Song Contest. This year microformats.dk has been saved the task of mapping the best in Euro-pop because he has found that DR dk has already created a map.

The map features embedded videos of all the countries' entries into the competition. As ever the Eurovision Map includes some truly awful songs. My favourite is the Maltese entry. The ukulele doesn't feature enough in pop songs these days! And the song contains what has to be the best line from this year's entries,

"His name is Jeremy and he works in IT".

All kidding aside - I actually quite like this one. 

Find Free Deals with Google Maps

Belly is a universal loyalty reward program, which is available as an iPhone or Android app.

To find nearby rewards the app's users can search on the Belly Locations Map. The map itself is simple and well designed, taking advantage of the Google Maps API Styled Maps feature, custom map markers and a nice marker clustering system.


8coupons also uses Google Maps to help you find all the deals currently available in your neighborhood restaurants, bars, salons, and stores. 8coupons collects deals from over 500 sources.


Coupon hunters can also use CouponCabin to find great nearby deals.

CouponCabin searches "tens of thousands of consumer emails, online forums, blogs, merchant sites each week and even the Sunday newspaper" to find the greatest local deals.

The Coffee Surfers Tour of Google Maps

Coffee company illy have created a beautiful promotional website in which photographer Gabriele Galimberti shares his experiences and photos as he tours the world and meets fellow coffee lovers.

The whole website is worth a visit at it features some great scrolling effects as well as Gabriele's photographs and interviews. The Tour Map is also worth checking out, especially for its stunning use of the Styled Map feature in the Google Maps API.

When you load the map be sure to mouse-over the individual map markers! When you roll over the markers the whole color scheme of the map style changes. Each marker even has its own uniquely colored map tiles.

Worldwide Drownings on Google Maps

Apparently drowning is the third leading cause of accidental death worldwide. In order to help spread information about the dangers of drowning The Global Drowning Tracker has created a Google Map to record instances of drowning.

The map includes a number of filtering options which allow the user to browse the drownings reported by age, gender and location. Users can report drowning incidents to the map via a short form or by a SMS text message. The Global Drowning Tracker hopes that "through awareness, recognition and action, drowning accidents can be eliminated, if not greatly reduced".

The Coffee Marketplace on Google Maps

The Coffee Locator is a really nice example of how easily it is to use the Google Maps API to create a unique and attractive map.

By adjusting the colors of the map tiles (using the Styled Maps feature) and by using a custom created map marker the Coffee Locator map manages to create a distinctive looking map that complements the design of the Coffee Locator website. The color of the map tiles and the addition of a compass rose overlay helps to create the overall look of a coffee-colored vintage map.

The Coffee Locator is an on-line marketplace where coffee retailers can set up an e-commerce store and sell directly to customers worldwide. The map shows the locations of those coffee retailers that have signed up to the Coffee Locator on-line store. Users of the map can search for coffee retailers by location and click through to view and buy coffee and coffee related products.