All posts tagged ‘mapstraction’

If you’re adding a map to your website, why settle for the vanilla design when you can customize it and leave your own personal mark?

This tutorial will show you how to create a custom map from scratch, then add a little unique flavor to it by replacing the standard “map pin” icon with a custom icon of your own design.

To do this, we’ll be using Mapstraction, a library that creates map code that can be reused across all the big mapping providers (Yahoo, Google, et al). Mapstraction also allows for multiple types of customization such as custom info bubbles and graphics like the one we’ll be dropping onto the map.

Note: This tutorial is adapted from the book Map Scripting 101 by Adam DuVander. Adam is a former Webmonkey contributor and executive editor of Programmable Web. In his book, he shows how to use all of the features of the most popular mapping APIs, and how to mash them up with data from other sources like events calendars, weather services and restaurant review sites to make a variety of custom maps.

This exercise comes from chapters 1 and 2 of Adam’s book, and it is reprinted here with his permission and that of the book’s publisher, No Starch Press. It isn’t a word-for-word excerpt. It has been slightly adapted to work as a web tutorial. You’ll find dozens of in-depth exercises — including the full version of this one — in the book itself.

Create a Mapstraction map

Mapstraction is a little different from Google Maps and Yahoo Maps. Mapstraction is an open source JavaScript library that ties into other mapping APIs. If you use Mapstraction, you can switch from one type of map to another with very little work, as opposed to rewriting your code completely.

Using Mapstraction limits your risk to changes being made to an API. For example, if your site’s traffic takes you beyond the limit for your chosen provider, or the provider begins placing ads on the map, Mapstraction lets you switch providers quickly and inexpensively.

What’s cooler than Google Maps? Tools built on top of it. Developers from the Netherlands have released some helpful libraries to make more usable, interactive Google Maps.

Google hosts an open source utility library with several useful examples. Among them, a drag-to-zoom feature and a way to create dynamic labeled markers.

A progress bar is among the new additions to the libraries. When adding more than just a few markers, it can take some time. Rather than make your users sit through the slow-down, this library shows the progress via a popup status bar that fills as it completes.

The other new library, SnapToRoute, allows developers to restrict some actions to just along a polyline. The example included shows zooming along a specific route.

I love these sorts of libraries that make creating advanced maps easy. Of course, I’d love to see platform-independent examples, so developers of any map API could benefit. These libraries would be great to see as a part of Mapstraction, the multi-map I covered in a tutorial.