|  Login

Web Mapping API - OpenLayers

   Minimize

We will be using the OpenLayers API to create our web maps.  There are several other web map apis available but I have found that OpenLayers gives us the most flexibility to create features that don't come natively within the API.

To begin we need to add a link to the API.  This is a javascript link to OpenLayers.  Copy and paste the code below the opening <head> tag above the opening <style> tag

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

Next we will need to add a javascript script tag and code block under the closing </style> tag and before the closing </head> tag.   

<script>
var map;
    function initialize() {
        
    }
</script>

Our next step is to initialize our map. We will use a base map from OSGeo http://www.osgeo.org/  OSGeo was created to support the collaborative development of open source geospatial software, and promote its widespread use.

So let's add code inside the initialize code block.  The first line will identify where to make the map by the id we gave the div.

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

Then We will have to tell OpenLayers what we want to use as the base map.

var mapbase = new OpenLayers.Layer.WMS('OpenLayers WMS', 
       'http://vmap0.tiles.osgeo.org/wms/vmap0', 
       { layers: 'basic,coastline_01,depthcontour,priroad,secroad,clabel'});

Finally we will add the base layer to the map and center the map where we want it.

map.addLayer(mapbase);
map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 

The setCenter function call takes the parameters of LonLat as you can see in the first portion followed by a zoom level after the comma.  You can play with these numbers to change where the map zooms to as well as what level it zooms to.

Next >>