After receiving a response from the server, I found that I needed to restructure it to fit the GeoJSON standard in order to use it for marker animation in Leaflet. The coordinates also needed to be flipped, as Leaflet uses lat, lng while my data was in lng, lat format from Geoserver.
Here is a good reference for the GeoJSON standard, and the datatype I require is MultiLineString, as shown on page 24.
UPDATED:
I was able to get the proper JSON structure for MultiLineString,
[[[lat,lng],[lat,lng]], [lat,lng],[lat,lng]]...However, when using the restructured variable (flippedCoords) to create a polyline and animate a marker over it, I encountered bugs. The console did not show any errors, but other layers started behaving strangely as soon as the response was loaded and I zoomed in/out.
Here is the ajax call and attempt to structure the response:
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){
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);
flippedCoords = flipCoor.map(function(obj){
return Object.values(obj).map(function(obj){
return Object.values(obj)
})
})
//code below is from Animate marker plugin and works fine with linestring
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);
};