Zen

Source string Source string

223/10000 · 223

The string is read only.

English Actions
OpenLayers Based Routing Interface
The goal of this chapter is to create a simple web-based user interface to pgRouting based on OpenLayers. The user will be able to choose start and destination locations, and get the route from the start point to the destination point.
The start and destination points are created by the user, with simple clicks on the map. The start and destination coordinates are then sent to the WMS server (GeoServer), as parameters to a WMS ``GetMap`` request. The resulting image is added as an *image* layer to the map.
OpenLayers introduction
OpenLayers uses modern JavaScript, and HTML5 technologies such as Canvas and WebGL for the rendering of images/tiles and vectors.
Creating an OpenLayers map in a web page involves creating a *map* object, which is an instance of the ``ol.Map`` class. Then, data layers and controls can be added to that map object.
The center and resolution (zoom level) of the map are controlled through the *view* object. Unless other mapping libraries, the view is separated from the map; one advantage is to allow multiple maps to share the same view.
OpenLayers features three renderers: the *Canvas* renderer, the *WebGL* renderer, and the *DOM* renderer. Currently, the most capable renderer is Canvas. In particular the Canvas renderer supports vector layers, while the other two don't. Canvas is the default renderer, and the renderer used in this workshop.
Creating a minimal map
Let's create our first OpenLayers map: open a text editor and copy this code into a file named ``ol.html``. You can save this file on the ``Desktop`` and open it with a web browser.
This workshop assumes, that you use OSGeoLive, which includes the OpenLayers Javascript library accessible under the following URL: http://localhost/openlayers/dist/ If you don't use OSGeo Live for this workshop, you need to adjust the URL to OpenLayers Javascript and CSS file.
This web page includes a simple map with an OpenStreetMap layer and center to a predifined location. There is no routing-related code for now; just a simple map with stantard navigation tools.
Line by line we have:
Line 6: include the default OpenLayers CSS file.
Line 7 to Line 12: CSS rules to give dimensions to the map DOM element.
Line 15: add a div element for the map. The element's identifier is ``map``.
Line 16: load the OpenLayers library code. Functions and classes in the ``ol`` namespace come from there.
Line 18 to Line 29: the JavaScript code specific to that example.
Let's have a closer look at the code that create the OpenLayers code:
This code creates an ``ol.Map`` instance whose ``target`` is the ``map`` DOM element in the HTML page. The map is configured with a *tile layer*, itself configured with an OpenStreetMap *source*. The map is also configured with a *view* instance (of the ``ol.View`` class) with predefined values for the *center* and the *zoom* level.
WMS GET parameters
Add this code after the creation of the map:

Loading…

User avatar None

String updated in the repository

  1. pgRouting workshop
  2. interactions-chapter-11
  3. English
The center and resolution (zoom level) of the map are controlled through the *view* object. Unless other mapping libraries, the view is separated from the map; one advantage is to allow multiple maps to share the same view.
The center and resolution (zoom level) of the map are controlled through the *view* object. Unless other mapping libraries, the view is separated from the map; one advantage is to allow multiple maps to share the same view.
8 months ago
Browse all string changes

Things to check

Long untranslated

The string has not been translated for a long time

Reset

Glossary

English English
No related strings found in the glossary.

String information

Flags
read-only
Source string location
../../build/docs/interactions/chapter-11.rst:35
String age
8 months ago
Last updated
8 months ago
Source string age
8 months ago
Translation file
locale/pot/interactions/chapter-11.pot, string 7