How to create a Building Height Map

It is now very easy to create a building height map in just a few short steps using Mapbox.

This week Mapbox announced that their Mapbox Streets v7 vector tiles now include building height data. This means that you can use Mapbox Studio to style buildings on Mapbox Streets v7 by the height of the buildings. In other words you can color building footprints on a map to create a building height map.

Here's How

1. Open Mapbox 'Streets' in Mapbox Studio.
2. Select the 'Building' layer.
3. Under 'Style' change the color of the building footprint.
4. Under 'Select Data' add two filters to define the range of the building heights you want to be this color.

In the screenshot you can see I've chosen to color all buildings with a height greater than 0 and less than 6.

That's it! You should now have a map that colors all the building footprints with a height under 6.

But you why stop there. You can also add different colors for buildings with different heights.

5. Duplicate your 'Building' layer.

6. In your 'Building Copy' layer change the two filters you added above to 'height is less than 16' and 'height is greater than 5'.

7. Change the color of the building footprint to a different color than you chose for buildings under 6.

You now have a map with two different colors for buildings with heights from 0-5 and buildings with heights 6-15.

Of course you don't have to stop there either. You can carry on duplicating your 'Building' layer creating different colors for buildings with different height ranges.

Here is my completed Building Heights Map. In my map I've deleted every layer apart from my styled building layers. If you want street names and /or other map features there is no reason why you should delete these layers from your map style in Mapbox Studio.


Now you have your finished map style you might want to give your map users some controls to filter the buildings shown on the map by building height. This is very easy to do using Mapbox's setPaintProperty function. In this Change a layer's color with buttons map demo you should be able to see how you can create buttons to turn your different building height layers on and off. You could create buttons which switch the colors of your different layers between the map background color and the color you assigned to each layer in Mapbox Studio.

Alternatively you could allow your users to pick the color of each building height range for themselves. I used Mapbox's 'Change a layer's color with buttons' demo map and just dropped in my building height layers to create a map where users can pick their own colors.

Here is the completed Building Height Map in JSFiddle. Just use the drop-down menu to change the colors of the buildings by the range of building height.

8-Bit Maps of the World

Back in 2010 Bret Camper released 8-Bit City - New York, an interactive 8-Bit map of New York, which resembled the world maps used in 1980's computer games.

Since 2010 8-Bit City has expanded in scope and you can now view 8-Bit maps of 18 cities around the world. These 8-bit maps use data from OpenStreetMap which is then processed in a custom rendering engine, built by Brett, to create the map tiles for each interactive city map.


If you want to create an 8-Bit type map of a location which isn't featured in 8-Bit Cities you can use the 8-Bit Map Maker. This clever OpenStreetMap based tool can create an 8-bit game world map for any real world location.

Just enter your address into the map and you can create a little static game world map of your own neighborhood. The 8-Bit Map Maker also includes an option to download the created 8-Bit map of your location as a tiled map.


If you want to view a fully interactive 8-Bit map of the world then you should have a look at the Super Mario Map of the World. This interactive map was styled in Mapbox Studio to resemble the 8-bit maps used in the Super Mario computer games.

If you want to learn more about how the map data was styled to resemble an 8-Bit map then you can read the Designing a Super Mario Map with Mapbox Studio Classic on the Mapbox Blog.

How to Design a Pop Art Map

Back in May Katie Kowalsky, a cartography student at the University of Wisconsin-Madison, released the Lichtenstein Map. This pop art map was inspired by the artist Roy Lichtenstein, who was in turn inspired by comic art.

If you want to design your own Roy Lichtenstein inspired pop art map then you might want to have a look at the Mapbox Blog. In Designing the Whaam! Style in Mapbox Studio Amy Lee Walton discusses some of the design choices in making the Whaam! map style and how this was achieved in Mapbox Studio.

The map features a limited color palette of primary colors, thick black outlines, a 'Ben Day' dot texture and highway shield starbursts. All of which were chosen to emulate Roy Lichtenstein's comic inspired paintings. The tutorial is also a nice introduction to some of Mapbox Studio's features, as it walks you through how to replace and position highway shields and how to define the transitions between zoom levels

Vintage Map Styles - Remix Edition

Earlier this month Mapbox unveiled a new vintage map style created with Mapbox Studio. You can learn more about Mapbox's Vintage map and how it was created on the Mapbox blog.

The map uses background textures and bathymetry data to replicate how many vintage maps used detailed styling on the oceans surrounding bodies of land. The Vintage map also uses a color scheme designed to mimic the worn discolored paper of many antique vintage maps.


Jonah Adkins was inspired by the Mapbox Vintage map style to create his New Map of the United States (Github). You can view the map itself live here. Jonah is also responsible for the equally pretty Back 2 School interactive map. The Back 2 School map style is based on an old map of North America that Jonah found in Charlottesville.


Another remix of the Mapbox Vintage map style has been created by Nathan McKinley. The New Zealand Vintage Map style is based on an old Japanese map of New Zealand. I particularly like the interactive map insets of Wellington and Auckland on Nathan's map.

Vintage Map Styles.

This month we have been treated to two new vintage map styles.

Two weeks ago Thunderforest released a new Pioneer map style inspired by early American railroad maps. Thunderforest's new Pioneer map tiles are based on their Transport vector map tileset. The Pioneer map uses "Western fonts, verdigris buildings and a limited colour palette" to replicate the style of early railroad maps.


Yesterday Mapbox unveiled their own vintage map style. Mapbox's Vintage map style was created in Mapbox Studio and the Mapbox blog has a useful post on how the map was created.

The map uses background textures and bathymetry data to replicate how many vintage maps used detailed styling on the oceans surrounding bodies of land. The Vintage map also uses a color scheme designed to mimic the worn discolored paper of many antique vintage maps.

Back to School Map Style

Back in the day a large map of the world adorned nearly every classroom wall.

Jonah Adkins has recreated the style of one of these classroom maps with his Back 2 School interactive map. The Back 2 School map style is based on an old map of North America that Jonah found in Charlottesville. The map uses elevation data from ETOPO, which is shaded on the map to recreate the topographical style of the original map.

The map itself was styled in Mapbox Studio. You can view more interesting map styles created with Mapbox Studio in Mapbox's new Mapbox Studio Gallery.

Map Styling in the Browser

I received my beta access to Mapbox Studio today. This means I haven't had a lot of time to familiarize myself with the new, non-CartoCSS, based Mapbox Studio. Luckily you don't need a lot of time, as the new Mapbox Studio is a breeze to use.

Mapbox Studio gives you complete control over the design of your 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. If you want to see what is possible with Mapbox Studio then have a look at Six of the Best Mapbox Studio Styles.

The biggest drawback to (what Mapbox are now calling) Mapbox Studio Classic is that it relied on CartoCSS. CartoCSS does allow you to have amazing control over the design of your maps. Unfortunately it has a quite a steep learning curve.

The new Mapbox Studio requires no knowledge of CartoCSS. In fact it really is unbelievably easy to use. Open up the new Mapbox Studio in your browser and you can start designing your new map style straight away. Mapbox Studio does come with 43 guides to help you design your maps but you can easily start using Studio from the get-go, without having to pour through the guides beforehand.


Unfortunately Mapbox Studio is still invite only. If you haven't received your invite yet then you can prepare yourself by playing with Mapworks. Mapworks is a browser based utility for styling OpenStreetMap data for static maps.

Mapworks is like a pared down version of Mapbox Studio, which allows you to save you data as a PNG or SVG static image file. Compared to Mapbox Studio, Mapworks has a much more limited range of map features which you can style. You can't style the map labels and you can't add your own data to the map. However if you need to create a static map then Mapworks is a great utility to help you create a uniquely designed map.


If you are still using the Google Maps API then you can use Google's Styled Maps Wizard. The wizard allows you to adjust the colors of individual map elements and create the JSON code that can then be used with the Google Maps API.

You can also use Google Maps Colorizr to create map styles for the Google Maps API. Google Maps Colorizr also allows you to changes the colors of map features in the browser and cut & paste the resulting JSON code for your completed map style.

Where's Voldemort?

CartoCSS in Mapbox Studio includes a handy option to replace town names on your map with any text of your choice. I thought that I could use this option to change some random towns on my Harry Potter themed map with names used in J.K. Rowling's series of novels. For example,

[name_en='Bracknell'] {
    text-name: '"Little Whinging"';
}

turns the name of the town of Bracknell in England to 'Little Whinging'.

It then occurred to me that I could use this function to add textual clues to the map and create a little treasure hunt. For example,

[name_en='Alnwick'] {
    text-name: '"Hogwarts (search in Budleigh Salterton)"';
}

changes the town name of Alnwick to 'Hogwarts' and also provides a clue to the map user that they should search in 'Budleigh Salterton'.

By adding a number of textual clues to my Harry Potter themed map I have been able to create a little Where's Voldemort map. Follow the clues on the map and you can help Harry Potter find the location of 'he who can't be named'.

The clues are very easy (to be honest they aren't really clues at all but simple instructions). When I get some time I might try to think up some riddles to solve in order to make this treasure hunt a little harder. For now the map can be viewed as an example of how you can create a map treasure hunt game using Mapbox Studio.

My Harry Potter themed map style is almost completely copied from Mapbox's new Lord of the Rings map style. All I've really changed is the map font and town shields (switched from the 'one ring' to a wizard's hat).

I've also added a number of map markers to the map, which show some of the UK locations used in the Harry Potter series of films. I tweaked the Leaflet.js css style a little on the map to provide a transparent border around the marker pop-ups. In my imagination this equates to Harry Potter's cloak of invisibility.

The Lord of the Rings Map Style

Mapbox has released a new map style with a Lord of the Rings theme. The LOTR Theme map includes many of the features which you would expect in a fantasy map, including mountain symbols, a rune-ish looking font and textured map tiles. The map even includes multiple locations where you might be able to find the 'one ring'.

If you want to use the LOTR Theme map style the CartoCSS and assets are available on GitHub. You can read more about how Mapbox created the LOTR Theme style on the Mapbox blog.

The Marauder's Map - Adding Labels

The Marauder's Map is my latest pet project. It is really just an excuse to play with Mapbox Studio. I decided that if I was going to learn how to design maps with Mapbox Studio and CartoCSS then a Harry Potter themed map was as good a project as any.

Images of the Marauder's Map used in the Harry Potter movies gave me the two basic colors used in the map for the map background and the building footprints. These are essentially the two layers that I started with.

They are defined in Mapbox Studio with:

Map {
  background-color: #cdad86;
}

#building {
 line-width: 1;
 line-color: #4d2a0f;
}

The map design in the Harry Potter movies seems to only include these two basic layers but I thought my map looked a little odd without roads so I decided to add some thin white main roads to my map.

#road {
   [class='main'] {
    ::case {
      line-width: 1;
      line-color: #fff;
    }
    ::fill {
      line-width: 1;
      line-color: #fff;
    }
  }
}

Next I really wanted to add some Harry Potter themed labels to the map. To start with I decided to switch out town and city names with either 'Wizards', Muggles', 'Squibs' or Mudbloods. Luckily Mapbox Studio allows you to replace the real names of towns and city's with any text. So all I need to do was replace the place names of all cities, towns, villages and neighborhoods with one of my four replacement words. So, for example, in my Marauder's Map all cities get re-labelled 'Muggles' ,

#place_label[localrank<=2] {
  [type='city'][zoom<=15] {
   text-name:  'Muggles';
    text-face-name: 'Gothic Ultra OT Regular';
    text-fill: #4d2a0f;
  }

To populate the map with more Harry Potter themed labels I decided to do something similar with a number of other Points of Information on the map. I therefore changed the names of all stations to 'Hogwarts Express', all schools to 'Hogwarts', all parks to 'Quidditch', all cafes to 'Luchino Caffe', all bars to 'Hog's Head' and all fast-food restaurants to 'Apothecary'. e.g.

#poi_label[maki='school'] {
  text-name: "'Hogwarts'";
  text-face-name: 'Gothic Ultra OT Regular';
  text-fill: #4d2a0f;
}

I could carry on adding more Harry Potter themed labels for other Points of Information but I think this would end up making the map a little too crowded.

To avoid this overcrowding it is possible to define the zoom levels at which labels appear. You can see above how the 'Muggles' place name for cities disappear from the map as you zoom-in past zoom level 15 on the map ( [type='city'][zoom<=15]). I added a similar zoom level for some of the other labels so that they only appear at different zoom levels e.g. bars (Hog's Head) will only appear at zoom level 16 and higher (zoom>=16).

The Marauders Map

I was watching Harry Potter and the Prisoner of Azkaban last night and it occurred to me that I still haven't seen a good interactive version of the Marauders Map. I had a couple of hours free this morning so I decided to give it a go.

I'm not entirely happy with my Marauders Map but I thought I'd share it any way. I styled OpenStreetMap map tiles using Mapbox Studio. Looking at images online of the Marauders Map used in the Harry Potter films it seems to me that the map basically contains just place labels and building footprints.

So my Marauders Maps also has building footprints and map labels, colored as close to the original as possible. I also changed the label font to something which I thought looked suitably wizardry.

To animate a marker on the map I used the Leaflet.AnimatedMarker plugin. For the footprint marker I used an icon from the Map Icons Collection. If I get a little time I'll update the marker to include two feet (at the moment I seem to be tracking a one legged wizard, hopping around London).

The map isn't great. I need to refine the styling a little more and improve the map icon. It would also be nice to work on the animated marker so that the marker rotates to face the direction of movement.

The Pop Art Map

Here's a new map style to add to your collection of favorite base maps. I think its safe to assume that the Lichtenstein map is inspired by the famous pop art painter and not the German municipality of the same name.

The map emulates Roy Lichtenstein's use of thick outlines, bold colors and copious dots. It's also the second map I've seen to successfully use the much maligned Comic Sans as the font for the map labels.

The map is the work of Katie Kowalsky, a cartography student at the University of Wisconsin-Madison. It was designed in Mapbox Studio, the popular map design tool, which was also used to create the The Woodcut Map, Space Station Earth, The Pencil Map and the The Pirate Map.

The Blueprint to a Better Map

Blueprinted is an attractive map style designed to resemble cyanotype reproductions of technical drawings. Cyanotype is a photographic printing process, which was at one time particular popular with engineers, that produces a cyan-blue print - commonly known as blueprints.

This attractive Blueprinted map stlye was created by Lauren Ancona using Mapbox Studio. If you like the style you can fork the repository for the Mapbox Studio files on Github.


If you don't have the time to create your own map style in Mapbox Studio you can always use one of the map styles demonstrated in this Map Tiles for Leaflet collection. All of which (to the best of my knowledge) are available under a Creative Commons license.

The City Map Quiz

How well do you know your city street grids? Before settling down to a new week at work you should take a few minutes to enjoy the Washington Post's Street Map Quiz.

The post has created a number of maps showing only city streets and no other features. Your task in the quiz is to try and name each city map from only the pattern of its roads. Some of the city maps are easier than others. However, even if you don't recognize a map, you still have a chance of picking the correct city from the choice of four answers.

If you like the maps in the quiz and want to create your own city street map the Washington Post has linked to Jim Vallandingham's tutorial on how to create 'street only' maps using Mapbox Studio.

Super Mario World

If you've ever wondered how Mario and Luigi manage to navigate so effortlessly around the Mushroom Kingdom and Dinosaur Land then you need to check out this Super Mario map from Duncan Graham. This interactive map reimagines the world as an 8-bit map in the style of Nintendo's classic game, complete with golden coins and mushrooms.

Accompanying the map is a great 'how-to' guide on how the map was created with Mapbox Studio. It's worth reading the article if you want to learn about importing land or water source files into Mapbox Studio, how to add custom elements to your map and how to order layers.


If vintage computer games don't float your boat then you might prefer this Dot Map by Saman Bemel Benrud.

You've probably seen dot maps before which visualize data on a map using differently sized or differently colored dots. This map takes that concept to the next stage by representing the underlying map features data as dots.

The result might not be much use as a map. But as a beautifully abstract interactive dot painting it works just fine.

The Spookiest Maps

On Friday I was so spooked out by the impending Zombie Apocalypse that I completely forgot to post about a couple of other Halloween flavored maps. So why not celebrate this bonus cartographic Halloween bonanza with this scary Mapbox Halloween Map.

This Mapbox Studio created map uses an appropriately themed color-scheme, with pumpkin colored seas and darkly ominous land features. Town and city map labels have also been updated to make them sound a little more haunted. You might also notice a few changes to some of the usual map icons.


Mapzen's 3d Building Map also features a rather scary Easter egg (or should that be Halloween ghost). Zoom in on New York on the map and you just might find a few pacmen ghosts hiding on the city streets.

Now who you gonna call?

Mapbox Studio, More Kadinsky than Matisse

Last week Mapbox released the successor to TileMill, Mapbox Studio. Studio allows you to fully control the design of your base-map layers and create your own beautifully designed custom maps.

Today I managed to have my first proper look at Mapbox Studio and I have to say it is a very impressive and powerful design tool.

For my first map design I thought I would use Mapbox Studio to try and create a map in the style of a Matisse cut-out painting, using the color palette from his painting 'The Snail'. I was helped greatly in this task by a post today on the Mapbox blog, Design Control with Regular Expressions in Mapbox Studio. This post helped me understand how I could color different building types by using their OpenStreetMap id.

The resulting map is a little more Kadinsky than Matisse, but I like it anyway.

I haven't had time to explore all of Mapbox Studio's features yet, But color me impressed - using a Matisse color scheme.The Mapbox Studio is a joy to use. I'd never used TileMill before, yet I managed to create the above map style in less than 30 minutes.

The Mapbox Studio homepage has all the documentation that you need to get started designing your own custom maps. So far I've only completed the 'Style Quickstart' tutorial. It is very easy to follow and provides a great introduction to getting started with Studio. It has certainly whetted my appetite and I can't wait to start really exploring all the features of Mapbox Studio in a little more depth.