Skip to main content
1 of 5

Issue with using MultiLineString in Leaflet

This response on image below is coming from Geoserver and I restructured it because it had coordinates as lng, lat and I need lat, lng as Leaflet defines. Also coordinate pairs were saved as object { } so I had to convert those to Arrays...

This is view on Geoserver:

SELECT MIN(pgr.seq) AS seq,
   e.old_id AS id,
   e.name,
   e.type,
   SUM(e.distance) AS distance,
   ST_Collect(e.geom) AS geomFROM pgr_dijkstra('SELECT id, source, target,onewayNum as cost, r_cost as reverse_cost FROM parking.n_streets_noded',%source%,%target%, true) AS pgr, parking.n_streets_noded  AS e WHERE pgr.edge = e.id  GROUP BY e.old_id, e.name,e.type,e.geom

I have managed to get such JSON structure representing MultiLineString: [[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...] as seen on image.

See here

Problem is that I cant use restructured variable (see code below, flippedCoords) to create a polyline and animate marker over it, it doesnt give me any error response but it does give me bugs.. PS.This works fine with LineString.

This is Animation Marker Plugin I use

This is function with ajax call:

function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=1.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json
&srsName=EPSG:4326`;
var routeLayer = L.geoJSON(null);
var flippedCoords;
$.ajax({
    url: urlRoute,
    async: false,
    success: function(response){    
        console.log(response)
                var routeArr = response.features;
                var coordsArr = Object.keys(routeArr).map(key => {
                    return routeArr[key]
                })
                                        
                var xxy = coordsArr.map(function(feature){
                var obj = feature.geometry.coordinates[0];
                    return Object.keys(obj).map(function(key){
                        return obj[key];                        
                    })
                })

                var flipCoor = L.GeoJSON.coordsToLatLngs(xxy, 1);
                //console.log(flipCoor);
                flippedCoords = flipCoor.map(function(obj){
                    return Object.values(obj).map(function(obj){
                        return Object.values(obj)
                        })
                    })
                    //console.log(flippedCoords);
                //this is part from Animation Marker plugin which works nicely with LineStrings in my app                   
                var multiLineString =  L.polyline(flippedCoords); 
                var secondAnimated = L.animatedMarker(multiLineString.getLatLngs(), {
                                        distance: 10,
                                        interval: 2000,
                                        iconSize:[16,16],
                                        iconAnchor: [7, 16],
                                        //autostart: false,
                                        icon: pulsingIcon
                                                        
                                    });

                routeLayer = L.geoJSON(response);   
                map.addLayer(secondAnimated);
    }   
    
});     

    map.addLayer(routeLayer);       

};