Implementing Map Mashups with Mapstraction

February 22, 2008 | Uncategorized | 9 Comments

image A few years ago, I made my first map mashup with Google Maps for Dallas Theological Seminary. It allows visitors to search for churches around the world where DTS alumni are serving. Recently, we decided to update the mashup with several features in mind:

  1. Larger map – 2 years ago we were using a 800px wide layout and now we can use a 1024px layout
  2. Use updated API – Google has changed APIs since then
  3. Implement other maps – Yahoo and Microsoft each have good points
  4. Use custom icons – we are not just showing churches now, but also schools and counselors

To handle all of this, especially the implementation of other multiple map engines, I chose to use mapstraction, a JavaScript layer which allows developers to program against a common API for all mapping engines. It turns these two proprietary mapping code blocks:

// Google maps specific code
var gmap = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
gmap.setCenter(new GLatLng(37.4419, -122.1419), 13);
var gmarker = new GMarker( new GLatLng(37.443, -122.166) );
gmap.addOverlay(gmarker);
// Microsoft Live maps specific code
mmap = new VEMap('map');
mmap.SetDashboardSize(VEDashboardSize.Normal);
mmap.LoadMap();
mmap.SetCenterAndZoom(new VELatLong(37.4419, -122.1419), 10);
var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(37.443, -122.166));
map.AddShape(shape);

into this single common set of code:

// universal map API, just change 'google' to 'yahoo', 'microsoft', etc.
var mapstraction = new Mapstraction('map','google');
mapstraction.addControls({ pan: true, zoom: 'large', overview: false, scale: true, map_type: true });
mapstraction.setCenterAndZoom(new LatLonPoint(37.4419, -122.1419), 12);
var marker = new Marker(new LatLonPoint(37.443, -122.166));
mapstraction.addMarker(marker);

In addition to Microsoft, Yahoo, and Google maps, you also get free access to a 3D map called Freeearth which is an amazing implementation of a 3D globe map (like Google Earth) using Papervision3D.

Examples

Here are examples using all four mapping engines. The only unique code is the shadow on the icons under Google maps. Also, prototype (which is used throughout the site) is handling the AJAX calls.

image image

image image

Try it out

Links

9 Responses to “Implementing Map Mashups with Mapstraction”

  1. Boby Francis says:

    Hi All,

    Am very new to this Google Map, am trying to move the Map image in a time interval basis, either the Map image or the Location Images, am able to plot the points in Google Map, using Lat/long, now i want to make animated replay in google map.

    So help me to achive this in my project.

  2. John Dyer says:

    @Boby, you’ll need to use some setTimeout or setInterval functions and then fire the setCenter method on that interval.

  3. xacto says:

    How is the church database updated? I checked the two churches I call home (one in Dallas, one in CA) and both still have lead/head pastors listed who are no longer with the church.

  4. John Dyer says:

    @Sam, the alumni office updates the data about once a month. I’ll let them know the data needs a refresh. As long as those pastors have notified the alumni office of their new position, the map should show it.

  5. xacto says:

    Hmm, I’m not sure either have new positions. They may be in states of semi-retirement so I’m not sure if they would have let the alumni office know (it’s been about 1+ year(s) since they held their former positions).

  6. ArcDigita says:

    John, thanks for leading me to the Mapstraction JavaScript. It’s a huge time saver, and really cleaned my code up.

    Ken

  7. Ansari jafar says:

    I want to full working code for google maps please email me all file so that i can use this code .

  8. Atul says:

    Hi John
    Great web site. One quick question, will it be possible for you to share the code for Church search App? I am trying to make a community based web site and I am really impressed with the search result pop up. I was looking for an example like this in dozens of GMap libraries, but yours is closest. And it looks like you are using Ajaxpro , which i have used in the past. Please email me the code if possible, it will be highly appreciated.

  9. Baju Bayi says:

    Yes! Finally something about baby.

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.