This document discusses Mapstraction, an open source JavaScript library that provides a unified API for different mapping APIs and providers. It allows developers to use a single code base while taking advantage of features from different mapping services. This reduces dependency on any single provider and offers flexibility. The document provides a brief history of Mapstraction, describes some of its key features, and includes a mini tutorial for using the latest version. It notes that while Mapstraction is actively developed, more support for additional providers and features is still needed.

1. Mapstraction
Ed Freyfogle - #Geomob - 18 Nov. 2009

2. One mapping API to
rule them all
http://www.flickr.com/photos/workinpana/4031371930/

3. Why Mapstraction?
Flexibility
• reduce dependency on single provider
• single code base but different providers
Mix and match features
• street view of A with satellite view of B
• offer users choice
Future proofing
• Provider T&Cs/functionalities can change

4. Property search engine

7. Mapstraction features
• markers • multiple maps/page
• bubbles • KML/GeoRSS
• polygons • event handling
• overlays • geocoding

8. A bit of history
Started in 2006
/* Copyright (c) ${YEAR} Tom Carden, Steve Coast, Mikel
Maron, Andrew Turner, Henri Bergius, Rob Moran, Derek
Fowler
All rights reserved.
…
V1 available in 2006, some uptake.

9. “Plan to throw the first one away”
- Fred Brooks

10. http://www.flickr.com/photos/majorette/38996434/

11. And hence mxn v2 was born
Much smaller (20k versus 170k) note: YMMV
Much cleaner and modular
Testing infrastructure, API sandbox

12. Mini v2 tutorial
1. include library(ies) of provider(s)-of-choice
<script type="text/javascript">
var cloudmade_key = ”1234…";
</script>
<script src="http://tile.cloudmade.com/…-lite.js”
<script src="http://maps.google.com/maps? …”
2. Include mxn
<script src="mxn.js?(google,cloudmade)” …>

13. Mini v2 tutorial (cont.)
3. Get to work
<div id="mapdiv" style="height: 200px; width: 400px;"></div>
<script type="text/javascript">
var m = new mxn.Mapstraction('mapdiv',’cloudmade');
var latlon = new mxn.LatLonPoint(
51.52276321095246,
-0.10265350341796);
// put map on page
m.setCenterAndZoom(latlon, 16);
//add a marker
var marker = new mxn.Marker(latlon);
m.addMarker(marker);
//change map provider on the fly
m.swap('mapdiv', ’google');
</script>

14. mxn current status
mxn v2 in use and actively being developed
Support for cloudmade, geocommons, google (v2 and
v3), microsoft, openlayers, yahoo
Documentation/project page could be better
Lots more to be done
more providers, geocoding, new features
We need your help!

15. Thanks mxn community!

16. Learn more
About mxn:
http://www.mapstraction.com
mapstraction@lists.mapstraction.com
About me:
@freyfogle
About Nestoria:
http://www.nestoria.com
@nestoria

17. Questions/Demo?