0

I am trying to develop a routing application. I have published my layers and SQL view on GeoServer. Currently I am trying to display my pgRouting Layer on my leaflet map using markers as start and end points. The route does not display. The markers get the start and and end point coordinates but do not display the route. I have created the following code:

var selectedPoint = null;

var sourceMarker = L.marker([33.5183, 73.1789], {
    draggable: true
})
.on("dragend", function(e) {
    selectedPoint = e.target.getLatLng(); console.log(selectedPoint)
    getRoute(); 
})
.addTo(map); 

// draggbale marker for destination point.Note the marker is initialized with an initial destination positon
var targetMarker = L.marker([33.5191, 73.1768], {
    draggable: true
})
.on("dragend", function(e) {
    selectedPoint = e.target.getLatLng(); console.log(selectedPoint)
    getRoute(); 
})
.addTo(map); 

function getRoute(){
    var start = sourceMarker.getLatLng();  console.log(start)
    var end = targetMarker.getLatLng();   
    var viewparams = [
        'y1:' + start.lng, 'x1:' + start.lat,
        'y2:' + end.lng, 'x2:' + end.lat
      ];
      var routing = L.tileLayer.wms('http://localhost:8010/geoserver/wms' , {
        layers: 'IST_Mosaic:pgRouting',
        format: 'image/png',
        transparent: true
    });
    routing.addTo(map); console.log(routing)
}
getRoute();

The Request Parameters for OpenLayers and Leaflet (viewed using Browser Debugger) are different.

For OpenLayers:

'http://localhost:8010/geoserver/IST_Mosaic/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=IST_Mosaic%3ApgRouting&viewparams=x1%3A73.17880344047548%3By1%3A33.51828211053321%3Bx2%3A73.1764323677063%3By2%3A33.51912291147366&CRS=EPSG%3A3857&STYLES=&WIDTH=2025&HEIGHT=900&BBOX=8144985.631309435%2C3963897.360405983%2C8147404.146657521%2C3964972.2561162435'

For Leaflet:

'http://localhost:8010/geoserver/wms?service=WMS&request=GetMap&layers=IST_Mosaic%3ApgRouting&styles=&format=image%2Fpng&transparent=false&version=1.1.1&height=256&width=256&srs=EPSG%3A3857&bbox=8145741.230294664,3964024.2868692423,8146046.978407806,3964330.0349823823'

The Code working successfully in OpenLayers Looks like this:

var params = {
    LAYERS: 'IST_Mosaic:pgRouting',
    FORMAT: 'image/png',
    REQUEST: 'GetMap'
  }

  // The "start" and "destination" features.
  var startPoint = new ol.Feature();
  var destPoint = new ol.Feature();

  // The vector layer used to display the "start" and "destination" features.
  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [startPoint, destPoint]
    })
  });
  map.addLayer(vectorLayer);

  // A transform function to convert coordinates from EPSG:3857
  // to EPSG:4326.
  var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');

  // Register a map click listener.
  map.on('click', function(event) {
    if (startPoint.getGeometry() == null) {
      // First click.
      startPoint.setGeometry(new ol.geom.Point(event.coordinate));
    } else if (destPoint.getGeometry() == null) {
      // Second click.
      destPoint.setGeometry(new ol.geom.Point(event.coordinate));
      // Transform the coordinates from the map projection (EPSG:3857)
      // to the server projection (EPSG:4326).
      var startCoord = transform(startPoint.getGeometry().getCoordinates());
      var destCoord = transform(destPoint.getGeometry().getCoordinates());
      console.log(startCoord,destCoord);
      var viewparams = [
        'x1:' + startCoord[0], 'y1:' + startCoord[1],
        'x2:' + destCoord[0], 'y2:' + destCoord[1]
      ];
      console.log(viewparams);
      params.viewparams = viewparams.join(';');
      result = new ol.layer.Image({
        source: new ol.source.ImageWMS({
          url: 'http://localhost:8010/geoserver/IST_Mosaic/wms',
          params: params
        })
      });
      console.log(result)
      map.addLayer(result);
    }
  });

In Leaflet, the function gets the coordinates after the marker is dragged and stopped but the route layer does not show. I have tried the same in OpenLayers and it works fine. I can't seem to figure out the issue. Can anyone suggest a solution or a useful hint? I am really stuck.

  • 1
    What do you see in browser debugger, network section? What do the requests look like? Did you compare them with requests in OpenLayers implementation where things work? You are setting viewparams object, but it's not used anywhere. – TomazicM Jul 20 at 19:07
  • Using console.log to check, the source marker and target marker get the coordinates when I stop dragging them. And I also get all the parameters for pgRouting layer as well. The crs, wms params etc all display properly in the browser debugger. But the layer does not display. In OpenLayers the layer shows similar params. I can't see any difference in the params for both. – Mohid Jul 21 at 8:12
  • 1
    I’m voting to close this question because it's been cross-posted to stackoverflow.com/questions/63010294/… – IvanSanchez Jul 21 at 9:48
  • 1
    Edit your question and include both requests in the body of the question. And delete cross-posted question on StackOverflow, otherwise this one is most likely to be closed. – TomazicM Jul 21 at 18:05
  • 1
    Done. I have deleted the stack overflow question and updated this one. – Mohid Jul 21 at 19:09
2

If you look at OpenLayers WMS request that is working, then Leaflet WMS request should be constructed using the same parameters:

var viewparams = 'y1:' + start.lat + ';' + 'x1:' + start.lng + ';' + 'y2:' + end.lat + ';' + 'x2:' + end.lng

var routing = L.tileLayer.wms('http://localhost:8010/geoserver/IST_Mosaic/wms', {
  layers: 'IST_Mosaic:pgRouting',
  format: 'image/png',
  transparent: true,
  version: '1.3.0',
  viewparams: viewparams
});
| improve this answer | |
  • This shows when I move my markers, but it's still not visible on the map. – Mohid Jul 22 at 7:25
  • The network actually shows me many pgRouting layers with different coordinates, but the link I mentioned in the above comment is the only time it displays when viewed using wms. – Mohid Jul 22 at 7:32
  • Thanks for your help so far, though. I feel like I am close to a solution. – Mohid Jul 22 at 7:49
  • I have added the OpenLayers code that is working for me in the Question. Maybe that will help to find a solution – Mohid Jul 22 at 8:03
  • Ups, only now I realized I included OpenLayers code instead of Leaflet code in my answer. I'll correct this later today. – TomazicM Jul 22 at 8:07

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.