2

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:

routing in Qgis

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.

enter image description here

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>

5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.