Build route from coordinates

[binchik]

Hi, @gribnoysup, awesome library. Is there a way to draw a route from point A to point B?

[gribnoysup]

Hi, @binchik! Thank you 😸 Could you be a little more specific? Maybe a demo in Yandex Maps Sandbox, that I can look at?

[binchik]

@gribnoysup, a user can build routes using RouteEditor control. Is it possible to draw routes programmatically? Here is a demo on jsfiddle:

http://jsfiddle.net/xhwom6aw/

[gribnoysup]

@binchik right now there are no react elements for route, but it is certainly worth adding to the library!

Although it is not possible with some kind of react elements, there is a possible solution, as you always have an access to yandex.maps Map (and any other) instance, the solution could look something like this:

import React from 'react'
import { YMaps, Map } from 'react-yandex-maps'

const mapState = {
  center: [55.751574, 37.573856],
  zoom: 9,
  controls: []
}

class Example extends React.Component {
  constructor() {
    super()
    this.map = null
  }

  onApiAvaliable(ymaps) {
    ymaps.route([
      'Королев',
      { type: 'viaPoint', point: 'Мытищи' },
      'Химки',
      { type: 'wayPoint', point: [55.811511, 37.312518] }
    ], {
      mapStateAutoApply: true
    }).then((route) => {
      route.getPaths().options.set({
        // в балуне выводим только информацию о времени движения с учетом пробок
        balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
        // можно выставить настройки графики маршруту
        strokeColor: '0000ffff',
        opacity: 0.9
      });

      // добавляем маршрут на карту
      this.map.geoObjects.add(route);
    });
  }

  render() {
    return (
      <YMaps onApiAvaliable={(ymaps) => this.onApiAvaliable(ymaps)}>
        <Map 
          state={mapState} 
          instanceRef={(ref) => this.map = ref}
        />
      </YMaps>
    )
  }
}

export default Example

Here is a webpackbin with working example

[binchik]

@gribnoysup, that is super helpful. Thanks!

[namazbaev]

How to drawing Routing A and B points?