Late last year, Google announced that their Maps API and Google Maps Imagery would become a charged service for high volume users. Anyone hosting more than 25,000 daily map views would incur charges according to this pricing scheme. It is important to note that, not only is the API restricted, but the imagery (google maps layers) is restricted in the same fashion. For those that use any other API but still call upon Google base layers, the restriction of 25,000 daily map views still holds true. Now, this website certainly won’t generate that kind of traffic anytime in the near future, but there certainly are those kinds of websites on the internet that have well over a million page views a day. Those that first come to mind are travel service providers and real-estate agencies. Both services use maps as spatial decision support tools (eg. where should I live? where should we visit?). I am taking this opportunity to round up the APIs that I am familiar with and would recommend to those making the move away from Google.
OpenLayers
I was first introduced to web-mapping with OpenLayers and I continue to return to their extensively developed API. OpenLayers is one of the most popular open source web mapping libraries due to its long development life (oldest), also because it is a complex and well documented library. I have used OpenLayers for GeoJSON, KML and XML data overlays, as well as simple maps that call upon WMS and WFS services.
OpenLayers Hello World Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLayers Hello World Example</title>
<link rel="stylesheet" href="script/openlayers/theme/default/style.css" type="text/css">
<script src="script/openlayers/OpenLayers.js"></script>
<style type="text/css">
#map {width:500px; height:200px; border: 1px black solid;}
</style>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
Leaflet
Leaflet is a new library that provides a great variety of useful traditional web mapping features, as well as some unique extensibility (such as connectivity to CartoDB). The web-maps produced by Leaflet are some of the most beautiful maps straight out of the box. Leaflet utilizes HTML5 and CSS3 for many of its features, which contributes to its modern look. If you are looking for a modern, lightweight (21kb gzip vs OpenLayers@770kb gzip) and mobile friendly library, this ones for you!
Leaflet Hello World Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Hello World Example</title>
<link rel="stylesheet" href="script/leaflet/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="script/leaflet/leaflet.ie.css" /><![endif]-->
<style type="text/css">
#map {width:500px; height:200px; border: 1px black solid;}
</style>
</head>
<body>
<div id="map"></div>
<script src="script/leaflet/leaflet.js"></script>
<script>
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.setView(new L.LatLng(0, 0), 0).addLayer(cloudmade);
</script>
</body>
</html>
Polymaps
One of the few libraries that uses vector graphics to display information, Polymaps allows developers to use familiar css3 to very easily style map overlay elements. Zooming in and out on a Polymaps map feels and looks different than the previously mentioned libraries because Polymaps doesn’t force the browser to render zoom levels. Zooming now becomes a continuous scale from ‘0’ to ‘max’, which vector elements have no trouble with. Scaleable vector graphics don’t lose quality as they scale up or down in size making them ideal data layer types for mapping purposes.
Polymaps Hello World Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polymaps Hello World Example</title>
<link rel="stylesheet" href="script/polymaps/polymaps.css" />
<style type="text/css">
#map {width:500px; height:200px; border: 1px black solid;}
</style>
</head>
<body>
<div id="map"></div>
<script src="script/polymaps/polymaps.min.js"></script>
<script>
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.center({lat: 0, lon: 0})
.zoom(0)
.add(po.interact())
.add(po.hash());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/BC9A493B41014CAABB98F0471D759707"
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.compass()
.pan("none"));
</script>
</body>
</html>
Other Popular Alternatives
Open Web Map Services
As noted in the introduction, the Google Imagery base layers are also part of the 25,000 map view limit. A move towards open WMS is needed for those exceeding this amount. The OpenLayers example utilizes the Metacarta WMS provided by OSGeo. The Leaflet and Polymaps examples utilize the Cloudmade WMS, which is a tiled map service based on OpenStreetMap data.
The two WMS/Tiles that I tend to use most often:
Any questions? Just ask!
If this post helped you and you enjoy my site I would happily accept Litecoin donations:
LKPfT772e9HxvXYcA8LVDctTmENoqQxQF3
Hello Michael,
Thank you very much for this well-designed and informative site and posts.
I’m a Certificate in Spatial Geography and GIS student at Ryerson.
In previous lives I was a geologist, IT manager, photographer…
Peter Feibert
Hi Peter!
Thanks for browsing the blog and taking the time to comment, it means a lot to me.
Say hi if you see me in the lab, always happy to meet new people and put faces to names.
Cheers,
Michael
Thanks for this look at some alternatives to Google Maps.
[…] Leaflet Hello World Example #map {width:500px; height:200px; border: 1px black solid;} var map = new L.Map(‘map’); var cloudmadeUrl = ‘http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png’, cloudmadeAttribution = ‘Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade’, cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); map.setView(new L.LatLng(0, 0), 0).addLayer(cloudmade); Polymaps Alternatives to Google Maps | Spatial Analysis […]
MapBox is a good alternative
http://mapbox.com/
Hi Julien!
MapBox is a great alternative and I hope to write a blog post on their services in the near future. I have been using Tilemill and Tilestream (although, not commercially), and they have proven to be super intuitive and very powerful for creating and serving map data. If anyone has access to a server from which they can host a TileStream service, I would definitely recommend it!
Hey there, You have performed an incredible job.
I will definitely digg it and for my part suggest to my friends.
I am confident they’ll be benefited from this site.