Monday, July 25, 2016

How to Create Map Backgrounds


Transparent maps with image and video backgrounds can create interesting geographical context on interactive maps. These background effects are achieved by placing a video or image behind a map and adjusting the opacity of the map - so that the video or image can be seen through the map.

Earlier this year Muxlabs released a Map on Video effect. This is just one effect in their Map Effects 100 collection of cool user interactions for Leaflet maps. In the demo of Map on Video a map of Las Vegas is overlaid on top of a video driving down Las Vegas Boulevard. An animated car marker shows the position of the car moving on the map as it drives down the street, while, in the background, you can actually watch as the video plays.

Codrops has now created a similar map effect which uses static images rather than a video. Simple Interactive Points Effect creates a static map with a number of map markers. As the user hovers over the marker the map becomes partly transparent and a photo of the marked location can be see through the map. When the user clicks on the marker the map becomes completely opaque and all you can see is the background image.

In effect a background page element replaces the usual marker information window or marker pop-up. When the map user clicks on a map marker instead of content being displayed in a marker pop-up it is displayed in place of the actual map.

The codrops effect uses a static map but this effect could easily be reproduced with an interactive map. Essentially all you need to do is create two page elements - one positioned exactly on top of the other. The page element for the map should be on top (use z-index on your page elements) and should have an opacity of '1'.

You can then adjust the opacity of the map by using event listeners on your map markers. When a user mouse-overs a marker you can adjust the opacity of the map element to '0.5' - so that the background image can be seen through the map. When the user clicks on the marker you can use the event listener to adjust the opacity of the map holding element to '0' - so that the map is now completely transparent and all the user sees is the image background.

Sunday, July 24, 2016

Maps of the Week


The Sandby borg ring fort in Öland, Sweden was the site of a violent massacre in the 5th century and is currently being investigated by Swedish archaeologists. The archaeological website of the Sandby fort now includes a wonderful 3d map featuring a reconstruction of the fort and fort houses.

The 3d map of the Sandy borg fort includes overlays which allow you to view the locations of some of the archaeological discoveries found within the fort complex. If you use the links along the bottom of the 3d map you can view where objects have been discovered in 'house 4' and 'house 40'.


If you've been caught up in the huge Pokemon Go craze then you need to check-out the PokeVision map. Most of the third-party maps created for Pokemon Go use crowd-sourcing to show the locations of Pokemon and Pokemon gyms. PokeVision does not use crowd-sourcing to find nearby locations of Pokemon. It actually shows you the location of all the Pokemon near you in real-time.

The map doesn't have the most impressive map design but it is a brilliant hack of the Pokemon Go app. The map shows the locations of Pokemon near your location in real-time. Each Pokemon shown on the map also includes a timer which displays how long the Pokemon will remain at that location.


This week This is Cleveland released a really beautiful custom designed interactive map of Cleveland.

If you zoom in on Downtown Cleveland on the Cleveland Map you should easily be able to find local points of interest. In particluar the most well known venues and landmarks in the neighborhood are picked out on the map with some gorgeous pictorial representations.

The custom map itself was designed by the Living Map Company. You can view more examples of their maps on the Living Map Company Projects page.  This is Cleveland say they will soon be adding lots more detail to  the map in other neighborhoods in Cleveland.

Street Art of Lisbon


Portuguese newspaper Expresso has created a Google Map showcasing the street art of Portugal. The map features the work of graffiti and street artists from all over the country.

The Mapa Interativo da Street Art Nacional is a simple but effective map with some neat custom touches. It uses the Google Maps API styled map feature to create a gray-scale background map. Clustered custom map markers are then placed on top of this base map. Spray can images are used for the individual locations and a numbered paint-splat image is used for the clustered markers.

As well as searching for street art by location on the map you can also search by artist name using the alphabetical index at the top of the map.

Saturday, July 23, 2016

Mapping the Tragically Hip


It has been a good week for Canadian music maps. On Tuesday we reported on the Canadian Geographic: On the Coast map of Canadian locations featured in popular song lyrics. Now there is a new map of locations mentioned in the songs of the band Tragically Hip.

Gord Downie the lead singer and lyricist of the band has been diagnosed with incurable brain cancer. To help commemorate his career and music CBS has created an interactive map of the locations mentioned in Downie's lyrics.

Looking for a Place to Happen uses the story map format to take you on a tour around Canada and the songs of the Tragically Hip. As you scroll down the page the map automatically pans to a location mentioned in one of Downie's songs. If you turn the 'autoplay' option on then the map also automatically plays the relevant song.

Each song is also accompanied with a brief textual description of the song and an excerpt from the lyrics.

Friday, July 22, 2016

How to Create a Pokemon Go Type Game


Niantic is an established leader in location based games and has already enjoyed popular success with their Ingress game. However the stratospheric success of Niantic's Pokemon Go means that the potential for location based augmented reality games is finally being more widely recognized. There is no doubt that the popularity of Pokemon Go means that there will soon be many imitators.

So - how do you create a game like Pokemon Go based on location data?

1. Build a Database of Points of Interest

There are obviously many elements to Niantic's Pokemon Go. At the heart of the game, however, is the placement of Pokemon in the real world. In essence Pokemon are mapped to particular locations in the real-world based on Niantic's database of points of interest.

At a basic level features in Pokemon Go are mapped like this:

Places of Interest: Pokemon
Public Spaces: Gyms
Water - Water Pokemon

Niantic's database of points of interest comes from users of Niantic's Ingress game. Niantic Labs began as an internal start-up at Google, Therefore it is safe to assume that the original data behind Ingress and Niantic's earlier mobile guide 'Fieldtrip' (showing nearby places of interest) came from Google Maps.

Players of Niantic's Ingress were encouraged to submit points of interest to the game. This has enabled Niantic to extend their database of interesting places - particularly in areas which lacked data in the original game.

At the heart of Ingress' original database were locations which had some 'cultural' interest. This is important to the success of Niantic's location based games. It means that when players visit real-world locations while playing Ingress or Pokemon Go there is usually something interesting for players to see.

So how do you create a database of POI's?

If you don't want to start from scratch you could always use something like Google Places or Mapzen's Who's on First gazetteer.

Alternatively you could use OpenStreetMap data. Using the Overpass API you can select and download OSM map data. For example (copying Niantic's preference for places of cultural interest) you could use the Overpass API to download the locations of all buildings in a city tagged 'museum' and 'gallery' to build a database of museums and art galleries.

2. Create a Base Map

Pokemon Go appears to be using Google Maps for its base map of streets and location data. If you also want to build upon the success of Google Maps you could use the Google Maps API, the Google Maps API for Android and the Google Maps SDK for iOS.

The disadvantage of using Google Maps is that you only have limited options for creating your own map style. Mapbox and Mapzen have both written recent posts about how you can create a base map similar to that used in Pokemon Go. If you want to create your own map style based on OpenStreetMap data then you could always use Mapbox Studio.

3. Find Your Users Location

Once you have a database of interesting locations and a base map on which to place them you have the basic requirements for your game. However you will need to check your user's location before showing them their nearby points of interest.

To do this you could use a geolocation service, such as the Google Geolocation API or the Geolocation API.

Alternatively you could use geo-fencing to determine when a user enters a predefined geographic area. You can use geo-fences to define an area around a location and trigger actions on your map based on when users enter your defined area.

4. Create an Interesting Game

Now comes the hard part. Once you have a database of interesting places, a map and a way of checking your users' locations you now need something fun for them to do. This is where you need to get creative and come up with your own ideas.

The potential is limitless but you might want to consider location based ideas such as,

finding, dropping, training objects /characters
buying, selling or capturing territory
finding or hiding virtual objects (a kind of virtual geocaching or virtual treasure hunt)

Mapping Water Risk Around the World


The World Wildlife Fund's Water Risk Filter assesses the physical, regulatory and reputational risk to water across the globe. It allows users to view key indicators of water risk in countries and different industries around the world.

The Water Risk Filter uses a number of key indicators to assess the levels of water risk. These include indicators such as water scarcity, pollution, ecosystem threats, regulatory risk and supply chain water risk. If you select a country on the map you can view a country profile outlining the physical, governmental and geopolitical context of local water risk.

The map also allows you to select different layers to view on the map. These include different indicators of water risk, such as access to drinking water and water pollution. You can also select layers which show the water risk for different types of industry.


The World Resources Institute has also created an interactive map which visualizes where and how water risks are emerging across the globe. Aqueduct allows you to explore 12 key indicators of water risk in countries around the world.

The 12 key indicators can be accessed from the map side panel. You can select any of the indicators to view a choropleth map layer showing the risks around the world for each indicator. The indicators include risks such as access to water, drought severity and groundwater stress.

You can learn more about the water risks facing a particluar area by clicking on the interactive map. Selecting a location on the map in this way will open an information window containing a breakdown of the water risks faced by your chosen location. This information includes a rating of the overall water risk and the projected risks for the area selected.

Thursday, July 21, 2016

US Training of Foreign Armies


The Intercept has been investigating how every year the United States trains around 200,000 members of foreign police forces and armies around the world. Using data from diplomatic cables that were released by WikiLeaks the Intercept has examined where and how U.S. defense agencies, civilian agencies, armed forces colleges, defense training centers, military units, private companies, and NGOs have been involved in training police forces and armies from more than 120 countries.

The Network investigation is accompanied by an interactive map which shows the training links between U.S. agencies and foreign forces. The map does a really good job of illustrating the huge scale and range of this U.S. training. However, because of the huge amount of data on the map, it is a little difficult to pick out and explore the individual training connections displayed on the map.

The map is crying out for some filtering options which would allow you to explore the data a little more effectively. For example a country filter would help to give a better overview of the training of the police and armed forces of individual countries.

This is the Cleveland Map


Having posted about a terrible map with some great content earlier today I think it's time to balance things out with a great map which has little content.

This is Cleveland has released a really beautiful custom designed interactive map of Cleveland. It isn't strictly true to say that the Cleveland Map doesn't have any content. Like all great maps it does include a lot of information on the base map. However, unlike most other interactive maps, it has no data layers overlaid on top of the base map tiles.

If you zoom in on Downtown Cleveland on the map you should easily be able to find local points of interest. In particluar the most well known venues and landmarks in the neighborhood are picked out on the map with some gorgeous pictorial representations.

This is Cleveland say they will soon be adding this level of detail on the map to other neighborhoods in Cleveland. If This is Cleveland add the leaflet-hash plug-in to the map they will then be able to link to specific venues on the map from their local reviews and events content in the main section of the This is Cleveland website.

The custom map itself was designed by the Living Map Company. You can view more examples of their maps on the Living Map Company Projects page.

London's Historical Street View


A huge on-line collection of over 250,000 drawings, paintings and photos of London has been unveiled this week. Collage allows you to view over 250,000 images of London from the collections of the London Metropolitan Archives and Guildhall Art Gallery.

That's the good news. The bad news is that it has a really awful interactive map. The London Picture Map allows you to search the Collage image collection by location. Unfortunately the image markers take a while to load onto the map. And, because of the numbered marker clustering system, each time you zoom in on a location on the map you have to wait all over again for the markers to load.

It gets worse ... When you select a marker to view a image rather than show you the picture in an information window or in a separate page element you are redirected to the image's dedicated page on the Collage website. This means that if you want to view another image you have to go back to the map and start the painful process of waiting for the markers to load all over again.

One final warning. Each of the images on Collage has also been ruined by being digitally stamped with a large and ugly 'Collage' watermark.

Wednesday, July 20, 2016

Explore a 5th Century Ring Fort in 3D


You can now explore a 3d model of an Iron Age ring fort discovered in Öland, Sweden on an Esri map. The Sandby borg ring fort was the site of a violent massacre in the 5th century and is currently being investigated by Swedish archaeologists.

The Esri Insider has a really interesting article on how archaeologists have been using drones (and a dog) to help map the fort, the houses it contained, as well as the violent end of the people who lived there. However if you visit the Sandy borg website you can step back into the past yourself and explore the ring fort on a wonderful 3d map.

The 3d map of the ring fort includes overlays which allow you to view the locations of some of the archaeological discoveries found in the fort and the fort's houses. If you use the links along the bottom of the 3d map you can view where objects have been discovered in 'house 4' and 'house 40'.

The Sandy borg website also has a map showing an aerial view of the whole archaeological site. This map uses categorized markers to show where various types of archaeological artifacts have been found during the team's investigation of the site.