Creating an OpenStreetMap mapclient

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. Here, we will use the online tiled map services of OpenStreetMap.

What is OpenStreetMap?

The OpenStreetMap Project, based at http://openstreetmap.org, is the worldwide mapping effort that includes more than half a million volunteers around the globe. OpenStreetMap is an initiative to create and provide free geographic data, such as street maps, to anyone.
There are many ways in which you can access the OpenStreetMap: as a simple webmapping service (not unlike Google and Bing Maps, but based on truly free non-proprietary data on a non-commercial website), as a webservice in various gis--viewers and as a database service, providing the actual vector data in raw form. This is maybe the most important difference between OSM and the others: You can download the actual vector and attribute data of OSM, and use it for your own projects free of charge, and you can also edit the data directly and in this way contribute to the building of the OSM itself!

Visit http://openstreetmap.org using a web browser. Try to find the ITC building (it`s just North--West of the main station in downtown Enschede, a town in the East of The Netherlands)...

There are many ways to find places and their coordinates. One of the easiest is to use the Search box find a location, and then look in the URL bar to see what are the zoom level, and X, Y (or longitude, latitude) respectively.

Finding a location in OpenStreetMap.

Creating a simple mapviewer

Using the OpenStreetMap site as described above is fine for casual map browsing, but if you want to disseminate spatial data yourself, you might want to include the OpenStreetMap in your own websites. And of course that is possible, by using for example the OpenLayers API. In listing 1 below you see the most basic example of using OpenLayers with the OpenStreetMap service.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <!--include the OpenLayers CSS & JS: -->
  <link rel="stylesheet" href="https://gisedu.itc.utwente.nl/exercise/libraries/openlayers/v4.6.4/ol.css" type="text/css"/>
  <script src="https://gisedu.itc.utwente.nl/exercise/libraries/openlayers/v4.6.4/ol.js"></script>
  <title>OpenLayers example</title>
</head>
<script type="text/javascript">
let myMap; //create as global var
//  wrap whole thing in a function:
function init() {
  //define map object & link to placeholder div:
  myMap = new ol.Map({target: "mapDiv"});
  // define layer as tiled map:
  let osmLayer = new ol.layer.Tile({
    // load OSM (a connector predefined in the API) as source:
    source: new ol.source.OSM()
  });
  // add layer to map:
  myMap.addLayer(osmLayer);
  // create a map view:
  myMap.setView(
    //center coords and zoom level:
    new ol.View({ center: [255414,6250838], zoom: 16})
  );
} 
</script>
<!--run init script after page body loaded : -->
<body onload="init()">
<!--map placeholder div: -->
<div id="mapDiv" style="width:400px; height:400px;">
</div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!doctype html>

<html>

<head>

<title>OpenLayers example</title>

</head>

let myMap; //create as global var

// wrap whole thing in a function:

function init() {

//define map object & link to placeholder div:

myMap = new ol.Map({target: "mapDiv"});

// define layer as tiled map:

let osmLayer = new ol.layer.Tile({

// load OSM (a connector predefined in the API) as source:

source: new ol.source.OSM()

});

// add layer to map:

myMap.addLayer(osmLayer);

// create a map view:

myMap.setView(

//center coords and zoom level:

new ol.View({ center: [255414,6250838], zoom: 16})

);

}

</script>

</div>

</body>

</html>

Create an HTML page with the content of listing 1 and save it as a osm.html. View the result in a web browser. The result should look like figure 2 below, showing the OpenStreetMap zoomed in to the Tour d'Eiffel in Paris (France).

The result of running listing 1.

Adding controls

You can set up the OpenStreetMap to start at any place on the globe, by changing the coordinates that were used in the center parameter of the ol.View object: center: [255414,6250838].
But in order to find which coordinates to use to zoom to, it would be nice to have a knowledge of where (in coordinates) you are in the map. For that we will include a coordinate-readout and a scale bar. These kind of extras in the map viewer are implemented in OpenLayers as control objects.

Add a new line in the script just after the end of the myMap.setView function. Carefully study the javascript to see where that end is: match brackets and curly brackets and watch out for the ending semi-colon! Add the 2 lines of code highlighted in listing fragment 2 below. Save the results as osmPlusCoordinates.html. Try out the result in the browser.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <!--include the OpenLayers CSS : -->
  <link rel="stylesheet" href="./lib/ol.css" type="text/css" />
  <!--include the OpenLayers API :-->
  <script src="./lib/ol.js" type="text/javascript"></script> //
  <title>OpenLayers example</title>
</head>
<script type="text/javascript">
  let myMap; //create as global var
  //  wrap whole thing in a function:
  function init() {
    //define map object & link to placeholder div:
    myMap = new ol.Map({target: "mapDiv"});
    // define layer as tiled map:
    osmLayer = new ol.layer.Tile({
      // load OSM (a connector predefined in the API) as source:
      source: new ol.source.OSM()
    });
    // add layer to map:
    myMap.addLayer(osmLayer);
    // create a map view:
    myMap.setView(
      //center coords and zoom level:
      new ol.View({ center: [255414,6250838], zoom: 16})
    );
    myMap.addControl(new ol.control.MousePosition());
    myMap.addControl(new ol.control.ScaleLine());
  }
</script>
<!--run init script after page body loaded : -->
<body onload="init()">
<!--map placeholder div: -->
<div id="mapDiv" style="width:400px; height:400px;">
</div>
</body>
</html>

24

25

26

27

28

29

30

31

32

// create a map view:

myMap.setView(

//center coords and zoom level:

new ol.View({ center: [255414,6250838], zoom: 16})

);

myMap.addControl(new ol.control.MousePosition());

myMap.addControl(new ol.control.ScaleLine());

}

</script>

In this case the center of the map view is expressed as an array[x-coordinate, y-coordinate], but they could also be [longitude, latitude], if you use a data source that's using geographic coordinates.
OpenStreetMap is using a Mercator projection on the spherical WGS84 datum. This is used nowadays by most popular public webmapping services (also Google Maps, Bing Maps, etc.). This projection is officially standardized as EPSG code 3857, and named "WGS 84 / Pseudo-Mercator".

Unfortunately, some software still uses instead the un-official EPSG code 900913 (chosen because it sort of spells "google"), that was introduced and has become popular before the official standard was set.

Now you can change the center: [255414,6250838] to an alternative starting point, and likewise the zoom level (from 0-18) for the map by changing the parameter zoom: 16. Try setting up the mapviewer to start zoomed and panned in such a way that the country of Thailand nicely fits in it...

Creating a webmap client using OpenLayers

Creating an OpenStreetMap mapclient

What is OpenStreetMap?

Creating a simple mapviewer

Adding controls

Exercise Sections

Page Content