Saturday, May 30, 2015

The Witcher III Leaflet Map

The Witcher III Interactive Map is a Leaflet.js powered map of Velen and Novigrad within the Northern Kingdoms.

The Witcher 3: Wild Hunt is an action role-playing video game set in an open world environment. The Witcher games are based on the books of the same name by the Polish author Andrzej Sapkowski.

This new interactive map of The Witcher III game world, like most interactive game world maps, includes the option to view important locations within the game. These points of interest can be turned on & off on the map by using the options in the map side-panel.

The Witcher III interactive map also includes a comprehensive search option which allows you to search for important locations within the game by name. The search option is powered by the leaflet-search plugin. Leaflet-search is a powerful customized search engine which you can add to Leaflet map to allow users to easily search for markers/features on the map by a custom property.

Friday, May 29, 2015

Terraforming London to Fit the Tube Map

The biggest problem with London is that its geography doesn't accurately conform to the London Underground map. Harry Beck's famous London Underground map distorts geographical space on order to make the Underground map more legible for users.

To overcome the distortions of Harry Beck's map we could of course create a more geographically accurate map of the Underground. The problem with this however is that the resulting map is far less legible and frankly nowhere near as beautiful as Harry Beck's original map.

Maybe we could skew and distort Harry Beck's Underground map to fit the geography of London. We could take Ben Schmidt's approach to transit maps by stretching, squeezing and rotating the London Underground map to align it with the underlying geography of the city. However, if you have a look at Ben's MTA Map of Actual New York, you can see that the result again tends to ruin the aesthetic of the original transit map.

No ... the best and only solution is to terraform the topography and geography of London so that it conforms more accurately to Harry Beck's map. There is the obvious added bonus that after terraforming, London will also finally be suitable for human life. Thankfully Metrography has already created the map of this new London.

The Metrography Map of London transforms the geography of London so that it more accurately represents the London depicted in Harry Beck's London Underground map.

To create this map Metrography uses the Thames and Underground stations from the London Underground Map as fixed positions. They then distort the real geography of London to fit these fixed positions from Harry Beck's map. The result is a London which conforms to the Underground map and is therefore much easier for everyone to navigate.

Work on the New London terraforming project begins next week. London Underground apologize in advance for any disruption you may experience during these essential engineering works.

The Hip Hop Albums of Street View

Mass Appeal has been doing a little detective work to find the locations where a number of famous Hip Hop album covers were photographed. After finding the correct locations they then superimposed the album covers on top of the same view as seen in Google Maps Street View.

Iconic Hip Hop Albums in Street View features album covers by The Beastie Boys, LL Cool J, Ice Cube and a number of other famous Hip Hop artists.

Ever since Google launched its 360 degree interactive imagery music fans have been using Street View to find and tour the locations of famous album covers

Back in 2009 the NME created this Musical Tour of London with Google Street View, providing links to Street View locations where a number of classic album covers were taken in the UK capital.

The Guardian also got in on the act. Classic Album Covers in Street View superimposes a number of famous rock covers on images of the same view as found on Google Maps Street View. The Guardian and Mass Appeal both use still screenshots captured from Street View. You could of course overlay the album covers directly on top of Street View using the Google Maps API.

I quickly put together this Street View shot of Pink Floyd's Animals cover. To create an interactive version of an album cover superimposed on Street View I used the Team Maps Street View Overlay library.

If you like The Guardian's version of album covers on Street View you might also like their Classic paintings of world cities meet Google Street View and Classic London paintings in Google Street View.

Thursday, May 28, 2015

Open Aerial Imagery

The OpenAerialMap has been reborn. Between November 2007 and December 2008 OpenAerialMap provided a collection of open-sourced aerial imagery. Unfortunately some problems with hosting and licensing caused the first iteration of OpenAerialMap to close in 2008.

Now however Humanitarian OSM Team (HOT) has restarted the OpenAerialMap project. OpenAerialMap will provide a central repository for imagery from satellites, unmanned aerial vehicles (UAVs) and other aircraft. At the moment the map is a little sparse. There is quite a bit of aerial imagery in and around Kathmandu. If you search for Finland and zoom in on Helsinki you might be able to find a few more open aerial images.

Hopefully the huge growth in drone mapping in the last few years means that the time for a collection of open aerial imagery is here and HOT will be able to make a success of the new reborn OpenAerialMap.

Interactive Strip Maps

Strip maps are very useful when you want to provide a navigation aide from one specific location to another. These maps, which represent a linear route and leave out geographical detail beyond a thin corridor, provide a focused guide to navigation and essentially ignore any geographical knowledge which isn't germane to the journey.

Linear strip maps have a long history. One great example is John Ogilby's 1675 Britannia Atlas (one panel of which is pictured on the right). Ogilby's atlas is presented in a series of scrolls. Each scroll depicts just one journey - from one English town to another destination town.

Strip maps are still very popular today, particularly in transit maps. Most subway trains around the world feature strip maps, representing the subway route as one vertical line from a terminal subway station at one end to the other terminal at the other, with all the subway stations in between depicted in order.

It is a little surprising that we don't see more interactive strip maps on the internet. The browser, with its often linear scrolling method of navigation, seems to lend itself rather well to the strip map format. However interactive strip maps on the web seem to be few and far between.

Propublica has just published a really nicely created strip map, called Killing the Colorado. The map takes the user on a journey down the Colorado river, exploring how man is engineering the death of this once great river.

As you scroll down the page you follow the course of the river overlaid on a satellite view. On your journey down the river information windows open highlighting some of the water projects that are draining water from the river.

The Propublica map owes a lot of its inspiration to the New York Times' A Rogue State Along Two Rivers. A Rogue State Along Two Rivers explores the rise of ISIS by following the paths of the Tigris and Euphrates Rivers. The interactive stitches together a series of aerial images of both rivers to create a strip map which you navigate by scrolling down the page.

Obviously there is a danger with this kind of linear narrative that the medium becomes the whole message. Any ISIS related news stories which occur some distance from the two rivers are not going to make it to the map. However the fact that urban settlements in northern and western Iraq grew-up along the two rivers means that this linear form of narrative works very well in exploring the rise of ISIS in Iraq.

As you scroll down either river overlays explain the situation in towns and cities, often with links to fuller reports in the New York Times. 

Reinventing the Map

The 2015 European Games is being held in Baku, Azerbaijan, from 12 to 28 June 2015. This will be the inaugural event of the new European Games, an international mini-Olympics type event for athletes representing the National Olympic Committees of Europe.

The Journey of the Flame is a very interesting map which shows the route of the Baku 2015 torch relay. This futuristic 3d map was built using WebGL and three.js. When zoomed out the map presents a traditional top down map view. As you zoom in the map transitions to present an oblique view of Azerbaijan and the route of the torch relay.

If you select a town on the map you can view social messages posted by map users at that location. To view a message just select one of the individual flames shooting out of the torch that appears over the town.

The map isn't entirely successful. The town labels are very unclear when the map is zoomed out (the labels should be larger when the map is zoomed out). It is also a bit difficult to view the route on the map. The route would be more clear if a contrast color to the map background was used. However you can use the timeline at the top of the map to navigate more easily to individual towns on the torch relay route.

Wednesday, May 27, 2015

The Great San Francisco Earthquake Map

Esri has published an interesting Medium blog post exploring some of the best history maps created using their mapping platform. We've featured some of the maps in Seven Maps That Will Change the Way You Look At History on Maps Mania before but The San Francisco 1906 Earthquake & Fire is one that I haven't seen before.

This Story Map is based on a report by San Francisco Fire Department Captain Henry Mitchell, who was on duty when the 1906 earthquake occurred. The map locates a number of the important locations, mentioned in the report, recounting the tireless work of Mitchell and his crew, who worked for three straight days after the earthquake struck.

The map includes historical photos of the damage caused by the earthquake and overlays them on top of the beautiful pictorial Chevalier Tourist Map of San Francisco, from the David Rumsey collection.

Ten Years of the Google Maps API

It has been nearly ten years since the launch of the Google Maps API. That's right - the Maps API is almost as old as Maps Mania.

To celebrate the occasion Google is sending the Google Maps bus out on the road. Starting tomorrow a  customized 1959 GM tour bus will be at Google I/O in San Francisco. After Google's developer conference the bus will set off on a road trip across the USA. On this 14 stop journey across America the bus will be meeting-up with developers and customers before reaching its destination at Disney World.

If there's a Google Maps road-trip then there must be a map. There is - and it's called Code the Road. The map shows all the bus' scheduled stops on its American road-trip and the dates of each stop. It also features a Street View tour, which allows you to explore the inside of the Code the Road bus.

On this trip the bus will be hosting three developer meet-ups, in Boulder on June 4, Chicago on June 9 and New York on June 18 (click on the links if you want to sign-up).

New Jersey's Real-Time Buses & Trains

Last week Maps Mania featured a round-up of live, real-time New York transit maps. If you live in New Jersey you have no reason to feel neglected as you can also view buses and trains in real-time on your own maps.

The New Jersey Live Bus Map shows the position of New Jersey buses in real-time moving on a Google Map. Judging by the number of buses flying around on this map, if you live in New Jersey, you presumably don't have to wait too long for a bus. However, if you do find yourself waiting at a bus-stop, you just need to fire up this map to see how far away your next bus is.

If you find yourself waiting for a train instead then you need to check out the New Jersey Transit Rail GPS map. This map shows the live position of New Jersey trains. Click on one of the trains moving on the map and you can view its full schedule, with the times it will be arriving at each stop on its journey.

Fractal Mapping

MandelbrotGL is a Leaflet based map of infinite Mandelbrot set pattern. The map uses WebGL to render the Mandelbrot set on the fly in the browser. Therefore the map has infinite zooming, so you can keep zooming into the fractal pattern for ever.

Unfortunately the pattern starts getting a little pixelated after zoom level 20. That still leaves you with a lot of beautiful maths to explore.

Fractal Map also uses the Leaflet library to visualize a number of beautiful fractal patterns. Using the map you can view a number of different fractals and use the map controls to zoom in and out on the repeating 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.