Routing Layer does not show on Leaflet Map

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.

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
});