OpenLayers Tutorial – Basic Map Setup

March 16th, 2011

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.

<!DOCTYPE html>
<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 <head> portion of the file.

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

Initialize OpenLayers

Inside <head>, 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>.

<body onload="init()">

Define the Map

The next step is to add a <div> inside the <body> to serve as the container for the map. Most web programmers are already familiar with the broad uses of <div>’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 <head> portion, add some variation of the following style.

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

Full Source Code

Your final HTML page should look something like this.

<!DOCTYPE html>
<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