I'm creating a map, then a route, using RouteService V8, so i get the result from routeservice, break in sections to create a polyline and then show in map. I would like to know how can i make this route draggable like the wego plataform of here when i set destinations and can change the routing by clincking in the line and drag to change. I saw a question like mine, but i wasnt able to understand the code. This Question I Didnt understand what alternatives are and how to handle a draggable polyline, note that i dont want do change my origin, destination point and neither my vias, just the 'leg' betwen the points.
My code to create and display the route:
var map;
var platform = new H.service.Platform({ apikey: mykey });
var defaultLayers = platform.createDefaultLayers();
map = new H.Map(document.getElementById("map"), defaultLayers.vector.normal.map, {
center: { lat: centerLat, lng: centerLong },
zoom: 13,
pixelRatio: window.devicePixelRatio || 1,
});
window.addEventListener("resize", () => map.getViewPort().resize());
behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
uiMapa = H.ui.UI.createDefault(map, defaultLayers);
map.addEventListener( "tap",function (evt) {
},false);
...
function genereteRoute() {
var routingParameters = {
routingMode: "fast",
transportMode: "car",
origin: origin,
via: new H.service.Url.MultiValueQueryParameter(vias),
destination: destination,
return: "polyline,summary,routeHandle",
};
// CALLBACK
var onResult = function (result) {
console.log("result:" + JSON.stringify(result));
if (result.routes.length) {
result.routes[0].sections.forEach((section) => {
let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
let routeLine = new H.map.Polyline(linestring, {
style: { strokeColor: "blue", lineWidth: 3 },
});
linhaRota.push(routeLine);
map.addObjects([routeLine]);
});
}
calcularTempoDistancia(result.routes[0]);
};
var router = platform.getRoutingService(null, 8);
router.calculateRoute(routingParameters, onResult, function (error) {
alert(error.message);
});
}