Wednesday, February 19, 2014

Compare Your Town with the World

I've seen a fair few map comparison websites over the years, map applications that allow you to compare one country with another country or one city with another city. BBC DimensionOverlayMaps, MAPfrappe and If It Were My Home? are four good examples of apps that allow you to compare one location with another on top of an interactive map.

All four of these maps work by overlaying the shape of one location on top of another so that you can make a direct comparison of size. Mapmerizer works a little differently as it lets you compare two locations side-by-side on two different maps. Type in the name of two towns, cities or countries into Mapmerizer and you can compare a Google Map of each location juxtaposed next to each other.

One neat feature of Mapmerizer is that you can also compare the satellite views of your two different locations. For example, when comparing the satellite views of London and New York, London seems much greener than the Big Apple, while in New York the population appears to be more densely concentrated.

The True Size of ... is one of the most popular size comparison interactive maps. This map allows you to overlay the outlines of any country (or countries) on top of another country on a Google Map. You can type any country or state into the search box to add its shape to the map. You can then drag the shape around the map to compare its size to any other country on the map.

The name 'True Size of ...' is a bit of misnomer as there will always be some distortions when using a two dimensional map. However The True Size of ... map does use the Google Maps API geodesic property for draggable polygons. This means that when you drag a country around on the map the polygon shape resizes as you move north or south on the map, compensating in part for the distortions in Google Maps' Web Mercator projection.

It is very easy to create a country size comparison map like The True Size Of using the Google Maps API. Google's Maps API allows you to define polygon shapes as both draggable and geodesic. This means that if you add a country polygon shape to a Google Map the map's users can drag the shape around the map and the size will change size depending on the shape's latitude.

In Leaflet.js there is no simple method in the platform's JavaScript library for making a polygon shape both draggable and responsive to the map projection. However you can use Webkid's plug-in for Leaflet which allows you to add draggable polygons that resize automatically depending on the degree of latitude.

Leaflet Truesize includes links to download the plugin and an explanation of how it should be used to create a size comparison map. It also contains an example map which allows you to drag India and Mexico on an interactive map so that you can compare their size with other countries around the world.

No comments: