I am a new Leaflet user and I have challenge to get shortest path by pgRouting, GeoServer and Leaflet as a front end application. I followed this tutorial pgRouting + GeoServer + Leaflet JS as a reference, I published layers on GeoServer and created SQL view for each function (nearest vertex, shortest path) successfully as explained in the videos.

the store name: routing layer name: nearest_vertex layer name: shortest_path

The problem with me in the last step, in Leaflet JS file I don't know what is the cause of the problem and how to solve it.

ERROR: Parsing error: Unexpected character '`'  var url = `${geoserverUrl}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=routing:nearest_vertex&outputformat=application/json&viewparams=x:${

Leafletjs script

var geoserverUrl = "http://localhost:8080/geoserver";
var selectedPoint = null;

var source = null;
var target = null;

// initialize our map
var map = L.map("map", {
    center: [30.00073607, 31.40345240],
    zoom: 16 //set the zoom level

//add openstreet map baselayer to the map
var OpenStreetMap = L.tileLayer(
        maxZoom: 19,
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

// empty geojson layer for the shortes path result
var pathLayer = L.geoJSON(null);

// draggable marker for starting point. Note the marker is initialized with an initial starting position
var sourceMarker = L.marker([30.00572470, 31.38871190], {
    draggable: true
    .on("dragend", function(e) {
        selectedPoint = e.target.getLatLng();

// draggbale marker for destination point.Note the marker is initialized with an initial destination positon
var targetMarker = L.marker([30.00476310, 31.39870580], {
    draggable: true
    .on("dragend", function(e) {
        selectedPoint = e.target.getLatLng();

// function to get nearest vertex to the passed point
function getVertex(selectedPoint) {
    var url = `${geoserverUrl}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=routing:nearest_vertex&outputformat=application/json&viewparams=x:${
        url: url,
        async: false,
        success: function(data) {
                selectedPoint.toString() === sourceMarker.getLatLng().toString()

// function to update the source and target nodes as returned from geoserver for later querying
function loadVertex(response, isSource) {
    var features = response.features;
    if (isSource) {
        source = features[0].properties.id;
    } else {
        target = features[0].properties.id;

// function to get the shortest path from the give source and target nodes
function getRoute() {
    var url = `${geoserverUrl}/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=routing:shortest_path&outputformat=application/json&viewparams=source:${source};target:${target};`;

    $.getJSON(url, function(data) {
        pathLayer = L.geoJSON(data);


<!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="">
    <meta name="author" content="">
    <title> Routing App</title>

    <!-- link the css files -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
    <link rel="stylesheet" href="css/app.css">

    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-icon-container">
                    <a href="#" class="navbar-icon pull-right visible-xs" id="nav-btn">
                        <i class="fa fa-bars fa-lg white"></i>
                <a class="navbar-brand" href="#"> Routing App</a>
    <div id="container">
        <!-- the map will go inside this div below -->
        <div id="map"></div>
        <!-- link to the js files -->
        <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
        <script src="js/app.js"></script>



html, body, #container {
  height: 100%;
  width: 100%;
  overflow: hidden;

body {
  padding-top: 50px;

/*this is important to give the map a height*/
#map {
  width: auto;
  height: 100%;

  • 1
    Sorry, but this last screen shot is unreadable. Please, post relevant JS code and error messages as text. – TomazicM Jun 19 at 13:17
  • edited and added js code – GIS Man Jun 19 at 14:06
  • Don't post pictures of errors please - it remains unreadable – Ian Turton Jun 19 at 14:35
  • ok thank you, it's possible to ask the same question without post picture? – GIS Man Jun 19 at 14:46
  • What environment you are trying to run this code? Back tick string syntax should work in all browsers, except IE11. – TomazicM Jun 20 at 10:35

You must have encountered CORS errors (error 403,404). Please press CTRL+SHIFT+I and show the errors in the console. If they are CORS errors then follow the following link and learn how to fix them https://www.youtube.com/watch?v=1qrikPfLBFs&t=24s

New contributor
kelvin is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • 1
    Please avoid link-only-answers as they die over time. Including the essentials or a summary will be helpful in future. – MrXsquared Jul 26 at 21:37

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.