Monday, March 30, 2015

Mapping the Age of St. Louis' Buildings


One of the biggest mapping trends last year was the building age map. The rush to map the age of all the world's buildings seems to have died down a little this year and it has taken nearly three whole months for the first building age map of 2015 to emerge.

So, without further ado, may we introduce to you the St. Louis City Building Age Map. Building footprints on the map are colored to show the age of construction. You can also mouse-over individual building plots on the map to view the building's year of construction.

Here are just a few other building age maps from around the world:

Rocking the Tippecanoe


Tippecanoe is a tool for building vector tilesets from large collections of GeoJSON features. Input GeoJSON into Tippecanoe and it will give you back a vector mbtiles file. It is a very efficient way to visualize very large data-sets on an interactive map with minimal impact on performance.

You can see the results of using Tippecanoe in this map of ADS-B pings in and around Los Angeles International Airport. Automatic Dependent Surveillance-Broadcast (ADS-B) is one of the ways that aircraft report their in-flight positions. It is one of the technologies that make aircraft tracking maps like Flightradar24 possible.

I'm not sure how many ADS-B pings the Planes Over LA.2 map is showing but it's definitely enough to be able to clearly make out the flight paths in and out of Los Angeles International Airport.


Tippecanoe was originally developed by Eric Fischer at Mapbox to map 6 billion geo-tagged Twitter messages. The 6 Billion Tweets Map is a great visualization of Twitter's global appeal, showing where Twitter is popular and also where in the world the social network has yet to gain traction.


The Tippecanoe tool was also used by Mapbox to create the Superpowered 1.5 Million Walks, Runs, and Bike Rides map. This map overlays Runkeeper routes on top of a Mapbox powered map of the world.

The map includes some quick links to jump to the maps of a few major cities around the world and you can also pan and zoom the map to view the popular running routes at any location in the world. If you zoom in on the map you can view the recorded tracks right down to sidewalk level.


Tippecanoe was also used to help create A Month of Lightning, an interactive map of all 80,305,421 lightning strikes that occurred across the globe in May 2013.

Jordan Rousseau was able to use Tippecanoe to process the May 2013 lightning data from Weather Decision Technologies. The result is this impressive Mapbox map which allows you to view over 80 million global lightning strikes from just one month. You can read more about how the map was made in Jordan's blog post, Visualizing a Month of Lightning.

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.

Creating Seamless Street View Transitions


Perspective Scaling is a demonstration of how to create seamless transitions between adjacent 360 degree panoramas.

You have probably noticed the jumps that occur when you walk along a street in Street View on Google Maps. Google tries to lessen this jump-cut by fading out the current panorama and fading in the next panorama. However there is still a noticeable jump as you move from one Street View to another.

Perspective Scaling uses the depth maps of the panoramas to apply a more seamless transformation as you move from one panorama to the next. The result in the demonstration is very impressive.


I have no idea if the Perspective Scaling process could actually be applied to Google Maps Street View. I do know that you can retrieve the depth map from Google Maps Street View using the GSVPanoDepth Street View depth library. You can see the GSVPanoDepth library in action in Callum Prentice's Street Cloud and Street Cloud Flow.


The closest I've seen of a seamless journey along a street is 360 Langstrasse. 360 Langstrasse is a truly impressive website which allows you to move up and down Langstrasse by simply scrolling up & down the page. However 360 Langstrasse doesn't use panoramas. The effect in this case is actually achieved by using a video. As you scroll up and down the page you are in fact just moving between the different video stills.

Industrial Accidents & Strikes in China


The China Labour Bulletin has launched an interactive map to monitor work-related accidents & deaths in China.

The new Work Accident Map is regularly updated and the data recorded can be used to analyse work-related accident trends over time, in different industries and in different regions of China. The map includes a number of options to filter the results shown on the map by date, industry, type of accident and province.

The China Labour Bulletin also monitors industrial action in China. The Strike Map shows the location of industrial disputes across the country. The map can be filtered by industry, location and by the number of participants involved.

Sunday, March 29, 2015

Magnificent Maps of the Week


Our Tam is an amazing WebGL powered 3d map of Mount Tamalpais in Marin County, California. Using the map you can rotate around the mountain and zoom in and out on features with incredible speed. If you view the site in a non-WebGL browser the map degrades gracefully to a 2d Google Map.

The map features a number of markers which allow you to explore stories, photos and videos of the mountain left by other users. You can add your own stories, photos or videos about Mount Tamalpais by clicking on the map and selecting the 'Leave s Story' button.


A Month of Lightning is an interactive map of all 80,305,421 lightning strikes that occurred across the globe in May 2013.

Mapping 80 million data points on a digital map is not an easy task. However when Mapbox's Eric Fischer created the Most Detailed Tweet Map Ever he also built & released an open sourced tool called Tippecanoe for making vector tiles from large data sets.

Jordan Rousseau was able to use Tippecanoe to process the May 2013 lightning data from Weather Decision Technologies. The result is this impressive Mapbox map which allows you to view over 80 million global lightning strikes from just one month. You can read more about how the map was made in Jordan's blog post, Visualizing a Month of Lightning.


There are many ways to decorate your house on Street View. By far the most beautiful is Sakura.

Sakura allows you to visualize how your house would look if you could transport it to Japan in the springtime, just at the moment when the cherry blossom is in full bloom. If you have a WebGL capable browser you can share your location with Sakura and see a Street View of your own home covered in pink cherry blossom.

If you're a fan of Street View then you should also have a look at Teleporter, a fun application which will transport you to random locations around the world on Google Maps Street View. 

This week I was also very impressed with two map tools. Street Patterns is an ingenious tool for creating SVG images from OpenStreetMap data. In truth Street Patterns is actually a very detailed tutorial about how you can use Overpass and Turf to develop your own SVG map graphics. However the tutorial includes a number of map wizards which automate every stage of the process.

Another great tool is turf.jsparty. Turf Party is a great online editor which allows you to play around and learn Turf in your browser without having to set up the boilerplate code.

Turf,jsParty consists of two main sections, an editor and a Leaflet map. The editor allows you to choose from a number of common turf operations. You can edit and play around with the examples in the editor and view your edits directly on the Leaflet map. Of course you don't have to use the provided examples and can test your own turf operations by entering them directly into the editor.

Saturday, March 28, 2015

Mapping the Ocean Floor


NOAA has created an Esri map of Gloucester Harbor which allows you to explore the ocean floor. Peer Beneath the Waves uses the Esri Story Map Spyglass feature to allow you to peak beneath NOAA's nautical chart of the harbor and view the seabed beneath the waves.

You can drag the Spyglass around on the map to explore NOAA's hydrographic survey data from Gloucester Harbor. The map also includes a number of markers to help you learn more about the seabed in the harbor.

Canvas Masking in Leaflet


Democracy Street is a really interesting map which reveals the etymology of UK streets that have been named after UK politicians. One clever design feature of the map is the use of a masking effect to highlight interactive areas on the map.

All of the featured roads & streets on the map are colored yellow. However the yellow roads on the map don't show up so well when the map is zoomed out. To overcome this Democracy Street has used the leaflet.maskcanvas plug-in to highlight the areas around each featured road, ensuring that the interactive roads & streets can be easily spotted, even when zoomed out on the map.

The leaflet.maskcanvas plug-in is designed to show large data-sets on a Leaflet map. The plug-in effectively masks areas on the map except for the data points which you have added to the map. The leaflet.maskcanvas plug-in on Github includes an example map which uses the masking effect to show the radius around Berlin stations. The demo allows you to adjust the radius of the mask by any number of meters.


You can create a similar effect on Google Maps by using Vasile Cotovanu's polygon masking library. Geomask allows you to simply draw around an area on Google Maps and generate any shaped polygon to create a neat masking effect. You aren't restricted to one area and you can highlight as many areas as you want on the map.

The Democratic Road Map


Democracy Street is a new UK map, partly sponsored by the UK parliament, which is attempting to map the influence of democratic history on the country's place-names. Using the map you can discover which streets in your neighbourhood have been named after a politician or someone else who has been important in some way to the country's democratic history.

Streets and roads named after an individual important to UK democracy are shown on the map in yellow. These streets are further highlighted on the map by a larger white circle lighting up the underlying Stamen toner map tiles. If you select a yellow marked road on the map you can learn a little more about the person whom the road was named after.


Democracy Street owes more than a passing debt to the German map, Straßenkrieg. Straßenkrieg is a fascinating map revealing the history behind the many Berlin street names which have a military connection. The map highlights Berlin streets which have been named after battles, important military leaders or German army regiments.

All the military connected roads are highlighted on the map with colored lines. The colors indicate the historical period associated with the road's name, e.g. Prussian, the Weimar Republic, National Socialism or post-WWII. If you select a road on the map you can read a brief explanation of the military relevance of the road's name and click-through to read a more detailed account of the person or battle memorialized.


In turn Straßenkrieg was more than likely inspired by the awesome History of San Francisco Place Names. The History of San Francisco Place Names is a fascinating insight into the history of the names behind the city's landmarks and streets.

Click on any of the streets or landmarks, marked in blue on the map, and you can find out who it was named after or where its name originally came from.

Friday, March 27, 2015

There Are 3D Maps - Then There's Our Tam


Our Tam is an amazing WebGL powered 3d map of Mount Tamalpais in Marin County, California. Using the map you can rotate around the mountain and zoom in and out on features with incredible speed. If you view the site in a non-WebGL browser the map degrades gracefully to a 2d Google Map.

The map features a number of markers which allow you to explore stories, photos and videos of the mountain left by other users. You can add your own stories, photos or videos about Mount Tamalpais by clicking on the map and selecting the 'Leave s Story' button.