This post should be subtitled “MapQuest, I’m disappointed in you”. I have to say I was looking for a lot more out of this toolkit, because they’re a late entrant to the modern AJAX-y map interface so they should have known what will work and what would; because they’re still (I think) the #1 online mapping company; because I like cheering for scrappy underdog even if they’re really giant behemoths; and finally because I saw Kevin Survance, CTO of MapQuest speak at the Ajax Experience in Boston in 2007 and thought his presentation rocked.
Alas, there’s a number of shortcomings you should know about before you throw away your Google Maps (Yahoo Maps, Live Maps) application:
- the maps don’t look that great – there’s a lot pixelation due to light or non-existent anti-aliasing
- the map size has to be set explicitly as a style tag using pixels, not percentages! No CSS for you!
- the Geocoding feature requires a local proxy – while I understand the technical appeal of this, all the other mapping packages have got around this, why can’t MapQuest? As a result, our example app below does not demonstrate geocoding, it just hard-codes the lat/lon
- I wasn’t that impressed with the documentation / “hello world”-type examples. One issue here is that MapQuest may be targeting desktop applications and so browser JS is suffering for attention
Now, there seems to be a fairly complete API so there may be further virtues to the MapQuest API that I’m missing, so take that as a caveat. On the other hand, there’s a level of equivalency in map dimensions between all the other mapping packages that MapQuest doesn’t have; I’ll quantify this after I complete this survey of map APIs.
I’ve created an example map application which displays a map, the current lat/lon and zoom level, and lets the map position to be adjusted by editing those same values. If you’d like to get started with the MapQuest API yourself:
- register with MapQuest to get developer keys, etc.. Note that the examples here is using the default MapQuest key and seem to work fine for testing; I just wouldn’t use that for production purposes
- copy the code below to “map.html” in favorite hosting environment — it should even work off your disk
- add your developer key, if you got one, in the appropriate place
- run, enjoy, modify
Further reading:
Source (note the script src has been split for formatting purposes):
<html>
<head>
<script src="http://btilelog.access.mapquest.com/tilelog/transaction?transaction=script&
key=mjtd%7Clu6t2h07n1%2C2x%3Do5-lw7l9&itk=true&v=5.3.s&ipkg=controls1,traffic&ipr=false"
type="text/javascript"></script>
</head>
<body>
<div id="id_map" style="width: 1024px; height: 400px;"></div>
<p>
Lat: <input type="text" id="id_lat" onchange="map_js.onupdate_ll()" />
Lon: <input type="text" id="id_lon" onchange="map_js.onupdate_ll()" />
Zoom: <input type="text" id="id_zoom" onchange="map_js.onupdate_zoom()" />
</p>
<script type="text/javascript">
map_js = {
e_lat : null,
e_lon : null,
e_map : null,
mq_map : null,
create : function() {
map_js.e_map = document.getElementById('id_map');
map_js.e_lat = document.getElementById("id_lat");
map_js.e_lon = document.getElementById("id_lon");
map_js.e_zoom = document.getElementById("id_zoom");
map_js.mq_map = new MQA.TileMap(map_js.e_map, 9,
new MQA.LatLng(43.648565, -79.385329), "map");
map_js.mq_map.addControl(new MQA.ZoomControl());
map_js.mq_map.addControl(new MQA.ViewControl());
MQA.EventManager.addListener(map_js.mq_map, "zoomend", map_js.onposition);
MQA.EventManager.addListener(map_js.mq_map, "dragend", map_js.onposition);
map_js.onposition();
},
onposition : function() {
var c = map_js.mq_map.getCenter();
map_js.e_lat.value = c.getLatitude();
map_js.e_lon.value = c.getLongitude();
var z = map_js.mq_map.getZoomLevel();
map_js.e_zoom.value = z;
},
onupdate_ll : function() {
map_js.mq_map.panToLatLng(new MQA.LatLng(map_js.e_lat.value, map_js.e_lon.value));
},
onupdate_zoom : function() {
map_js.mq_map.setZoomLevel(map_js.e_zoom.value);
},
end : 0
};
map_js.create();
</script>
</body>
Hi!
Thanks for reviewing those mapping tools. I’m working on a project needing some kind of a map, too, so your reviews really help. Thanks!
- brix
Bitte sehr. And MS Live Maps & Google Maps to come later this week, and then a post to join them altogether. Glad you’re enjoying them.
[...] way we set up the events in Google Maps is a little different than we did in MapQuest, Yahoo Maps and Visual Earth. GMaps uses a two phase creation scheme, using one call to create the [...]
Nice one.. but there is one problem that i have faced while integrating mapquest api. which is uses single line addressing as default. Not able integrate search for cities outside US.