Introduction to OpenLayers

This is the third part of my open source mapping series.  See Part 1 for an overview of open mapping technologies, and Part 2 for details on running OpenStreetMap.

In this part I’m going to explore the basics of OpenLayers.  OpenLayers allows you to put a dynamic map on any web page, and displays map tiles loaded from various sources.  It can also draw vector shapes on maps, and plot markers.

Getting OpenLayers

Download OpenLayers from here: http://openlayers.org/download/.  Make sure you get the version with documentation: OpenLayers-2.7-withdocs.tar.gz.  This version includes API docs, loads of examples and various tools and scripts.

Displaying the Map and Controlling Position, Zoom

Note: These examples might not show in your feed reader.

To display a map, create an OpenLayers.Map, and a WMS for the tiles:

Notice that I’ve used new OpenLayers.LonLat(1, 50) with map.setCenter() to zoom into Western Europe.

Displaying Markers

Markers must be displayed on a layer, and their size, position and icon must be provided.  Markers can be attached to mouse click events, and displayed with different colours and opacity.

Distribution Examples

The examples in the OpenLayers download include:

• Showing multiple markers quickly using a data text file
• Using Flickr, GeoRSS and JSON to show data on a map
• Using different tile sources (Yahoo! for example)