Closed binchik closed 7 years ago
Hi, @binchik! Thank you πΈ Could you be a little more specific? Maybe a demo in Yandex Maps Sandbox, that I can look at?
@gribnoysup, a user can build routes using RouteEditor
control. Is it possible to draw routes programmatically? Here is a demo on jsfiddle:
@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
@gribnoysup, that is super helpful. Thanks!
How to drawing Routing A and B points?
Hi, @gribnoysup, awesome library. Is there a way to draw a route from point A to point B?