Mapbox Story Maps

A very quick way to create an effective scroll-driven story map is to use Mapbox GL. The advantage of using Mapbox GL over some other mapping libraries is that Mapbox GL allows you not only to zoom and pan the map but to rotate the map to provide different perspectives on your featured locations

If you want to create a Mapbox GL story map there is also the added advantage that Mapbox has provided a great template in their list of 'example' maps. The Fly to a location based on scroll position map in the Mapbox GL examples provides a neat demo of the possibilities of a Mapbox GL story map. All you have to do to create your own story map is copy & paste the provided code and change the content to suit the story you want to tell.

For example, this week the Baltimore Sun used Mapbox' example map to quickly create a story map to report on the devastating flood which hit Ellicot City on Saturday evening. The Ellicot City Flood Map provides a chronological mapped timeline of the evening's events and the damage caused by the flood.

As you scroll through the chronological narrative the currently active information boxes become visible and the map pans, zooms and rotates to provide aerial views of the areas being discussed in the timeline.


Another example of a Mapbox GL story map is Birmingham Eastside's Gentrification in Birmingham’s Jewellery Quarter. Birmingham Eastside has used the Mapbox GL demo map to create a mapped guide to how gentrification is affecting Birmingham's Jewellery Quarter.

As you scroll through the map you are taken on a tour of the neighborhood, highlighting some of the biggest changes in the area. The Gentrification in Birmingham's Jewellery Quarter map also features map markers which provide another level of interactivity to the map. These markers provide additional information and media - such as audio recordings of interviews with some of the individuals featured in the side-panel content.


Mapbox have also used their own story map format to create a map of the intriguing case of Robert Durst. Durst was arrested on a first-degree murder warrant. If convicted he could face the death penalty.

Following the Life and Death of Robert Durst plots the key movements and actions of Robert Durst since his first wife 'disappeared' three decades ago up until his arrest in New Orleans. As well as the scroll-driven narration and up-dating map 'Following the Life and Death of Robert Durst' uses map markers and polylines to track Durst's movements around the country and to connect all the featured locations together.

Maps in the Unity Game Engine

Google today released a pretty amazing game which allows you to fly over the Himalayas, run up mountains and skate upon icy lakes. Verne - The Himalayas uses Google Map's 3d imagery to create a game world which you can explore as a Yeti named Verne.

The game uses Google Map's 3d imagery inside the Unity Game Engine. By coincidence Mapbox today published open-sourced code on Github which allows you to use Mapbox maps within Unity. If you want to use real-world locations in your Unity created games or create the next Pokemon Go type game then you might want to check-out the brief instructions to using the Mapbox plug-in for Unity on the Mapbox blog.

South Africa's Political Killings

Today South Africans are voting in the 2016 Municipal Elections. The ANC has dominated the political landscaped in South Africa since the end of Apartheid. However the poor economy and corruption scandals centered on president Jacob Zuma could seriously damage the ANC's performance in today's election.

The corruption charges against the South African president are not the only problems that the ANC have faced in the run-up to today's election. Over the last three week's a number of mostly ANC politicians have been murdered. More than a dozen politicians have been killed and not one case has been solved.

South African newspaper the Mail & Guardian has mapped all of this year's political assassinations. The Mail & Guardian has used the Esri Story Map template to map the killings. This means that you can explore each assassination by selecting the markers on the map or you can use the forward and back buttons on the map to progress through the killings one by one.

The name of each politician, their political party and the date of the murder are given for each assassination. Where the Mail & Guardian have reported on an assassination a link is also provided to the newspaper's report.

Living, Breathing Cities

Earlier this year Mark Evans created a wonderful mapped visualization of commuting flows in the USA. These hypnotic animated maps show workers traveling to and from American cities. Mark has now created a similar visualization showing the commuting flows in English & Welsh cities.

The Commute Map is an animated map showing where people commute to work from into U.S. cities. The maps don't show the actual journeys that commuters make but give a great sense of how town and city centers suck in commuters from surrounding suburbs. As the animations play out on the map you can see the movement of workers into the cities in the morning and the movement home again in the early evening.

Mark's new Commute Map of England & Wales replicates the U.S. map, only this time it shows where people commute from into towns and cities in the UK. Using the two drop-down menus above the map you can select a region and then an individual city or town.

After you select an individual location the map animates the commuting flow into the city in the morning and then the commuting flow as workers return home in the evening. The four locations where the most workers commute from are indicated by the colored moving dots on the map.

A list below the map also shows the locations where people commute from and the numbers that commute from each location.

Life in a Refugee Camp

It is probably impossible to accurately describe the despair of life in a refugee camp. However, with the emergence of dangerous politicians in the west who are willing to exploit concerns about immigration, it is becoming more and more important that journalists do try to communicate what life is like for those trying to flee country's ravaged by war and terrorism.

This American Life and Submarine Channel should be applauded for their fantastic efforts to describe refugee camps and the lives of those forced to live within them.

This American Life sent a team of of architects and engineers to map and describe a number of refugee camps in Greece. Greece is home to over 57,000 refugees. Most of them now live in over 40 refugee camps dotted around the country.

Hockey & Baseball Refugees is an online documentary exploring the situation faced by refugees living in Greek refugee camps. These camps are housed in an abandoned beach resort, an Olympic baseball stadium, an air force base, a highway rest stop and the grounds of an old psychiatric hospital.

The Hockey & Baseball Refugees documentary uses a collection of aerial views, oblique views and architectural drawings to provide visual tours of the five featured camps. These visual representations of the camps are accompanied by photographs and videos documenting the conditions in the camps. The accompanying text includes descriptions of life in the camp and firs-hand accounts from some of the refugees forced to live in them.


Domiz Refugee Camp in Iraqi Kurdistan was established in April 2012 to host Syrian Kurds. The camp was originally built to house 38,135 people. It is currently home to 57,953 refugees. As the number of refugees has grown the camp has gradually transformed from a temporary refuge into a makeshift town.

Refugee Republic has created an online documentary about the camp, using the Leaflet.js mapping platform to turn a hand drawn map into a fully interactive map. You can click on the colored roads and arrows on the map to learn more about life in Domiz Camp. The tour includes videos of the camp, information on how the camp and shelters were constructed and the stories of some of the refugees now living in Domiz Camp.

Let the Games Begin

Fiasco Design has created a custom made interactive map for the 2016 Rio Olympic Games. This pictorial map is dotted with information about the major sporting venues and interesting facts about some of Rio's major landmarks.

Rio 2016 also contains a couple of very strange little games. The first game is a gruesome treasure hunt. The dismembered body parts of a man have been hidden around the map. Your job is to help the police by discovering the hidden limbs. The other game involves finding a former Guantanamo Bay prisoner who is hiding somewhere on this map of Rio.

Aside from the poor taste and judgement of these two treasure hunt games the map does include some nice touches. I like the animated features on the map, such as the cable cars, flying parrots and the yachts in the sea. I also like the use of sound effects, which are attached to some of the map markers.

50 Years of Hurt

Fifty years ago England won the World Cup. To mark this 50th anniversary of England's one and only success in major competition Esri has released a 3d map of the original Wembley Stadium. The map also includes a visualization of Opta's data of the 1966 World Cup final between England and West Germany.

They think it's all over ... It is now! includes a number of quick links to view important moments in the game. These key moments include one showing the actual view of the Russian linesman for Geoff Hurst's controversial second goal. Geoff Hurst's shot crashed off the underside of the crossbar and bounced down on or just over the goal-line. The Russian linesman judged the ball had crossed the line and awarded a goal. Most Englishmen think he got the decision right. Most Germans think he got it wrong.


The map also includes a visualization of every single pass made in the game. When you overlay every single pass made in the game on top of the Wembley pitch it is a little difficult to pick out any single moment out within the noise of the data. The map therefore also includes an interesting 3d column view of the game. The kick-off is shown at the bottom of the column and the game progresses as you move up the vertical column.


You can read more about how the map was created and how the data is visualized on the map's Description page.

Virtual Reality Mapping

I've been thinking a little bit today about how to display maps in virtual reality. Greenpeace's use of a map superimposed on top of a 360 degree panoramic video in Gestrandete Wale points to how maps can be superimposed on top of a cube map in a VR scene.

Another method might be to place a map on the 'ground' in a 360 degree panorama. In other words a user interaction of looking down in a VR environment map can be used to reveal a map of the VR world. You can actually see an example of this in a new promotional website for the movie The Legend of Tarzan.

When you share your location with The Legend of Tarzan you enter a 360 degree panoramic jungle scene. This scene includes superimposed links to visit other interactive content about the movie. However, if you look down at the ground, you can view an interactive map which shows the nearest cinemas to your location, where the movie is currently showing.

I suspect that this Legend of Tarzan website might be UK only. If sharing your location with the site doesn't work then try entering a UK postcode instead ('RH10 5LU' worked for me).

Creating a panoramic cube map is now fairly straightforward using WebGL. Adding a static map to a panoramic scene should also be very simple. It can be done by simply superimposing a static map on top of one of the six images which make up your panoramic environment. Adding an interactive map to a panoramic scene will take a little more work.

Optimal Road Trips

You may remember Randy Olson from such maps as The Optimal Road Trip Across the U.S. and The Optimal Road Trip Across Europe. Now Randy is back with his latest explosive map  - The Optimal Road Trip of U.S. National Parks.

Randy Olson has made a bit of a hobby out of mapping optimal road trips. Randy's 'optimal road trips' are maps which show you the shortest routes around a number of different destinations - otherwise known as the traveling salesman problem.

To mark this month's centenary of the National Park Service Randy has created an interactive map which shows the optimal route around America, taking in all 47 national parks within the contiguous states. The Optimal Road Trip of U.S. National Parks shows a 14,498 mile route around the U.S. which allows you to visit all of the National Parks in the shortest distance. Randy estimates it will take you around two months to complete.

Randy's maps have also inspired others to create their own optimal road trips. For example, Apoorv Anand has created a map providing an Optimal Road Trip Around India. Apoorv's map shows the shortest route around India which visits all 55 of the Indian locations in National Geographic's Short Breaks in India.

VROOM has also created a number of animated optimal road trips. The VROOM Optimized Road Trips Gallery includes three animated maps; a coast to coast U.S. road trip through 48 state capitals, a tour of the 244 biggest towns in metropolitan France and a trip around 2,232 Irish pubs.

The optimal routes for each trip were calculated using VROOM, an optimization engine for vehicle routing problems. The animated polylines for the routes were created using the SnakeAnim plug-in for Leaflet maps.

Map Backgrounds for Panoramic Videos

Regular readers of Maps Mania will probably be aware of Muxlabs' Map on Video effect. This effect for Leaflet maps allows you to place a video behind a semi-transparent Leaflet map. It is a particularly effective method to visualize the locations which are featured in a video.

Greenpeace's latest interactive website takes this effect a little further by superimposing a map on top of a 360-degree panoramic video.

Gestrandete Wale explores the sad plight of beached whales in the Northeast Atlantic. This year 28 sperm whales became beached on the coasts of Denmark, Germany, Great Britain and the Netherlands during the annual migration of Sperm Whales from the Northeast Atlantic to their mating areas around the Azores.

Gestrandete Wale examines the work of Greenpeace and coastguards to rescue beached whales. It also looks at the chronology and locations of whale beachings in the area. To achieve this it has created a spectacular data visualization in which a map and timeline have been superimposed on top of a 360 degree panoramic video.

As the video plays you can pan around and observe a complete 360 degree view around a dinghy as it sails in the Atlantic. A map has been superimposed on top of the video to show the locations where Sperm Whales have become beached in the area this year. The map markers are even interactive, which means that you can hover over the markers to learn more about each beached whale shown on the map.

As you pan around in the video you can also see an interactive timeline which reveals the number of whales that have been beached each year. Again this timeline is interactive and you can learn more by hovering over each year in the timeline.