Digital Geography

29. June 2012

a minimal web-map using OpenLayers (part 1)

Web-mapping is used everywhere since GoogleMaps and GoogleEarth revolutionized our topographical and geographical perception. Keeping that in mind it is useful to get some insights in web-mapping possibilities.
An easy-to-use open source application for that is a javascript library called OpenLayers. You can run this on your local Windows or Linux machine easily: Download it from the OpenLayers website or if you are using Ubuntu as your Linux distribution just search for “openlayers” in the Software-Center or use your terminal:

sudo apt-get install libjs-openlayers libjs-openlayers-doc

But for a real minimal example you will only need 2 files in a folder: the openlayers.js and a index.html file.



The html-file will utilize and call the javascript file which will invoke elements in your web-map. The syntax we will really need is the html-file content ( with a lot of nonsense comments 😉 ):

<!DOCTYPE html>
<html lang='en'>
<head>
<!--we need some infos about the used characters -->
    <meta charset='utf-8' />
<!--now the title of the webpage which appears at the top of the tab -->
	<title>an minimal example</title>
<!--now define the used javascript library which is of course our OpenLayers.js -->
    <script type='text/javascript' src='OpenLayers.js'></script>
<!-- now we can use all defined classes from opnelayers.js -->
    <script type='text/javascript'>

// initiate a gloabl variable -->
    var map;
// and lets use a function we will call initialise normally this function is called init()
    function initialise() {
// lets get some attributes to the variable "map" which come from the function OpenLayers.Map
        map = new OpenLayers.Map('map_element', {});
// what we will need is a so called webmapping service which will provide some tiles for our basemap
        var wms = new OpenLayers.Layer.WMS(
            'My Minimal example',
            'http://vmap0.tiles.osgeo.org/wms/vmap0',
            {layers: 'basic'}
        );
// now add the layer to the map
        map.addLayer(wms);
// and zoom to the whole extent
	map.zoomToMaxExtent();
    }
// lets close the background information
    </script>
</head>
<!-- and start when loading the site -->
<body onload='initialise();'>
<!-- so the called "map_element" will need some setup in style -->
    <div id='map_element' style='width: 440px; height: 300px;'>
	</div>
<!-- thats it -->
</body>
</html>

You can download the file here: FILE. The openlayers.js should be donwloaded directly at openlayers.org. Store the file besides the js-file on an accessible folder on your webspace and of you go with the classic “iframe”:

Don’t be afraid of this open source package as the documentation is written very nice!

  • Pingback: a web-map with OpenLayers (part 3) « Cartography « geo-affine()

  • Hmm is anyone else having problems with the pictures on this blog loading?

    I’m trying to find out if its a problem on my end or if it’s the blog.
    Any responses would be greatly appreciated.

    • ricckli

      It’s working nicely here. I am using only webspace so maybe the full versions of the images can take some time to load… Where are you located? U, S and A?