OpenLayers Tutorial – Add MapServer Data

December 16th, 2007

Update: This post was originally written in 2007. Please visit our newer OpenLayers Tutorials for more up-to-date information.

This post introduces OpenLayers as a easy way to embed dynamic maps in a web page. First-time visitors are encouraged to read our previous posts on setting up MapServer and CGI MapServer for background information.

OpenLayers is a javascript library for creating maps on a web page. In their own words,

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. – http://www.openlayers.org/

Setting up OpenLayers is incredibly easy if you want to display data from other existing sources on the web. See their Quick Tutorial page for lots of sample HTML showing how to add a basic map in a web page. In this tutorial, we will focus on how to create a map that uses our own data from MapServer.

Tutorial Requirements

Before beginning, you should already have MapServer setup on your computer. See our previous post to complete this task using the MS4W package. Additionally, we will use GIS data and a MapServer mapfile from our World Map sample dataset.

Download a Web Page from OpenLayers.org

OpenLayers.org has a great screencast tutorial showing how to setup and use OpenLayers. Accompanying the tutorial is a wiki page describing the steps covered in the video. At the bottom of this page is a link to download an HTML document named lite.html that contains a good starting point for our tutorial.

Go ahead and download the file (direct link here) to your desktop and open it in your favorite text editor. On line 10, note the reference to OpenLayers javascript file:

<script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>

Update: You can now reference OpenLayers using this location:

   <script src="http://openlayers.org/api/OpenLayers.js"></script>

Further down, lines 13 through 20 contain the all the javascript code necessary to embed a MapServer map in the web page:

 

var map, layer;
 
function init(){
   map = new OpenLayers.Map( 'map' );
   layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS",
       "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
   map.addLayer(layer);
   map.zoomToMaxExtent();

 

In fact, without changing anything, you could open the web page in a browser and it will work fine because the data is coming from a remote server. The controls in the upper-left corner can be used to navigate around the map.

<br /> OpenLayers

Customizing the Javascript

In order for the web page to display our own MapServer data, several changes need to be made to the Javascript in HTML file.

On line 17, the layer is initialized using the OpenLayers.Layer.MapServer class. Several parameters are required for the layer to work correctly. In the default example, the layer is named OpenLayers WMS (Web Map Server) and the MapServer location is http://labs.metacarta.com/wms/vmap0. The third parameter is informing the server to request the “basic” layer.

For our demonstration, we need to change the three parameters. First we will change the name to World Map. Next, we need to change the location to point to MapServer running on our local machine. Remembering our last post on CGI MapServer, we already know that the path is http://localhost/cgi-bin/mapserv.exe. And finally, instead of requesting a layer name, we can just provide a file path to a mapfile. The final result looks like this:

 

var map, layer;
 
function init(){
    map = new OpenLayers.Map( 'map' );
    layer = new OpenLayers.Layer.MapServer( "World Map",
       "http://localhost/cgi-bin/mapserv.exe", {map: 'C:/world_mapfile.map'} );
    map.addLayer(layer);
    map.zoomToMaxExtent();
}

 

Save the file and open lite.html in a web browser. The map should now display your data described in the mapfile.

OpenLayers Map

More to Come

OpenLayers offers a wide range of functionality that can be added our simple example. For a list of examples, see here.

Also, visit our new OpenLayers tutorials for more information.