Customizing Google Maps Part IV - Part Du

In the last Google Maps article we looked at customizing the API and adding our own data through a KML file. Now let’s take a look at doing something a bit more interesting, this time using our choice of web mapping API’s. We’ll do this by using OpenLayers.

What is OpenLayers? From the web site:

OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference -- OpenLayers is Free Software, developed for and by the Open Source software community.

What kind of sources can it use for maps? A bunch. You can use a number of free mapping API’s, such as Google Maps, Virtual Earth, Yahoo Maps, WorldWind, and MultiMap. You can also add geoRSS feeds, GML, and KML. You can also add WMS and WFS services. You can also create your own markers with popup boxes on-the-fly ala Google Maps. You can also draw vectors (point, path, polygon) on the map.

What kind of modern slippy interface am I talking about? It uses tiles so you can drag the map around, you can zoom in and out with mouse wheel, you can add layer, mouse, and other controls - a very modern, Javascript-heavy map interface. Not only have they taken care of that, they’ve done the obligatory browser checks and code customizations for cross-browser usage. The interface itself is based on the Prototype library, so you can easily integrate other JavaScript libraries based on Prototype like Rico and Scriptalicious.

It’s easier to look at than it is to talk about, so take a look at this quick page I did. Note that because the whole thing is JavaScript-based, I can put it on Google Pages and it works just fine (I’m linking to the OpenLayers library directly on their site).

Take a look at the source code. I’ve commented the JavaScript functions that create the map. All of it - the map interface and adding all of the layers - is 16 lines of JavaScript. And it just scratches the surface of what OpenLayers can do.

With OpenLayers you can very easily combine Google Maps base maps with your own WMS and WFS data streams, making the best of all worlds and keeping you from having to replicate your data as KML or geoRSS. You can also choose from a whole selection of other base maps, or use nothing but your own data sets.

OpenLayers is much more than a way to combine Google Maps with your own data, but I thought it fit this niche fairly well. I like OpenLayers so much I’m going to be using it in my next couple of projects. I highly recommend it for any type of web mapping project you’re up to, but particularly so if you are working with Google Maps and need to add your own data sets.