Как автоматизировать прокладку маршрута на карте яндекса

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
 
<style> 
body, #map, #overlay, svg, #bg { 
    position: absolute; 
    margin: 0; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 
#bg { 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.5); 
    pointer-events: all;   
} 
button, textarea { 
    pointer-events: all; 
} 
textarea { 
    position: absolute; 
    width: 400px; 
    height: 300px; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%) 
} 
#ui { 
    pointer-events: none; 
    position: absolute; 
    padding: 5px; 
} 
path { 
    fill: none; 
    stroke-width: 2.2; 
    stroke: red; 
} 
circle { 
    pointer-events: all; 
    stroke: red; 
    stroke-width: 1.5px; 
    fill: #fff; 
    fill-opacity: .2; 
    cursor: move; 
} 
.selected { 
    fill: #ff7f0e; 
    stroke: #ff7f0e; 
} 
.hidden { 
    display: none !important; 
} 
.buttons { 
    position: absolute; 
    width: 150px; 
} 
button { 
    display: inline; 
} 
</style> 
 
<div id="map"></div> 
<div id="overlay" class='hidden'> 
    <svg></svg> 
</div> 
<div id="ui"> 
    <div id="bg" class='hidden'> 
        <textarea></textarea> 
    </div> 
    <div class="buttons"> 
        <button class='fa fa-2x fa-code'></button> 
        <button class='fa fa-2x fa-route'></button> 
    </div> 
</div> 
 
<script> 
 
let lat = 60; 
let lon = 30.3; 
let zoom = 15; 
let yMaps; 
 
let points = []; 
let transform = {}; 
let dragged = null; 
let selected = points[points.length-1]; 
 
let line = d3.line().curve(d3.curveLinear); 
let svg = d3.select("svg"); 
let canvas = svg.append('g'); 
 
let path = canvas.append("path") 
    .datum(points); 
 
svg.on("mousedown", mousedown) 
    .on("mousemove", mousemove) 
 
d3.select(window) 
    .on("mouseup", mouseup) 
    .on("resize", adjustSize); 
 
d3.select('.fa-route').on('click', showOverlay); 
d3.select('.fa-code').on('click', showCode); 
 
window.oncontextmenu = () => false; 
ymaps.ready(startmap); 
svg.call(createZoom()); 
adjustSize(); 
redraw(); 
 
function showCode() { 
    toggleElement('#bg'); 
    let div = d3.select(document.createElement('div')) 
        .html(svg.node().outerHTML) 
    div.select('svg') 
        .attr('zoom', yMaps.getZoom()) 
        .attr('lat', yMaps.getCenter()[0]) 
        .attr('lon', yMaps.getCenter()[1]); 
    div.selectAll('circle').remove(); 
    d3.select('#bg textarea').html(div.node().innerHTML); 
} 
 
function showOverlay() { 
    lat = yMaps.getCenter()[0]; 
    lon = yMaps.getCenter()[1]; 
    zoom = yMaps.getZoom(); 
    d3.select(this).classed('hidden', true); 
    toggleElement('#overlay', false); 
} 
 
function toggleElement(selector, isVisible) { 
    return d3.select(selector) 
        .node() 
        .classList 
        .toggle('hidden', isVisible) 
} 
 
function applyTransform() { 
    transform = d3.event.transform; 
    canvas.attr("transform", transform); 
    onTransform(transform); 
} 
 
function createZoom() { 
    return d3.zoom() 
        .filter(() => d3.event.button === 2) 
        .scaleExtent([1, 1]) 
        .on("zoom", applyTransform); 
} 
 
function adjustSize() { 
    let w = window.innerWidth; 
    let h = window.innerHeight; 
    svg.attr("width", w).attr("height", h) 
        .attr("viewBox", `${-w/2} ${-h/2} ${w} ${h}`); 
} 
 
function redraw() { 
 
    canvas.select("path").attr("d", line); 
 
    var circle = canvas.selectAll("circle.knob") 
        .data(points, d => d); 
 
    circle.exit().remove(); 
 
    let newNodes = circle.enter() 
        .append("circle") 
        .classed('knob', true) 
        .attr("r", 1e-6) 
        .on("mousedown", d => { 
            selected = dragged = d; 
            redraw(); 
        }) 
        .on("dblclick", deletePoint) 
        .transition() 
        .duration(250) 
        .attr("r", 6.5); 
 
    circle.merge(newNodes) 
        .classed("selected", d => d === selected) 
        .attr("cx", d => d[0]) 
        .attr("cy", d => d[1]); 
 
    if (d3.event) { 
        d3.event.preventDefault(); 
        d3.event.stopPropagation(); 
    } 
} 
 
function mousedown() { 
    if (d3.event.button !== 0) 
        return; 
    points.push(selected = dragged =  
                d3.mouse(canvas.node())); 
    redraw(); 
} 
 
function mousemove() { 
    if (!dragged) 
        return; 
    let m = d3.mouse(canvas.node()); 
    dragged[0] = m[0]; 
    dragged[1] = m[1]; 
    redraw(); 
} 
 
function mouseup() { 
    if (!dragged) 
        return; 
    mousemove(); 
    dragged = null; 
} 
 
function deletePoint(d) { 
    if (!selected) 
        return; 
    let i = points.indexOf(selected); 
    points.splice(i, 1); 
    selected = points.length ?  
        points[i > 0 ? i - 1 : 0] : null; 
    redraw(); 
} 
 
function startmap() { 
    yMaps = new ymaps.Map("map", { 
        center: [lat, lon], 
        zoom: 15, 
        controls: [] 
    }); 
} 
 
function onTransform(transform) { 
    var merc = Math.cos(yMaps.getCenter()[0]*Math.PI/180); 
    var z = zoom;// + Math.log2(transform.k); 
    var s = Math.pow(2, z-1) * 256 / 180 / merc; 
    yMaps.setCenter([ 
        lat + transform.y / s, 
        lon - transform.x / s / merc, 
    ]); 
  //  yMaps.setZoom(z+1); 
} 
 
</script>

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="1400" height="858" viewBox="0 0 1400 858" zoom="14" lat="60.02023833197165" lon="30.424723377333542">   
<defs> 
<path   transform="translate(700 429)" d="M-669,34L-434,-160L-218,-47L-202,-50L-199,-40L-194,-28L-147,-7L1,67L99,116L96,75L93,-5L88,-89L86,-158L86,-297L-47,-352L-161,-130L-63,-71L-9,-173"  stroke="red" stroke-width="2" fill="none">  
 </path> 
  <g id="Man" transform="translate(700 429) scale(1.5,-1.5)"> 
    <path   fill="none"> 
         <animate 
          attributeName="d" 
          begin="0s" 
          dur="0.25s" 
          repeatCount="indefinite" 
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0; 
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0; 
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/> 
    </path>  
	  </g> 
  </defs>	    
	    
<image xlink:href="https://i.stack.imgur.com/xKUKV.png" width="100%" height="100%" /> 
<path id="walk"  transform="translate(700 429)" d="M-669,34L-434,-160L-218,-47L-202,-50L-199,-40L-194,-28L-147,-7L1,67L99,116L96,75L93,-5L88,-89L86,-158L86,-297L-47,-352L-161,-130L-63,-71L-9,-173"  stroke="red" stroke-width="2" fill="none"> 
</path> 
 
<use xlink:href="#Man"  style="stroke:blue; fill:none;">  
     <animateMotion id="an1" 
       begin="0s" 
       dur="20s" 
       repeatCount="indefinite"  > 
          <mpath xlink:href="#walk"/> 
     </animateMotion>	  
</use>	   
    <use xlink:href="#Man"  style="stroke:purple; fill:none;">  
     <animateMotion id="an2" 
       begin="an1.begin+2s" 
       dur="19s" 
       repeatCount="indefinite"  > 
          <mpath xlink:href="#walk"/> 
     </animateMotion>	  
    </use>	 
<use xlink:href="#Man"  style="stroke:green; fill:none;">  
     <animateMotion id="an3" 
       begin="an2.begin+1s" 
       dur="18s" 
       repeatCount="indefinite"  > 
          <mpath xlink:href="#walk"/> 
     </animateMotion>	  
    </use>		 
 
</svg>	  
</div>