Embed Size (px)
Citation preview
EXERCISE: Developing geo-web application withOpenLyers 3
Ivana IvánováMilton Hirokazu Shimabukuro
Barend öbben
September 1, 2015
Contents
1 Introduction 2
2 Adding a map to a website — using OpenLayers 3 2
3 Adding external web map services to a map 53.1 Spatial reference systems in OpenLayers 3 . . . . . . . . . . . . . . . . 93.2 Adding legend to a map . . . . . . . . . . . . . . . . . . . . . . . . . . 103.3 Setting the visibility of layers . . . . . . . . . . . . . . . . . . . . . . . 113.4 Using the GetFeatureInfo operation with OpenLayers 3 . . . . . . . . 12
4 Adding more layers 13
5 Summary 13
©FCT/UNESP This document may be freely reproduced for educa-tional use. It may not be edited or translated without the consent of the copyright holder.
Objectives of this exercise
In this exercise you will learn the how to:• create a simple website with HTML and JavaScript;• add spatial content (maps and web map services to a website with Open-
Layers 3;• add controls for manipulating the spatial content on a website;
NOTE: This exercise was developed using materials and tutorials available at Open-Layaer’s website (http://www.openlayers.org).
NOTE 2: Throughout the whole exercise, take care of this special character in thecode listings: → — this is a line breaking character used by the typesetting environ-ment of this exercise document (if you must know ;-), it is the listing package ofthe LATEXtypesetting system). The → character means the line of the code should betyped without interruption (i.e. you should not type a return or enter in this place).
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 1
1 Introduction
Geo-web applications are websites with mapping content in them. Geo-web applicationis a website — this means it is written in a language interpretable to the web browser;this language is called the HyperText Markup Language (HTML). JavaScript languageis used to allow user interaction in websites.
Geo-web applications are usually targeted to a specific user group which determinesthe selection of the spatial content itself — i.e. what kind of spatial data and in whichdata format is used. we will use the OpenLayers JavaScript library to put spatialcontent to our geo-web application.
2 Adding a map to a website — using OpenLayers 3
OpenLayers is a JavaScript library that allows putting dynamic mapping content to awebsite. Through an application programming interface it allows geo-web applicationdevelopers putting spatial data in variety supported formats on a webpage.
We will explain how OpenLayers works using a complete working example from Open-Layer’s website1.
Task 1 : Create a new file and save it as .html somewhere on your drive. Copy inthe contents in listing 1 to the new file, save and open it .html in a web browser. Ob-serve the indentation in this example file — indentation in the HTML and JavaScriptlanguage does not have syntactical nature, however, it improves the readability of thecode tremendously.
Listing 1: map.html<!doctype html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css→
" type="text/css"><style>#map {height: 400px;width: 400px;
}</style><title>Example OpenLayers3 page</title><script src="http://openlayers.org/en/v3.8.2/build/ol.js" type="text/→
javascript"></script>
1 http://openlayers.org/en/v3.1.1/doc/quickstart.html and http://openlayers.org/ol3-workshop/basics/map.html
2 Ivana Ivánová
</head><body><h1>My Map</h1><div id="map"></div><script type="text/javascript">
var map = new ol.Map({target: ’map’,layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: ’osm’})
})],
view: new ol.View({center: [254031,6254016],zoom: 16})
});</script>
</body></html>
•
To include a map on a web page we will need three things:
1. Include the OpenLayers library, which allows us to put spatial content on a web-page:
This line includes the OpenLayers library to the webpage: <script src="http→://openlayers.org/en/v3.8.2/build/ol.js" type="text/javascript"></script→>. The first part is to include the JavaScript library. In our example we simplypoint to the openlayers.org website to get the whole library. In a productionenvironment, you would build a custom version of the library by downloadingol.js from OpenLayers website including only the module needed for your ap-plication eventually. Technically, you could put the reference to a JavaScriptlibrary anywhere else in the .html document. In our example the referenceto the OpenLayers (in our example the only one) JavaScript library is in the<head> of the .html document — advantage is not only making it easy for de-velopers to find all referenced scripts in the code, but mainly, making sure thatall necessary libraries are loaded before the website is displayed.
2. Creating a HTML container for our map:
First, we define a style sheet for our map — we will use the standard cascadingstyle sheet (CSS) defined in the OpenLayers and we include the link to this css(<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css→
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 3
" type="text/css">) in the <head> of our document. <div> HTML holding amap is created with <div id="map" class="map"></div>. Through this <div>→the map properties like width, height and border can be controlled through CSS.Our map is 400 pixels high and 400 pixels wide, and this definition is includedin the <head> of the .html document as well.
<style>#map {height: 400px;width: 400px;
}</style>
You could provide the dimensions of the map relative to the browser window,e.g. if you’d like the map being as wide as the browser window the width wouldbe 100%.
3. Create a simple map with JavaScript by writing a script specifying the map de-tails:
The next step in generating our map is to include some initialization code. Inour case, we have included a <script> element at the bottom of our document<body> to do the work:
<h1>My Map</h1><div id="map"></div>
<script type="text/javascript">var map = new ol.Map({target: ’map’,layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: ’sat’})
})],
view: new ol.View({center: [254031,6254016],zoom: 16})
});</script>
With this JavaScript code, a map object is created with a layer from the MapQuesttile server 2 zoomed on the Porte Maillot station in Neuilly, Paris (France). Let’s lookcloser at our script:
• The following line var map = new ol.Map({ ... }); creates an OpenLayers Mapobject. Just by itself, this does nothing since there is no layers or interactionattached to it.
2 http://www.mapquest.com/
4 Ivana Ivánová
• We attach the map object to the <div>, with <div id="map">the map objecttakes a target into arguments. The value is the id of the <div>: target: ’map’
• The layers: [ ... ] array is used to define the list of layers available in the map.The first and only layer right now is a tiled layer:
layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: ’sat’})
})]
Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) whichcontains a source. The source is the protocol used to get the map tiles. You canconsult the list of available layer sources here: http://openlayers.org/en/v3.8.2/apidoc/ol.source.html
• The next part of the Map object is the View. The view allows specifying thecenter, resolution, and rotation of the map. The simplest way to define a viewis to define a center point and a zoom level. Note that zoom level 0 is zoomedout.
view: new ol.View({center: [254031,6254016],zoom: 16
})
Note that the center specified is in coordinates defined in the spatial referencesystem called Pseudo-Mercator (EPSG: 3857), which is native to OpenLayers.
3 Adding external web map services to a map
After creating a simple map page, we will learn how to add more layers to it. Inprevious exercises you published your own web map services, and now let’s see how toadd these services to our map. For this exercise we will create a new web page.
Task 2 : Create a new file and save it as map2.html somewhere on your drive. Copyin the contents in listing 2 to the new file.
Listing 2: map2.html<!doctype html><!-- Simple example of Web Mapping using HTML and OpenLayers 3/JavaScript →
--><html><head><meta charset="UTF-8"><!-- definition of the styles --><link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css→
" type="text/css">
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 5
<style>.map {height: 500px;width: 500px;
}</style>
<!-- JavaScript libraries used in the application --><script src="http://openlayers.org/en/v3.8.2/build/ol.js" type="text/→
javascript"></script><!-- My own OpenLayers 3/JavaScript code --><script src="layers.js" type="text/javascript"></script><title>OpenLayers 3 Example</title></head><body onload="init()"> <!-- init() is a JavaScript function defined in a →
separate file --><h2>My Map of Thailand</h2><div id="map" class="map" style="float:left;"></div>
</body></html>
•
This is a simple .html file prepared to hold our mapping content. Observe the in-clusion of layers.js script in the head (find <script src="layers.js" type="text/→javascript"></script> line in the <head> of your document). Because our OpenLayersJavaScript code will be a bit more complex (and because we want to adhere to theprogramming paradigm of separating concerns) we will store our JavaScript mappingcode in a separate file.
Task 3 : Create a new file and save it as layers.js in the same directory whereyour map2.html ‘lives’. •
In the following tasks we will step-by-step build our layers.js. Adding a layer isdefined through several steps:
• definition of layer’s a data source,
• definition of the ‘initial behavior’ of the map, and
• addition of the layer to the map.
Task 4 : Defining the layer’s data source:
In our example, we will define the OpenStreetMap as the data source for the layer.Add MapQuest’s ‘osm’ data as the source for your layer. The code for this is thefollowing:
6 Ivana Ivánová
var source1 = new ol.source.MapQuest({layer: ’osm’});var osmlayer = new ol.layer.Tile({source: source1});
•
We will now specify the ‘initial behavior’ of our map — in other words, what shouldhappen when we open the webpage which includes our map(map.html), what kindof data should be displayed, what controls should our map have and where the viewshould be zoomed. We already know that we are displaying the OpenStreetMap data,we want to have some indication of the scale and we want to zoom our view to Thailand.
Task 5 : Building the init() function: Add the following code to your .js file todefine the ‘initial behavior’ of the map on a webpage:
function init() {var view = new ol.View({
center: ol.proj.transform([100.50, 13.96], ’EPSG:4326’, ’→EPSG:3857’),
zoom: 5});
var map = new ol.Map({target: ’map’,controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: ’metric’
})]),
view: view,});
map.addLayer(osmlayer);}
•
Finally we need to write a script for adding our layer to the map. You can do thisby adding map.addLayer(osmlayer); script to the init() function. The completeannotated code for creation a simple map containing one layer (the OpenStreetMap)centered to Thailand is here:
// definition of the layer sourcevar source1 = new ol.source.MapQuest({layer: ’osm’});var osmlayer = new ol.layer.Tile({source: source1});
// init() function referenced in the <body onload=init()... of the →application’s HTML code
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 7
function init() {var view = new ol.View({
center: ol.proj.transform([100.5, 13.96], ’EPSG:4326’, ’→EPSG:3857’),
zoom: 5});
var map = new ol.Map({ // map as a composition of the view and controlstarget: ’map’, // link to the HTML object in which the map should be→
displayedcontrols: ol.control.defaults().extend([
new ol.control.ScaleLine({units: ’metric’
})]),
view: view,});
// adding layers to the mapmap.addLayer(osmlayer);}
Let’s now add more layers — once we are in zoomed to Thailand, we can add theweb map services created during previous exercises. One of the possible data sourcesin OpenLayers 3 is ‘TileWMS’ object, which is the connector to the layer source fortile data web map service servers. The ‘TileWMS’ is defined by the URL, severalparameters (‘params’ in which at least the ‘LAYER’, holding the name of the layer,parameter is required) and the ‘serverType’
Task 6 : Create a new layer with Thailand’s forests:
• the URL to the service is: http://localhost:8080/geoserver/<your workspace>/wms,
• the name of the layer is: <your workspace>:forest
• the server type is: geoserver
Add the following code to your .js file (NOTE: replace ‘<your workspace>’ with thename of your own workspace on GeoServer where you published your web services):
var source2 = new ol.source.TileWMS({url: ’http://localhost:8080/geoserver/<your workspace>/wms’,params: {’LAYERS’: ’<your workspace:forest’},serverType: ’geoserver’,
});
var forestlayer = new ol.layer.Tile({extent: →
[97.3036041259766,5.54177093505859,105.680480957031,20.5437793731689],→
8 Ivana Ivánová
source: source2});
NOTE: the extent defined for the layer is the spatial extent in the spatial referencesystem you defined for your web map service on GeoServer. You can find these valuesin your WMS’s Capabilities document. •
And of course, do not forget to add your new layer to the map.
Task 7 : Include map.addLayer(forestlayer); script into the definition of yourinit() function (after you added the OSM layer to the map). •
After saving your updated script and reloading the map2.html in the browser, youmay observe the changes. What happened? Most probably nothing. . . Let’s explain,why is this.
3.1 Spatial reference systems in OpenLayers 3
OpenLayers 3 default spatial reference systems (SRS) is the WGS84/Pseudo-Mercator(EPSG:3857) (also known as the Spherical Mercator). This is the projected coordinatesystem used for rendering maps in Google Maps, OpenStreetMap, etc.3.
As you may already know, there are many more spatial reference systems in the world(at least one per country). Moreover, our ‘Thailand’s web map services are defined ina spatial reference system, WGS84, which is different from the OpenLayer’s defaultsystem. This explains why nothing happened when you added your WMS layer to themap.
To make sure, a spatial layer is placed on the correct location, we want to be in controlof using the layer’s proper spatial reference system. We can do this in two ways:
1. define one more SRS for a web map service published on our GeoServer, or
2. transform WMS’s current reference system to the reference systems of OpenLay-ers.
Although option 1 is easy, and absolutely valid solution to our problem, we will now gofor option 2. This is easily possible, because in addition to its default SRS, the Open-Layers 3 library also includes the definition of the World Geodetic system 84 (EPSG:4326) together with the transformation parameters between these two systems. Thisis why we were able to transform ‘on-the-fly’ the coordinates of our view’s center inour first example zoomed to Thailand.
OpennLayers 3 has two methods allowing transformation between reference systems:3 http://epsg.io/3857
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 9
1. ol.proj.transform for transforming coordinates, and
2. ol.proj.transformExtent for transforming spatial extent
We used the first for transforming the maps’s view coordinates, and now we need thesecond for transforming the spatial extent in which our forest layer is defined.
Let’s now repair our map by telling it to display our forest layer which is in WGS84,on top of the OSM layer:
Task 8 : Re-write your layer’s definition as follows: extent: ol.proj.transformExtent→([97.3036041259766,5.54177093505859,105.680480957031,20.5437793731689], ’EPSG→:4326’, ’EPSG:3857’. This addition completes our forest layer definition to the fol-lowing code:
var source2 = new ol.source.TileWMS({url: ’http://localhost:8080/geoserver/<your workspace>/wms’,params: {’LAYERS’: ’<your workspace>:forest’},serverType: ’geoserver’,
});var forestlayer = new ol.layer.Tile({
extent: ol.proj.transformExtent→([97.3036041259766,5.54177093505859,105.680480957031,20.5437793731689],→’EPSG:4326’, ’EPSG:3857’),
source: source2});
•
When you refresh your map now, you should now see a a forest map layer on top ofthe OpenStreetMap layer. This is all fine, but it would be even better, if we’d havesome clue that would help us interpreting the colors on the map — let’s see how canwe add a map legend. . .
3.2 Adding legend to a map
OpenLayers 3 does not have an explicit ‘legend’ object, the reason probably is that thelibrary was developed for putting dynamic spatial content on a website by making theweb program understand that there are special — spatial — objects that are displayed.OpenLayers 3 provides some of the controls for interaction with the dynamic spatialcontent, such as the zoom buttons, that come by default with the ‘map’ object andthe ‘scaleline’ which can be added manually. It does not deal with all other mapdecorations as we know them from the cartographic principles — legend is one ofthese decorations not provided by the OpenLayers 3.
Fortunately, our layers are Web Map Services which, are able to provide their ownlegend — the GetLegendGraphic service operation helps doing this, it returns an
10 Ivana Ivánová
image with the layer’s legend. Having a URL to the layer’s legend, we can displaythe legend in the map, best, doing this with a placeholder (<div>) in the .htmldocument.
Task 9 : Check in your WMS layer’s capabilities document if the web map serviceprovides legend for your layer — note the legend’s URL. In your .html create a newplaceholder (<div>) that will dosplay the legend, you may decide about its placementon the webpage and placeholder’s dimensions. For illustration, here is our example(NOTE: replace <your workspace> with the your own workspace name):
<div id="legend" style ="width :250 px; height :200 px;"> <!--→placeholder for legend-->
<img src= "http://localhost:8080/geoserver/webmap/wms?service=WMS&→version=1.1.0&request=GetLegendGraphic&layer=<your workspace>:→forest&format=image/png&width=20&height=20"><br/>
</div > <!-- GetLegendGraphic request to the WMS-->
•
OL3 OL3 We now have have two layers in our map, however, we cannot decide whichone to see and which one not to see — can we fix this too?
3.3 Setting the visibility of layers
There are two parts of the solution to ths challenge:
1. a script (in our .js file) initiating the layer’s visibility status, and
2. an interactive placeholder for layers visibility switcher in our .html file.
Let’s write these codes:
Task 10 : In your .js file (at the end of the file) write a new function defining theinitial status of the layer’s visibility — the code for this function is available here:
function layerVis (value) { // function invoking the initial status of the→layers’ visibility
if (value == "osmlayer" ) {osmlayer.setVisible(document.getElementById("1").checked);
}else if (value == "forestlayer") {
forestlayer.setVisible(document.getElementById("2").checked);}
}
In your .html code create a new placeholder for layer visibility switcher — the examplecode is here:
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 11
<div style="padding:10px;"><h2> Layer visibility switcher: </h2> <!-- a checkbox activating a →
function ’layerVis’ defined in a separate .js file (in our case,→in the ’layers.js’ file) -->
<input id="1" value="osmlayer" type="checkbox" onchange="layerVis(→this.value)" checked/>
MapQuest-OpenStreetMap<br><input id="2" value="forestlayer" type="checkbox" onchange="layerVis→
(this.value)" checked/>Forest layer<br>
</div>
•
Our map is almost ready, we want to include one more nice tool which will enhanceour map’s usability. This is the tool will provide additional information about thespatial data displayed on the map and will use the GetFeatureInfo operation everyweb map service offers to write it.
3.4 Using the GetFeatureInfo operation with OpenLayers 3
As we already know, the GetFeatureInfo is a very handy operation web map servicesoffer. It allows displaying additional, non-spatial attributes of our map layers uponusers’ request executed by clicking on a feature of interest. OpenLayers 3 supportsthis operation as well, and here is how we can use it:
• we need to include a function in our .js file allowing queries to the featureinformation related to our layers, and
• we need to create a placeholder in our .html file for displaying this information.
Task 11 : Write a new function in your .js file for retrieving the feature informationfrom a layer. This code will be part of the init() function — insert the code belowyour view definition:
map.on(’singleclick’, function(evt) { // a click on a map allowing →displaying non-spatial attributes of the feature
document.getElementById(’info’).innerHTML = →’’;
var viewResolution = /** @type {number} */ (→view.getResolution());
var url = source2.getGetFeatureInfoUrl(evt.coordinate, viewResolution, ’→
EPSG:3857’,{’INFO_FORMAT’:’text/html’}
);if (url) {
document.getElementById(’info’).innerHTML =
12 Ivana Ivánová
’<iframe with="300px" height="100px" →src="’ + url + ’"></iframe>’;
}}
);
Create a placeholder in your .html file for displaying features information — the codefor this is here:
<h5> Click at the map to see additional information... </h5><div id="info"> <!-- Atributes of features will be displayed here -->
</div>
•
4 Adding more layers
You now know everything you need to execute the final task of this exercise: addingyour own layers to your map.
Task 12 : Add WMS layers you published to the GeoServer to your map. Allowswitching the visibility of the new layers, display layers’ legend and display layers’non-spatial attributes upon request. •
5 Summary
In this exercise we practiced creating simple geo-web application with HTML5 andOpenLayers 3 and you should now be able to:
• create a simple website with HTML and JavaScript;
• add spatial content (maps and web map services) to a website with OpenLayers3;
• add controls for manipulating the spatial content on a website;
© Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 13
