The Fubra Blog
Google Maps Free Alternatives
We love Google products much like why we love Apple here at Fubra (apart from those who don’t believe in the great Steve Jobs), they work and work well. But recently they made a change to their Maps API that caused us to rethink our mapping strategy drastically.
Since October, Google introduce a clause in their usage terms that states that if you do go over 25000 user sessions a day then they can start charging you a fee for use. Not such a big deal some may say and Google did note in their developer blog…
Based on current usage, only the top 0.35% of sites will be affected by these limits, meaning that the Google Maps API will remain free for the vast majority of sites.
On the usage statics from a post last year on their blog that means 1225 sites will be affected (probably more).
One of our sites, World Airport Codes, is one of those sites. I suppose it’s nice to be thought of as one of the 0.35%, but not so good that the costs of using Google Maps on this particular site would be more than it earns in advertising revenue.
So our search for a replacement started!
There are a number of solutions out there that still offer a free service, you just have to look and take into account that they may not have as much functionality as Google Maps offer and a different library to work from, but with a little work and some real thought, they can be just as good, if not better.
Our solution for World Airport Codes was two fold; a Javascript map API and a map tile service.
Javascript Map API
For the Javascript map API we went with CloudMade’s Leaflet as it’s lightweight, simple and open source. It’s also one of the nicest looking APIs out of the box both looks-wise with the navigation being very simple and contemporary and it’s implementation Javascript giving Google a run for it’s money. The only issue on the initial use of Leaflet, for us, was that they do charge for commercial use of their map tiles, so we had to have a look at a different map tile provider; which Leaflet makes very easy to implement just by changing one URL.
Map Tile Service
The most popular source of map tile data out there is OpenStreetMap; we also found that, in some places, it’s updated more frequently than Google Maps thanks to the open community that a few of us at Fubra have already contributed too. The issue we did file with using OpenStreetMap tiles directly was that of a shallow one; they’re just not that pretty…
Open MapQuest uses data from OpenStreetMap but adds it’s own style to the maps that we think looks better than Google’s. And the other thing is it’s free! Open MapQuest ask that if you are going to load more than 4000 tiles per second then to email them with your estimated usage. This, I believe, is to do with making sure their servers can cope and that your not going to be a resource hog. On top of that you must include a snippet linking back to them saying they have provided the map tiles.
They do look great and provide a level extra level of information missing from Google Maps such as coastal boarders, a relief map and airport runways (helpful for World Airport Codes).
Putting it Together
If you want to use Open MapQuest tiles in Leaflet then all you need do is change theses lines of code:
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
cloudmadeAttrib = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
To something like this:
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
subDomains = ['otile1','otile2','otile3','otile4'],
cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
What we are changing here is the attribution text (which is longer) and adding the new URL to grab the map tiles from and setting an array of sub-domains for faster loading. That’s it really.
We now have a map that used to look like this previously with Google:
Our Google Maps previously
But now with Leaflet and Open MapQuest it looks like this:
Now with Leaflet and Open MapQuest implimented
If you want to learn more about working with Leaflet then check out their documentation page and for more on using Open MapQuest tiles as well as other services then head over to the developer page for that.
Other solutions
Our solution for World Airport Codes works perfectly for what we want it for but others may want more, or just want to check out other mapping solutions. Here’s a list of those alternative solutions for Google Maps and notes we have taken in regards to their usage (in no particular order):
- Ovi Maps – Yahoo! now use them for their mapping solution, but there is a clause in their terms that says usage “may be or may become subject to charges” (see point 9)
Ovi Maps
- OpenLayers – a completely open source project from Open Source Geospatial Foundation released under the FreeBSD license
OpenLayers
- OS OpenSpace – a mapping API project developed by Ordnance Survey, but only UK mapping data is available and you are limited to loading 65000 map tiles a day
OS OpenSpace
- Bing – the main competitor to Google but comes with more restrictive usage of “125,000 sessions or 500,000 transactions in a 12 month period”
Bing Maps
- MapQuest – I’ve already spoke about them, but they do provide their own APIs to use and have the best license info we found
MapQuest
Hopefully that will help provide more ideas for using something other than Google Maps for your web app. If you have any other alternative solutions then please feel free to leave a comment!
Neil Sweeney (Author)
Neil is a front-end developer at Fubra focused on speed, semantics and WordPress development. Why not hassle him on Twitter?
Great post!
By the way, it’s much less verbose to instantiate arrays like this:
var subDomains = ['otile1', 'otile2', 'otile3', 'otile4'];
Thanks, Mourner. Also, thanks for the spot on the array, I’ll update the post to reflect it better
Great article Neil !
I want to ask you how can I use google maps tiles in leaflet?
What url I have to set up for cloudmadeurl?
Thanks gusif!
Regards to using Google Map tiles, although it is possible, I’m not 100% sure if Google like people using their map tiles without using their API (I’ve heard stories of people being blocked out of Google Maps completely because they’ve accessed sites using the tiles without the JS API). I do believe it’s against their usage.
Also, the URL used has versioning that needs to be update fairly regularly, and once it’s outdated you get a 404 page, so it’s not a good idea to use it on that notion alone.
Sorry I can’t provide much more help.
[...] With World Airport Codes the next website changing to OSM has been introduced. Read more about the change here. [...]
I think Bing is the best alternative for GMaps, if they are less restrictive.
Thanks for this. We were in the same boat. Not too difficult to do the switch and we’re up and running with leaflet now. Thanks for the heads up.
Aaron
[...] of using Google Maps on this particular site would be more than it earns in advertising revenue,” writes Neil Sweeney, a front-end developer at Fubra, whose World Airport Codes site made frequent calls to the Google [...]
This news of the rise of publicly-updated mapping is impressive and surprising. I would have supposed it would be much more challenging to implement public-based mapping than, say, Wikipedia. The power of the internet public has become impossible to ignore.
Kudos for taking the time to write up a helpful post summarising your findings to help others looking for alternatives – good work!
[...] company, Fubra, which builds innovate web sites, also explain in a post written by Front-End Developer Neil Sweeney why the company also made the switch to Open MapQuest. One of the reasons cited for the switch [...]
Thanks allot for the nice post. Will give me a flying start for my planned switch from Google Maps to free alternatives (free is much better for business).
Cheers,
Grunde
Thank you for the info! I am having a problem and was wondering if you’ve ran across this before. My maps display perfectly in Safari (on a Mac), but don’t display at all on Firefox, and only display without the marker in Chrome. I’ve swapped from OSM to Open Mapquest, and get the exact same results. I’ve tried searching for help on both Leaflet and OSM sites to no avail. Hoping you may have seen this before with your experience in mapping…
Thanks,
Unfortunately not, I develop in Chrome and haven’t had an issue thus far and Firefox works perfectly for me. If you post a message in the issues board on the GitHub repo then somebody might be able to help; it’s also a good way for Mourner to track any issues that there might be with Leaflet.
Sorry I can’t be of any more help, but hopefully somebody on GitHub might have a solution or at least it will be tracked as a bug.
Thanks for the reply. I’ll continue to troubleshoot and I’ll post an answer when I get one…
Thanks
Thanks for the writeup.
Another alternative would be MapBox – especially as we’re gearing up for a world wide street level base layer: http://mapbox.com/light (using OSM data).
Switching seems to be a real trend now! We do it, too. Have decided to render our own OSM map style, though: http://www.toursprung.com/2012/02/a-farewell-to-google-maps/
[...] In the last six months, though, we’ve seen an increasing number of companies migrating to other options. So, during our January hackathon, one of our intrepid engineers wondered what the world would look [...]
[...] been switching providers lately. Foursquare’s blog post points to StreetEasy, Nestoria and Fubra, all of whom went with open data. We also covered the decision by AllTrails, a network for outdoors [...]
[...] alternatives. Foursquare is not the first company to ditch Google Maps. StreetEasy, Nestoria and Fubra are just some of the companies who made the decision to move away from Google Maps. The main [...]
[...] Ovi Maps is another option. It’s free now but could come with fees in the future. There are still other choices, however they’re less [...]
Many thanks for a very helpful post Neil, I’ve finally got the Leaflet API working with OSM tiles.
Why haven’t you talked about the Open Street Map foundation http://www.osmfoundation.org
excellent post. is it possible to use both leaflet and mapquest Open JavaScript SDK libraries?
Just wondering.. why is there a need to use leaflet with open MapQuest? Doesn’t open MapQuest provides the javascript?
I am researching on these providers too. Since I am very new to this, I got very confused. Particularly why is there a need to purchase MapQuest licensed data when I can do everything with open data??
Please enlightened me!
RE: ADK Media
The post was more about just alternatives to Google Maps, why we moved and how we did it, as apposed to an analysis of other solutions (hence the brevity at the end towards others). Though I’m glad that due to amount of interest in this post, many people have been looking at other solutions including OpenStreetMap itself.
RE: JF
The MapQuest Javascript API is a bit more strict in that we wouldn’t be able to style the map to how we want, not easily any way. Leaflet, as an extremely open source solution, would allow us to alter the look and feel of the Javascript wrapper for the map tiles as they provide clear Javascript plus the style sheet that we host ourselves. It also allows us to have the same style across different map tile solutions, so if we wanted to use MapBox tiles for example, we could just by switching the URLs over rather than a whole API, but also keep the same user experience.
With regards to open and license data, it’s down to personal/company thoughts on if you want the reliability that comes with a purchased solution as apposed to a free, open, solution. Not to say that Open MapQuest isn’t reliable at all as they’ve been amazing for us thus far, but that’s them being so generous with usage of their server resources but also the fact that we take the risk in that if there is an issue, they don’t take responsibility (so I undertand from their Terms of Use (bottom of the page)).
Hope that explains things better.
RE: Denise
Not exactly sure what you mean with the question so I’ll answer it from all the angles I can think of.
MapQuest does offer their own Javascript API for Open MapQuest.
If you mean to use both APIs on the same page with two different maps then yes, it should be possible. Using them both on the same map (as in one map on a page with both the MapQuest and Leaflet APIs interacting), I’m not sure but I doubt it. Not sure what advantage it would have either.
If I didn’t answer you correctly then please say and I’ll try to better understand the question
But they dont provide Geocoding service. Which they should. If they claim to compete. I am also evaluating different alternatives to replace Google maps in my application.
Tahir Akram: Open MapQuest have a reverse geocoding service (based on OSM data) that you can pass through a location and it will give you back a list of locations it’s relating to. I personally found this service better than Google’s; not because it’s easier (as Google adds a level of intelligence) but because it provides a lot more information and options thus more flexibility with the data.