Wednesday, August 27, 2014

How to Tell Stories with Maps


School of Data has published a good round-up of narrative mapping platforms. The article includes a few examples of good story maps and explores some of the mapping libraries which can be used to create interactive maps to annotate or narrate a story.

Seven Ways to Create a Storymap reviews popular narrative mapping libraries such as Knight Lab's StoryMap JS, Esri StoryMaps and CartoDB's Odyssey.js. It even mentions my own story map demo created using waypoints.js with Leaflet, JourneyMap.

One of the examples listed in the School of Data article is new to me. LeafletPlayback is a very neat Leaflet library which allows you to animate GPS Tracks, in the form of GeoJSON objects, on a Leaflet map. You can see the library in action on this example map, which animates markers along four separate tracks. The map includes video type playback controls which also allow you to control the playback of the animated marker tracks.

The LeafletPlayback library provides a great way for developers to animate a journey on a map. Using the library you can animate a marker along a polyline, with the marker's movement synchronized to a time-stamp in your GeoJSON object.

Tuesday, August 26, 2014

Sounds on Street View - The Game


Back in March I made a little demonstration map using the Web Speech API. The Speaking Map allows you to click anywhere on a Google Map to listen to the address clicked on being spoken by your computer. The Web Speech API isn't widely supported yet - so to hear the map talk you will have to use a compliant browser. In this case you will probably need to view the Speaking Map in Chrome.

At the time I did wonder if anyone else might use the Web Speech API to create a map which was a little more useful. Internet agency Netro has now created a Street View game using the Web Audio API. This game might not be any more useful than my little demo map, but it sure is a lot more fun.

In the game you are teleported to a Street View location somewhere in the world. The object of the game is to follow the audio clues to find objects nearby. The game is a kind of 'hot or cold' searching game, as you get closer to the correct destination the audio clues get louder. Go in the wrong direction and the sound becomes quieter.

The Day Google Street View Stood Still has a number of levels. When you finish a level you are told how many steps you have taken and how long it took you to reach the correct destination. If you make one of the top ten quickest times you can even add your name to the high-score table.

Hat-tip: Google Street View World

Dunkin' Donuts vs Starbucks


The Boston Globe has released a map of all the Dunkin' Donuts and Starbuck locations in the USA. In Dunkin’ Donuts Set for California Expansion the Boston Globe visualizes the dominance of each business in the areas where they were founded.

The map shows a higher density of Starbucks on the West Coast and a higher density of Dunkin' Donuts in the Northeast. However the map also shows how both companies are expanding across the country.

For this map the Boston Globe uses a similar approach to that taken in their recent Massachusetts Pedestrian Crashes map. Both maps include the option to explore hot-spots on the map, areas where the data shows interesting results. In the pedestrian crashes map the hot-spots option is used to explore and explain locations with abnormally high number of pedestrian crashes.

In the Dunkin' Donuts map the 'See hotspots' option takes you on a tour of some of the major cities and states to explore and examine the preponderance of Dunkin' Donuts and / or Starbucks outlets.

Source Maps and Supply Chain Mapping


These days more and more consumers care about the manufacturing conditions and the environmental impact of the physical products that they buy. They care about whether their manufactured goods are produced in safe working conditions and that the businesses pay a living wage.

Many consumers also care greatly about the conditions and environmental impact of the food and drink products which they consume. As a result of this consumer demand more and more companies are creating source maps. These are maps which show where businesses source the components for their physical products and where they source the ingredients for food and drink products.

French yogurt producers Les 2 Vaches has released a source map for their range of organic yogurts. This Google Map shows where all the yogurt ingredients are produced or grown. The map also shows where the ingredients are stored and prepared.

If you select a marker on the map you can click on the '+' icon to read more about the farm or company which produces an ingredient or product used in Les 2 Vaches. The map sidebar displays the ingredients used in the yogurt. If you select an ingredient the map highlights the companies and farms involved in producing the selected ingredient and a supply chain is displayed on the map to show how the ingredient makes it to the final product.


Businesses that want to create a source map can also use a narrative mapping platform, such as Esri's Story Maps or CartoDB's Odyessey.js. This is the route taken by T-shirt manufacturers Loomstate.

Loomstate has used Odyssey.js to create The Loomstate Difference, a narrative map which guides potential consumers through the manufacture of a Loomstate T-shirt, from the sourcing of materials to the finished product.

The map takes you on the production journey of a Loomstate t-shirt, from cotton farm to mill, from cotton to garment, from dying to printing, the map reveals the whole process of a t-shirt's manufacture.


SourceMap has being mapping product supply chains for a number of years. SourceMap is a crowd-sourced directory of supply chain and environmental footprint maps for thousands of different well known and lesser known products.

SourceMap can be a great resource for businesses, providing them with an easy way to create an OpenStreetMap showing where all their core materials are sourced. For consumers SourceMap provides a great way to research the supply chains of products to help them make more informed purchasing decisions.

Monday, August 25, 2014

Live Heat Mapping


Where Are All the CitiBikes is a real-time heat-map of the number of bikes currently available at CitiBike stations across New York.

Throughout a normal day bikes are constantly being borrowed and returned from CitiBike stations. This map uses data from CitiBike System Data to show the density of bikes at stations at the present time. Larger numbers of bikes at a station is shown on the map in red and a low number shows up as blue.


In Search of the Safest CitiBike Stations is another interesting visualization of New York's CitiBike scheme. This map shows the number of cycling related injuries around CitiBike stations.

The map presents a Voronoi diagram view showing areas around the closest CitiBike station. Each segment in the Voronoi diagram is then colored to represent the number of cycling related injuries reported between Jan 2013 and May 2014. You can click on the individual areas to view the total number of injuries reported.

The data itself does not relate to injuries suffered by CitiBike users but all cycling injuries reported to the police involving a Motor Vehicle. To date there have been no reported cycling fatalities from anyone riding a CitiBike borrowed bike.

Walk the Map


Here is another fun little Mapbox GL demo. The Walk Map allows you to navigate around a map using your cursor keys. That may not sound like a lot of fun but it is a rather neat demonstration of the Mapbox GL rotate event.

Using the up and down buttons you can move forwards and backwards on the map, while the left and right buttons allow you to rotate the map. The map rotation is fired by assigning a '+' or '-' value to the map heading every time the user clicks on the left or right mouse button.

This is the third Mapbox GL map I've seen since the introduction of Mapbox's new mapping library. You might also like to check out the Van Gogh Map (which uses images for map tile textures) and the birthplaces of Liverpool Football Club players map (which is a nice example of how to add markers and text labels).

The World of Fiction Mapped


LibrAdventures is a new Google Maps based literary atlas which allows you to explore locations across the globe in terms of their association with famous authors and works of literature.

Users can explore the literary atlas in a number of ways. You can search the atlas by individual author, by literary genre or by location. A good place to start exploring the atlas is the Index page, which provides a complete list of all the entries. The index can be ordered by author name, by year and by location.

Individual entries on the map provide detailed textual context and the option to view the location in Google Maps Street View. Many of the entries also provide YouTube videos or audio clips of adaptions of the literary texts discussed.


The LitMap is another intersting Google Map which allows you to explore the texts associated with locations around the world. The LitMap maps books by where the plots occur or the places that they are associated with.

The LitMap maps any kind of literature, both fiction and non-fiction, that can be associated with a specific geographic location. The LitMap includes an option for users to submit book locations to the map. 

The poet Robert Frost said that "All literature begins with geography". Poetry Atlas agrees and also believes that nearly everywhere on Earth, at some point, has had a poem written about it.

The Poetry Atlas has therefore created a Google Map to try and geotag as many poems as they can and also find poems for as much of the world as possible. If you know about a poem that isn't on the map you can e-mail it to Poetry Atlas and they will add it to the map.

For over seven years now Google Lit Trips has been plotting the character journeys undertaken in famous works of literature.

The site plots the journeys of characters and locations mentioned in a large number of literary texts. Google Lit Trips is designed with school students in mind. Each location plotted in an individual text includes information windows containing a variety of resources, including media, thought provoking discussion starters and links to supplementary information about the locations featured.

Sunday, August 24, 2014

Real-Time Earthquake Maps


It's been quite a day for big earthquake news, with two large earthquakes (magnitude 5.3 & 5.1) near the Bárðarbunga volcano in Iceland and an earthquake of 6.1 magnitude near American Canyon in California.

Perhaps unsurprisingly the USGS provides one of the best near real-time maps of earthquake activity. The Latest Earthquakes Map provides you with a number of options to view earthquake activity over the last 24 hours, the last week or the last month.

The map also allows you to overlay plate boundaries and US fault lines on the map.

The Ö-Files - Live Earthquake Map uses Google Maps and the Simile Timeline with a number of data sources to also provide a live map of earthquake activity around the world.

The map is updated every five minutes to show the latest reported earthquake and you can use the time-line to explore earthquakes over the last seven days. It is also possible to refine the results shown on the map based on the different data sources.

Another source for the latest earthquake activity is Stanford University's Quake-Catcher Network. The Quake-Catcher Network links participating laptops into a single coordinated network to detect and analyze earthquake activity.

Many laptops these days are built with accelerometers that are designed to protect your hard drive from damage. The accelerometer detects sudden movement and can switch the hard drive off so that the heads don't crash on the platters. The Quake-Catcher Network realized that they could create the world’s largest and densest earthquake monitoring system simply by using the data from accelerometers in the world's laptop computers.

QCN uses Google Maps to show the data collected from participating laptops and from participating desktop computers with USB sensors. The map also shows the latest USGS reported earthquakes.

The Maps of the Week


The Gaza War Map is a powerful visualization of the devastating effect of Israeli air strikes in Gaza. The map consists of a number of 360 degree panoramic Street Views taken in the Gaza Strip since the onset of the present conflict between Israel and Hamas.

You can navigate to each of the Street Views by using the thumbnail images or by selecting the markers on the map. As you pan around one of the custom Street View images a radar control on the map shows the direction of your current point of view. You can also right-click on a panorama to change the panorama's projection.


This week I also liked the Van Gogh Map, created with Mapbox GL and textures taken from Van Gogh paintings.

I originally posted the map because I thought it provided a neat example of how to add textures to map tiles in the new Mapbox GL. However the map seemed to strike a chord with Google Maps Mania readers and has been far and away the most viewed and shared map over the last seven days. For that reason alone it has to make it to this week's Maps of the Week round-up.

The map is also worthy of a second look. Since I wrote about the map on Thursday some work has been done on cleaning up the texture seams. 


If you like artistic looking maps then you might also like this Leaflet powered Fractal Map. Using the map you can pan around and zoom in on a number of beautiful fractal patterns.

The map includes a Leaflet hash library, which means that you can pan and zoom the map to find your favorite fractal patterns and then share the view by cutting and pasting the URL. The map is also a neat demo of using the Leaflet mapping platform with HTML5 canvas and Web Workers. You can explore how this is achieved on the map's GitHub page.

Saturday, August 23, 2014

Mapping the Minimum Wage


The Minimum Wage Map is a neat interactive map which allows you to compare the minimum and the average annual salaries (in a range of different occupations) of each U.S. state. If you mouse-over a state on the map you can view the state's minimum hourly wage rate, a yearly minimum wage rate and the average salaries of different occupations.

A number of South Eastern states have no state minimum wage law so the minimum wage in these states is $7.25, which is the federal wage baseline. A number of states also have state minimum wage rates set below the federal minimum wage. Employers in these states must also meet the federal wage baseline of $7.25. Washington has the highest minimum wage at $9.32, followed by Vermont on $8.73.

The map was created with Leaflet. Interestingly the map has dragging set to false - map.dragging.disable(); - which you don't often see implemented on interactive maps. This means that you can't pan around on the map. On this map the user really doesn't need to drag the map around, so disabling panning does seem a logical choice. If you click on the state the map automatically zooms in on the selected state. Clicking on the map again zooms out to show the whole of the United States.