here map - add points on polyline to manipulate routing - polyline

Question

I have to create with "here maps" routing with the possibility of manipulating it (eg: add drag on some points on a polyline, move it somewhere, add there next checkpoint, and recalculate the route). I have no problem with clicking on polyline and get coordination of new checkpoint. I know, more or less, how to add drag and drop to it. But however I try, I can't add new point on polyline.
I try to get something like that: https://wego.here.com/directions/drive/ulica-Kolejarzy,-44-102-Gliwice,-Poland:loc-dmVyc2lvbj0xO3RpdGxlPXVsaWNhK0tvbGVqYXJ6eTtsYW5nPXBsO2xhdD01MC4zMDYwNDtsb249MTguNjkwNztzdHJlZXQ9dWxpY2ErS29sZWphcnp5O2NpdHk9R2xpd2ljZTtwb3N0YWxDb2RlPTQ0LTEwMjtjb3VudHJ5PVBPTDtkaXN0cmljdD1HbGl3aWNlO3N0YXRlPVdvai4rJUM1JTlBbCVDNCU4NXNraWU7Y291bnR5PUdsaXdpY2U7Y2F0ZWdvcnlJZD1zdHJlZXQtc3F1YXJlO3NvdXJjZVN5c3RlbT1pbnRlcm5hbDtwZHNDYXRlZ29yeUlkPTkwMC05NDAwLTA0MDE/ulica-Mostowa,-43-600-Jaworzno,-Poland:loc-dmVyc2lvbj0xO3RpdGxlPXVsaWNhK01vc3Rvd2E7bGFuZz1wbDtsYXQ9NTAuMjA3Njk7bG9uPTE5LjI1NTc0O3N0cmVldD11bGljYStNb3N0b3dhO2NpdHk9SmF3b3J6bm87cG9zdGFsQ29kZT00My02MDA7Y291bnRyeT1QT0w7ZGlzdHJpY3Q9SmF3b3J6bm87c3RhdGU9V29qLislQzUlOUFsJUM0JTg1c2tpZTtjb3VudHk9SmF3b3J6bm87Y2F0ZWdvcnlJZD1zdHJlZXQtc3F1YXJlO3NvdXJjZVN5c3RlbT1pbnRlcm5hbDtwZHNDYXRlZ29yeUlkPTkwMC05NDAwLTA0MDE?map=50.25857,18.97158,11,normal . You know, thwn you can drag and drop this polyline and add more checkpoints
Belowe I put my code with some comments. There is method "manipulatePolylineOnClick" there I got new coordinates by click and want to add it to polyline. But I really don't know how.
export function createRoute(origin, destination, via, platform, map) {
let routingParameters = {
'routingMode': 'fast',
'transportMode': 'truck',
'return': 'polyline'
};
setRoutingParameters(routingParameters, origin, destination, via)
var router = platform.getRoutingService(null, 8);
var onResult = function (result) {
if (result.routes.length) {
result.routes[0].sections.forEach((section) => {
//create polyline
let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
let routeLine = new H.map.Polyline(linestring, {
style: {strokeColor: 'red', lineWidth: 3}
});
// needed to polyline drag and drop
let verticeGroup = new H.map.Group({
visibility: false
});
let mainGroup = new H.map.Group({
volatility: true, // mark the group as volatile for smooth dragging of all it's objects
objects: [routeLine, verticeGroup]
});
let polylineTimeout;
routeLine.draggable = true;
//my method that should add poitnts to manimupate route, and allow to do it
manipulatePolylineOnClick(routeLine, map, verticeGroup)
let startMarker = new H.map.Marker(section.departure.place.location);
let endMarker = new H.map.Marker(section.arrival.place.location);
map.addObjects([routeLine, startMarker, endMarker]);
map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
});
}
};
router.calculateRoute(routingParameters, onResult,
function(error) {
alert(error.message);
});
}
function setRoutingParameters(routingParameters, origin, destination, via) {
routingParameters['origin'] = origin
routingParameters['destination'] = destination
}
function manipulatePolylineOnClick(polyline, map, verticeGroup) {
const svgCircle = '<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
'<circle cx="10" cy="10" r="7" fill="transparent" stroke="red" stroke-width="4"/>' +
'</svg>';
// so, I have new coordinates on click in coord variable. But what I have to do, to add it to polyline?
polyline.addEventListener('tap', function (e) {
let coord = map.screenToGeo(e.currentPointer.viewportX, e.currentPointer.viewportY);
//it's not working
let vertice = new H.map.Marker(
coord,
{
icon: new H.map.Icon(svgCircle, {anchor: {x: 20, y: 20}})
}
);
vertice.draggable = true;
// vertice.setData({'verticeIndex': index})
verticeGroup.addObject(vertice);
console.log('coord', coord)
})
}