function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=2.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json`;
var routeLayer = L.geoJSON(null);
$.ajax({
url: urlRoute,
async: false,
success: function(response){
routeLayer = L.geoJSON(response)
goPark(urlRoute);
}
})
map.addLayer(routeLayer);
};
function goPark(urlRoute){
$.ajax({
url: urlRoute,
asnyc: false,
success: function(data) {
coordinatesArr = data.features
console.log(coordinatesArr);
var coordsArr = Object.keys(coordinatesArr).map(key => {
return coordinatesArr[key]
});
xxy = coordsArr.map(function(feature){
var obj = feature.geometry.coordinates[0];
return Object.keys(obj).map(function(key){
return obj[key];
})
});
/*line below ensures flipping coordinates to LatLng with MultiLineString
structure where xxy is array and 1 allows to reach nested value. This
value can be decreased as well as increased depending how deep the
value is nested*/
var flipCoor = L.GeoJSON.coordsToLatLngs(xxy, 1);
var flippedCoor = flipCoor.map(function(obj){
return Object.values(obj)
})
var myArray = [].sort().concat(...flippedCoor);
var lineString = L.polyline(myArray);
var secondAnimated = L.animatedMarker(lineString.getLatLngs(), {
distance: 500,
interval: 50,
iconSize:[14,14],
iconAnchor: [7, 14],
//autostart: false,
icon: pulsingIcon,
onEnd: function(){
alert("Parked")
}
});
map.addLayer(secondAnimated);
}
})
}
function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=2.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json`;
var routeLayer = L.geoJSON(null);
$.ajax({
url: urlRoute,
async: false,
success: function(response){
routeLayer = L.geoJSON(response)
goPark(urlRoute);
}
})
map.addLayer(routeLayer);
};
function goPark(urlRoute){
$.ajax({
url: urlRoute,
asnyc: false,
success: function(data) {
coordinatesArr = data.features
console.log(coordinatesArr);
var coordsArr = Object.keys(coordinatesArr).map(key => {
return coordinatesArr[key]
});
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);
var flippedCoor = flipCoor.map(function(obj){
return Object.values(obj)
})
var myArray = [].sort().concat(...flippedCoor);
var lineString = L.polyline(myArray);
var secondAnimated = L.animatedMarker(lineString.getLatLngs(), {
distance: 500,
interval: 50,
iconSize:[14,14],
iconAnchor: [7, 14],
//autostart: false,
icon: pulsingIcon,
onEnd: function(){
alert("Parked")
}
});
map.addLayer(secondAnimated);
}
})
}
function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=2.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json`;
var routeLayer = L.geoJSON(null);
$.ajax({
url: urlRoute,
async: false,
success: function(response){
routeLayer = L.geoJSON(response)
goPark(urlRoute);
}
})
map.addLayer(routeLayer);
};
function goPark(urlRoute){
$.ajax({
url: urlRoute,
asnyc: false,
success: function(data) {
coordinatesArr = data.features
console.log(coordinatesArr);
var coordsArr = Object.keys(coordinatesArr).map(key => {
return coordinatesArr[key]
});
xxy = coordsArr.map(function(feature){
var obj = feature.geometry.coordinates[0];
return Object.keys(obj).map(function(key){
return obj[key];
})
});
/*line below ensures flipping coordinates to LatLng with MultiLineString
structure where xxy is array and 1 allows to reach nested value. This
value can be decreased as well as increased depending how deep the
value is nested*/
var flipCoor = L.GeoJSON.coordsToLatLngs(xxy, 1);
var flippedCoor = flipCoor.map(function(obj){
return Object.values(obj)
})
var myArray = [].sort().concat(...flippedCoor);
var lineString = L.polyline(myArray);
var secondAnimated = L.animatedMarker(lineString.getLatLngs(), {
distance: 500,
interval: 50,
iconSize:[14,14],
iconAnchor: [7, 14],
//autostart: false,
icon: pulsingIcon,
onEnd: function(){
alert("Parked")
}
});
map.addLayer(secondAnimated);
}
})
}
In case anyone is stuck with Animation plugins in Leaflet when using MultiLine features it is good to know that most of them will not accept such structure of JSON/GeoJSON where values, in this case coordinates, are nested a bit deeper when comparing with simple LineString features whose structure is like Array of Objects and in my case looks so:
[{lat,lng},{lat,lng}{lat,lng}...]
Such structure and order of coordinates in Leaflet will allow getLatLngs() method in Animation Marker plugin to do it´s work even tough our data comes from server as MultiLineString.
My second issue along with trying to de-structure response was jQuery ajax call. I was using single call to create an object from response and to "manipulate" response and use it for Animation marker creation at the same time. I guess this is not recommendable so hopefully someone here can confirm it and explain it better. When I was working with single call response my coordinates would mix up somehow and I would never reach desired LineString structure with coordinates in right order.
Therefore I split the call in two, one for creating route layer, other for creating Animation Marker and got result I wanted right away.
function getFinalRoute(){
var urlRoute = `${geoserver}/wfs?service=WFS&version=2.0.0&request=GetFeature&
typeName=xxx:shortestpath&viewparams=source:${source};target:${targetN || targetE}&outputformat=application/json`;
var routeLayer = L.geoJSON(null);
$.ajax({
url: urlRoute,
async: false,
success: function(response){
routeLayer = L.geoJSON(response)
goPark(urlRoute);
}
})
map.addLayer(routeLayer);
};
function goPark(urlRoute){
$.ajax({
url: urlRoute,
asnyc: false,
success: function(data) {
coordinatesArr = data.features
console.log(coordinatesArr);
var coordsArr = Object.keys(coordinatesArr).map(key => {
return coordinatesArr[key]
});
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);
var flippedCoor = flipCoor.map(function(obj){
return Object.values(obj)
})
var myArray = [].sort().concat(...flippedCoor);
var lineString = L.polyline(myArray);
var secondAnimated = L.animatedMarker(lineString.getLatLngs(), {
distance: 500,
interval: 50,
iconSize:[14,14],
iconAnchor: [7, 14],
//autostart: false,
icon: pulsingIcon,
onEnd: function(){
alert("Parked")
}
});
map.addLayer(secondAnimated);
}
})
}
Slovenac thanks for revealing important information in comments section @TomazicM :)
lang-js