[GIS] openlayers 3 pgrouting: unable to get lat/long by clicking on the map

Question

I followed all the steps from the pgrouting workshop using pg routing 2.0 and geoserver 2.5 from this site http://workshop.pgrouting.org/ .

I can generate an itinerary in QGis by requesting Postgres below:

I need some help because I'm stuck when I tried to get a an itinerary. In fact, when I click on the map I can not get the long/lat for the startpoint and the endpoint. I'm wondering if I have done something wrong problem with the geoserver configuration. I created my map html code from this file: https://github.com/pgRouting/workshop/blob/master/web/ol3-routing-final.html

Update 15 May: I have this error below in the browser. I used the ol.js and the file ol.css from ol3js.org. I did not use the files from the workshop because they do not work.

Here is my html file:
Thanks for your help

#map {
height: 500px;
width: 100%;
}

OpenLayers 3 example

My Map

start
final

<button id="clear">clear</button>

<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View2D({
      center: [-8579550, 4710226],
      zoom: 15
    })
  });

  var params = {
    LAYERS: 'pgrouting:pgrouting',
    FORMAT: 'image/png'
  };

  var startPoint = new ol.Overlay({
    map: map,
    element: document.getElementById('start-point')
  });
  var finalPoint = new ol.Overlay({
    map: map,
    element: document.getElementById('final-point')
  });

  var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');

  map.on('click', function(evt) {
    var coordinate = evt.getCoordinate();
    if (startPoint.getPosition() == undefined) {
      // first click
      startPoint.setPosition(coordinate);
    } else if (finalPoint.getPosition() == undefined) {
      // second click
      finalPoint.setPosition(coordinate);

      // transform the coordinates from the map projection (EPSG:3857)
      // into the server projection (EPSG:4326)
      var startCoord = transform(startPoint.getPosition());
      var finalCoord = transform(finalPoint.getPosition());
      var viewparams = [
        'x1:' + startCoord[0], 'y1:' + startCoord[1],
        'x2:' + finalCoord[0], 'y2:' + finalCoord[1]
      ];
      params.viewparams = viewparams.join(';');

      // we now have the two points, create the result layer and add it to the map
      result = new ol.layer.ImageLayer({
        source: new ol.source.SingleImageWMS({
          url: 'http://localhost:8080/geoserver/pgrouting/wms',
          params: params
        })
      });
      map.addLayer(result);
    }
  });

  document.getElementById('clear').addEventListener('click', function(event) {
    // hide the overlays
    startPoint.setPosition(undefined);
    finalPoint.setPosition(undefined);

    // remove the result layer
    map.removeLayer(result);
  });

</script>

Answer 1

At a glance it seems your calling this function: evt.getCoordinate()

 var coordinate = evt.getCoordinate();

But to actually get the coordinates you should use this line instead

var coordinate = evt.coordinate;

Hope this helps