With this final article, we get to the end of this
series. After setting up the Postgres / Postgis database, we
configured Geoserver to assist the results of pgrouting into a WMS lux.
All that’s left doing, is to create
an html page with openlayers to be able to enter the starting and ending points
and to view the calculated route.
Obviously there is a way to execute a complex application.
But here we will remain on something quite modest.
We will display an OpenStreetMap basemap, and allow the user
to click on this map to define the starting point. When a
second point is clicked, it is considered to be the desired point of arrival.
The page sends the request to the Geoserver WMS stream to
retrieve a vector feature representing the calculated route by pgrouting
and, finally, we will post it on the map.
To conclude, we will add a button to reset the map, a message
line to keep up-dated the current user, and an image to indicate the status of
the transfer between the server and the application.
Text of the html page
Let’s take
a closer look into the different parts of the code.
Regarding the first, as the classic:
< style >
#map {
width: 100%;
height: 800px;}
We define the map size
on our page: it will occupy the full width of the page and will be 800 pixels height.
<div id = “map
“> </ Div>
<div id = “desc
> Click on the map to set the starting point – click
again to set the end point – the route will be plotted </ div>
<div align = ‘center
»> <Img src = “0.png
»Id = “picture
»Width = »60″
height = “60”> </ div>
<button id = »clear
“> Clear </ button>
We insert the div of the map, below a line of text will be
used as a message area, and an image to indicate the transfer status and below
a Clear button that will reset the page. The
image 0.png is an empty image.
We find the reference at the openlayers library used:
<script src = “http://openlayers.org/en/v3.16.0/build/ol.js
“> </ Script>
and then the creation of our map:
var map = new ol.Map ({
target: ‘map’,
layers: [
new ol.layer.Tile ({
source:
new ol.source.OSM ()})],
view: new ol.View ({
center: [-500000, 6172000],
zoom: 12}),
controls: ol.control.defaults
({
attributionOptions: {
collapsible:
false }
})});
We load the OpenStreetMaps layer in our map, center the
display on the EPSG coordinates: 3857 from the center of our area of interest,
define the range displayed initially with the zoom factor (12) and finally the
desired controls .
The rest of the code refers to the points of departure and
arrival.
We create two features to accept these points
// The points of departure and arrival.
var startPoint = new ol.Feature ();
var destPoint = new ol.Feature ();
Then, we define a vector layer to display the points
// The vector layer used to display start and end
points .
var vectorLayer = new ol.layer.Vector ({
source: new ol.source.Vector ({
features: [startPoint, destPoint]})
});
map.addLayer ( vectorLayer);
We create a params variable with some fixed parameters of our
request being sent to Geoserver, the name of the Geoserver layer to query and
the desired format to receive the result.
var params = {
LAYERS: ‘pgrouting: itinerary’,
FORMAT: ‘image / png’
};
Then, we release a function of coordinates transformations.
OpenStreetMap works in spherical Pseudo-Mercator coordinates
(EPSG : 3857 ). But our PostGis data is in
geographic coordinates (EPSG : 4326 ).
When we get the click on the map, the coordinates will be
3857. We will have to transform to 4326 before sending the
request to Geoserver.
//
The coordinate transformation function from the EPSG: 3857
// towards EPSG:
4326 .
var transform = ol.proj.getTransform (‘EPSG:
3857′, ‘EPSG: 4326’);
Now we set up the event listening the click in our map.
This
part of the code will be activated when the user clicks on the map.
// Set up a listening on the events of the card.
map.on ( ‘click’, function (event) {
When the start point is empty, it indicates that this is the
first click on the map and that it is the starting point that must be filled in.
if (startPoint.getGeometry () == null) {
// First click.
startPoint.setGeometry ( new ol.geom.Point
(event.coordinate));
If, on the other hand, the start point has already been renamed,
we are in the presence of the second click. Therefore,
we will inform the destPoint:
} else if (destPoint.getGeometry () == null) {
// Second click.
destPoint.setGeometry ( new ol.geom.Point (event.coordinate));
And we go straight to the process of submitting the request
to Geoserver.
We transform the coordinates of the two clicked points:
// Transformations of coordinates from that of the map
(EPSG: 3857)
// to that of the server (EPSG: 4326).
var startCoord = transform
(startPoint.getGeometry (). getCoordinates ());
var destCoord = transform (destPoint.getGeometry ().
getCoordinates ());
and we build the string with the parameters x1, y1, x2 and y2
needed by our Geoserver layer (see previous article)
var viewparams = [
‘x1:’ + startCoord [0], ‘y1:’ + startCoord [1],
‘x2:’ + destCoord [0], ‘y2:’ + destCoord [1]
];
Now, we have all the necessary elements to build the message
to be sent to Geoserver. We add this message in a variable
source.
params.viewparams = viewparams.join ( ‘;’);
var source = new ol.source.ImageWMS ({
url: ‘http: // localhost: 8080 / geoserver / pgrouting /
wms’,
params: params
And we send the request to Geoserver asking to add the result
in a new Image layer (we have asked the return as a png image a little higher)
to be displayed in our map
result = new ol.layer.Image ({
source: source
Since the query is not instantaneous, it is better to keep
the user informed of what is happening without forcing him to stay in front of
a seemingly frozen screen.
The following lines display a message text and an image
showing that the request is in progress, and when the transfer is complete,
indicating whether it has been successful or not.
source.on ( ‘imageloadstart’, function () {
document.getElementById ( ‘
desc “)
.InnerHTML = “loading…
“;
document.getElementById ( ‘
picture “)
.Src = “tree_loading.gif
“;
});
source.on (‘imageloadend’, function () {
document.getElementById ( ‘
desc “)
.InnerHTML = »Finished OK!
“;
document.getElementById ( ‘
picture “)
.Src = “OK.jpg
“;
});
source.on (‘imageloaderror’, function () {
document.getElementById ( ‘
desc “)
.InnerHTML = “fault!
“;
document.getElementById ( ‘
picture “)
.Src = “no.png
“;
});
We load the layer in our map:
map.addLayer ( result);
Finally, we process the click with the Clear button:
var clearButton = document.getElementById (‘clear’);
clearButton.addEventListener (‘click’, function (event) {
// Reset the entities “
start »And«
destination ».
startPoint.setGeometry ( null);
destPoint.setGeometry (null);
document.getElementById ( ‘
desc “)
.InnerHTML = Click on the map to set the
starting point – click again to set the finishing point – the route will be
drawn “;
document.getElementById ( ‘
picture “)
.Src = “0.png
“;
// Remove the result layer.
map.removeLayer ( result);
});
By emptying the startPoint and destPoint entities , by adding
the homepage and the blank image blank and deleting the vector layer contained
in the previous route.
We can open this page in our browser and see the application operate:
We can open this page in our navigator and see the application.
