EXERCISE: Developing Geo-Web Application with Openlyers 3

EXERCISE: Developing geo-web application with OpenLyers 3 Ivana Ivánová Milton Hirokazu Shimabukuro Barend öbben September 1, 2015 Contents 1 Introduction2 2 Adding a map to a website — using OpenLayers 32 3 Adding external web map services to a map5 3.1 Spatial reference systems in OpenLayers 3................9 3.2 Adding legend to a map.......................... 10 3.3 Setting the visibility of layers....................... 11 3.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 the code listings: ! — this is a line breaking character used by the typesetting environment of this exercise document (if you must know ;-), it is the listing package of the LATEXtypesetting system). The ! character means the line of the code should be typed 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 application is 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 language is used to allow user interaction in websites. Geo-web applications are usually targeted to a specific user group which determines the selection of the spatial content itself — i.e. what kind of spatial data and in which data format is used. we will use the OpenLayers JavaScript library to put spatial content 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 a website. Through an application programming interface it allows geo-web application developers 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 in the contents in listing1 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 JavaScript language does not have syntactical nature, however, it improves the readability of the code 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 webpage: 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 simply point to the openlayers.org website to get the whole library. In a production environment, you would build a custom version of the library by downloading ol.js from OpenLayers website including only the module needed for your application eventually. Technically, you could put the reference to a JavaScript library anywhere else in the .html document. In our example the reference to 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 developers to find all referenced scripts in the code, but mainly, making sure that all 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 cascading style 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 a map 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 included in 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 would be 100%. 3. Create a simple map with JavaScript by writing a script specifying the map details: The next step in generating our map is to include some initialization code. In our 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 MapQuest tile server 2 zoomed on the Porte Maillot station in Neuilly, Paris (France). Let’s look closer at our script: • The following line var map = new ol.Map({ ... }); creates an OpenLayers Map object. Just by itself, this does nothing since there is no layers or interaction attached 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 object takes 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) which contains a source. The source is the protocol used to get the map tiles. You can consult 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 the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out. view: new ol.View({ center: [254031,6254016], zoom: 16 }) Note that the center specified is in coordinates defined in the spatial reference system 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. In previous exercises you published your own web map services, and now let’s see how to add 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. Copy in the contents in listing2 to the new file. Listing 2: map2.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"> © Faculdade de Ciências e Tecnologia da Universidade Estadual Paulista “Júlio de Mezquita de Filho” 5 <style> .map { height: 500px; width: 500px; } </style>  <script src="http://openlayers.org/en/v3.8.2/build/ol.js" type="text/→ javascript"></script>  <script src="layers.js" type="text/javascript"></script> <title>OpenLayers 3 Example</title> </head> <body onload="init()">  <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 OpenLayers JavaScript code will be a bit more complex (and because we want to adhere to the programming paradigm of separating concerns) we will store our JavaScript mapping code in a separate file.

EXERCISE: Developing Geo-Web Application with Openlyers 3

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support