JSFiddle - React, Tailwind, and code Playground

by CostaConquesta

HTML

<div id="map" style="width:500px; height:400px"></div>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
    <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

JavaScript

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.745508, 37.435225],
            zoom: 13
        });

    ymaps.route([
        'Москва, улица Крылатские холмы',
        {
            point: 'Москва, метро Молодежная',
            type: 'viaPoint'
        },
        [55.731272, 37.447198], 
        'Москва, метро Пионерская'
    ]).then(function (route) {
        myMap.geoObjects.add(route);
        var way,
            segments,
	    alldist = 0,
	    flag = false,
	    dist =route.getLength()/2;
        for (var i = 0; i < route.getPaths().getLength(); i++) {
            way = route.getPaths().get(i);
            segments = way.getSegments();
            for (var j = 0; j < segments.length; j++) {
		alldist+=segments[j].getLength()
		if(alldist>dist){
			alldist -= segments[j].getLength();
			line = segments[j].getCoordinates();
			for(var p = 0; p<line.length - 2; p++){
				q = calculateDistance(line[p][0], line[p][1], line[p+1][0], line[p+1][1]);
				alldist+=q;
				if(alldist>dist){
					localdist= -(alldist-q-dist);
					coords = calculateCoordsPoint(line[p][0], line[p][1], line[p+1][0], line[p+1][1], localdist)
					console.log( [
						[parseInt(line[p][0]), parseInt(line[p][1])],
						[parseInt(line[p+1][0]), parseInt(line[p+1][1])]
					])
				    var ln = new ymaps.GeoObject({
					    geometry: {
						type: "LineString",
						coordinates: [
							[line[p][0], line[p][1]],
							[line[p+1][0], line[p+1][1]]
						]
					    },
					    properties:{
						hintContent: "Я геообъект",
						balloonContent: "Меня можно перетащить"
					    }
					}, {
					    draggable: true,
					    strokeColor: "#FFFF00",
					    strokeWidth: 0
					});
					myMap.geoObjects.add(ln)
					coordsOnPoint = ln.geometry.getClosest(coords);
					myMap.geoObjects.add(new ymaps.Placemark(coordsOnPoint.position));
					flag = true;
					break;
				}
			} 
		}
		if(flag) break;
            }
	    if(flag) break;
       ...