Spatial Horizons » OpenLayers

OpenLayers Tutorial – Place a Marker

James — Sun, 27 Mar 2011 14:50:45 +0000

This post continues our series of OpenLayers tutorials. If you are new to OpenLayers, review our basic map setup tutorial before continuing.

A common task of any mapping application is to place a marker at a specified location. OpenLayers provides several options for doing this but we will focus on using a Marker.

Our simple example will allow a user to plot the location of various US cities on an OpenLayers map. In order to accomplish this, we need to know the longitude (X) and latitude (Y) of each city. We will use this list of city coordinates to create a HTML

Click here to view the final result in a new window

OpenLayers Tutorial – Basic Map Setup

James — Wed, 16 Mar 2011 12:11:16 +0000

OpenLayers is a open source, javascript framework for generating dynamic maps. It’s incredibly powerful once you understand how to use it. But before we can tackle the more advanced applications, we need to lay some groundwork. This tutorial provides the basic code (HTML, CSS and JavaScript) needed to understand how to embed an OpenLayers map in a website.

HTML Page Creation

Create a new html file using your favorite text editor.


<html>
  <head>
    <title>OpenLayers Tutorial - Basic Map Setup</title>
    <style>
    @media screen{}
    </style>
  </head>
  <body>
    <h1>OpenLayers Tutorial - Basic Map Setup</h1>  
  </body>
</html>

Reference OpenLayers Javascript

OpenLayers is provided in a single JavaScript file that you can reference remotely or download to a local machine. Let’s keep it simple and just reference the freely available version online. Add this line inside the portion of the file.

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

Initialize OpenLayers

Inside , we need to define several variables and create an initializing function.

<script type="text/javascript">
        var map, baseLayer;
        function init(){
            map = new OpenLayers.Map('map');            
            baseLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers:"basic"});
            map.addLayer(baseLayer);    
            map.setCenter(new OpenLayers.LonLat(0,0),1);         
        }
script>

Inside the init function, the map will be created first. Then a WMS layer is defined using an existing map server. See Wikipedia for more information on WMS. In short, the WMS server in this example provides map tiles of the world upon request. Fortunately, OpenLayers does this behind the scenes and no additional coding is needed. Lastly, the layer is added to the map and the map is centered on zero degrees longitude and latitude.

Call the initialize function from the onload event of the .

<body onload="init()">

Define the Map

The next step is to add a

inside the to serve as the container for the map. Most web programmers are already familiar with the broad uses of

’s and in the case of OpenLayers, it makes a perfect “map” representative.

<div id="map" ></div>

The size of the map can now be defined using CSS. In the portion, add some variation of the following style.

 >
    @media screen
    {
        #map{width: 500px; height:250px; border: 2px solid black;}
    }
 >

Full Source Code

Your final HTML page should look something like this.


<html>
  <head>
    <title>OpenLayers Tutorial - Basic Map Setup</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, baseLayer;
        function init(){
            map = new OpenLayers.Map('map');            
            baseLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers:"basic"});
            map.addLayer(baseLayer);
            map.setCenter(new OpenLayers.LonLat(0,0),1);             
        }
    </script>
 
    <style>
    @media screen
    {
        #map{width: 500px; height:250px; border: 2px solid black;}
    }
    </style>
  </head>
  <body onload="init()">
    <h3>OpenLayers Tutorial - Basic Map Setup</h3>
    <div id="map"></div>
  </body>
</html>

Working Demo

Open the file in a web browser and the map should look like this:

Click here to view the final result in a new window

OpenLayers Tutorial – Add MapServer Data

James — Sun, 16 Dec 2007 15:08:51 +0000

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.

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.

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.