An Introduction To OpenLayers

OpenLayers is a powerful and open source mapping solution written in JavaScript that can display mutliple different mapping services on web pages. What this means is that you can create a mapping tool using Google Maps and swap it to use Bing Maps at a later date without having to totally rewrite your code. OpenLayers works by building up a series of layers that fit together to form mapping, tools, information and even utilities like KML parsing and AJAX. Vectors and markers can also be used to add layers of information onto the map.

A map in OpenLayers (and most other mapping services) is essentially a set of images called "tiles". When you load a map all you are doing is loading in a bunch of map tiles which OpenLayers then places in the correct place. As you move around a map or change the zoom factor then other map tiles are loaded in to build the new view of the map.

The best way to get into OpenLayers (and this is true of many technologies) is to build a series of simple prototypes. When first figuring out how to use it I created a whole load of simple prototypes that did only one task. When I was ready to build something more substantial then I had experience of creating maps, using tools, parsing KML feeds or anything else I needed.

To get started with OpenLayers you need to download the latest build from the website at openlayers.org and extract it. In this download you will find the main OpenLayers.js file as well as a lot of different resources. You only need some of these componenets when creating more complex tools. All you need to do to get OpenLayers up and running on a web page is to include the OpenLayers.js file.

<script src="OpenLayers.js"></script>

Any maps you create will be pushed into HTML tags on the page itself. I have put this in the example below as well as the script tags and a call to a function called load(). This function is where we will place the OpenLayers code that will create our map.

<div id="map" style="width: 500px; height: 300px; border: 1px solid black;float:left;"></div>
<script src="OpenLayers.js"></script>
<script type="text/javascript"> 
  function load(){
  }
  load();
</script>

The simplest thing you can create in OpenLayers is a single map with a simple zoom control. The first thing we need is to create a map object, which we point to the HTML element that we created to contain the map. Creating the map object creates a set of default layers that contain some simple zoom tools. This won't actually show any maps yet, that's the next step.

var map = new OpenLayers.Map("map");

If you run the code written so far you will see a blank HTML element with a set of broken image holders on the left hand side. All of the image sources here are available in the OpenLayers zip file in the directory "img". To get things working you just need to drop this directory into the same directory as your OpenLayers.js file.

Now we set up the layers needed to contain the map tiles and tools. I am using the WMS object to create this layer, and giving it the MetaCarter map data to load. If you want a different service then you simply change this URL to point to that service. The third parameter here is used by OpenLayers to provide the mapping service with the necessary parameters it needs to fulfull the request. Note that if you change the mapping service then you might need to also change this.

var ol_wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://labs.metacarta.com/wms/vmap0",
    {layers: 'basic'}
);

We now add this layer to the map using the addLayers() function of the map object. As an additional step I have also set the zoom factor to be at the second highest level. Higher numbers here will zoom the map in and a value of 0 will show all of the map.

map.addLayers([ol_wms]);
map.zoomTo(1);

Putting all this together will create a web page with a simple map of the world. By default, the map is centered in on the latitude/longitude coordinates 0,0. This is a good starting point when getting into OpenLayers and is also a good template when creating mapping tools.

Here is the code in full.

<div id="map" style="width: 500px; height: 300px; border: 1px solid black;float:left;"></div>
<script src="OpenLayers.js"></script>
<script type="text/javascript"> 
  function load(){
    var map = new OpenLayers.Map("map");
    var ol_wms = new OpenLayers.Layer.WMS(
       "OpenLayers WMS",
       "http://labs.metacarta.com/wms/vmap0",
       {layers: 'basic'}
    );
    map.addLayers([ol_wms]);
    map.zoomTo(1);
  }
  load();
</script>

For more information on OpenLayers you can read the end user documentation or the API Documentation. There are also lots of examples available on the OpenLayers website, which is a good place to figure out how certain features in the API can be used.