Подскажите, можно ли получить instance карты, чтобы проделать что-нибудь в таком духе?

      // Adding first found geo object to the map.
      MyMap.geoObjects.add(firstGeoObject);
      // Scaling the map to the geo object viewport.
      MyMap.setBounds(bounds, {
        // Checking the availability of tiles at the given zoom level.
        checkZoomRange: true
      });

В api 2.1 присвоение instance происходит таким образом:

    var myMap = new ymaps.Map('map', {
        center: [55.753994, 37.622093],
        zoom: 9
    });

На сколько я понял, вы храните instance в state компонента Map. Можно ли как-то получить его из родительского компонента, где подключается YMaps?

<YMaps><Map state={ this.state }></Map></YMaps>

В итоге хотелось бы сделать так, чтобы при наборе в поле снаружи карты происходил автоматический ввод в строку поиска на самой карте.

Пытаюсь показать элемент поверх карты:

<YMaps>
  <div id="map-basics">
    <div style={{}} />
    <Map>
      ...
    </Map>
  </div>
</YMaps>

Карта не подзагружается.

Hello! Actually for component Map (m.b. for other components too), on componentWillReceiveProps hook, component will mount again instead of update.
That is because of check instance property of state. At that hook, component have old state, instead updated. Its can be noted from comment to that hook at react sources:

// Note: During these life-cycles, instance.props/instance.state are what
// ever the previously attempted to render - not the "current". However,
// during componentDidUpdate we pass the "current" props.
at updateClassInstance();

By this bug, component will initialize instance twice: once on component mount and then when component will recieve props imidiatly. New instance will replace old, initialized and this will cause bug on instanceRef, what be called twice.

как тут сделать myMap.behaviors.disable('scrollZoom')

Could you explain me how to attach my geoobjects to clusterer element?

                        <Clusterer options={{
                            preset: 'islands#invertedVioletClusterIcons',
                            clusterDisableClickZoom: true,
                            clusterHideIconOnBalloonOpen: false,
                            geoObjectHideIconOnBalloonOpen: false
                        }}>
                            <GeoObject
                                // The geometry description.
                                geometry={{
                                    type: 'Point',
                                    coordinates: [55.8, 37.8],
                                }}
                                // Properties.
                                properties={{
                                    // The placemark content.
                                    iconContent: 'Я тащусь',
                                    hintContent: 'Ну давай уже тащи',
                                }}
                                // Options.
                                options={{
                                    // The placemark's icon will stretch to fit its contents.
                                    preset: 'islands#blackStretchyIcon',
                                    // The placemark can be moved.
                                    draggable: true,
                                }}
                            />
                        </Clusterer>

fails with

Uncaught (in promise) TypeError: format.replace is not a function
at invariant (browser.js:41)
at Clusterer.js:156

I know that I can use instanceRef and add all geoobjects via ymaps API. But may be other case exists.

Thank you in advance

Компонент как то странно себя с Route. Если перейти на карту, потом на какой то другой маршрут,
потом опять на карту, то будет ошибка:

at Map.update (Map.js:114)
at Map.componentWillReceiveProps (Map.js:147)
at callComponentWillReceiveProps (react-dom.development.js:11527)

Hello, how I can use methods?

Будет ли поддержка React Native?

Если добавлять элементы по нарастающей, то instanceRef ссылается только на последний элемент, когда как ref — на каждый. Из-за этого невозможно получить ссылку на каждый элемент, если они добавлялись по нарастающей.

Пример, вывод в консоле, нажимаем на + над картой:
https://codesandbox.io/s/mzqx6y52m9

Жутко навелосипедил, но добился нужного поведения. Возможно все уже решено или есть более правильные пути?

Пример использования велосипеда...

<ActivePlacemark
  balloonContent={<div>Hello {this.state.time}</div>}
  ...
/>

components/active-placemark/index.js

import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { Placemark } from 'react-yandex-maps';

const makeLayout = (layoutFactory, component, contentKey) => {
  const Layout = layoutFactory.createClass('<div></div>', {
    build: function() {
      Layout.superclass.build.call(this);

      Layout.updateReactTree = () => ReactDOM.unstable_renderSubtreeIntoContainer(
        component,
        <div>{component.props[contentKey]}</div>,
        this.getElement().querySelector('div'),
      );

      Layout.updateReactTree();
    },
    clear: function() {
      Layout.updateReactTree = null;
      Layout.superclass.clear.call(this);
    },
  });

  return Layout;
};

class ActivePlacemark extends React.Component {
  static contextTypes = {
    ymaps: PropTypes.object.isRequired,
  };

  static propTypes = {
    balloonContent: PropTypes.node.isRequired,
  };

  constructor(props, context) {
    super(props);

    this.balloonLayout = makeLayout(
      context.ymaps.templateLayoutFactory, this, 'balloonContent');
  }

  componentDidUpdate(prevProps) {
    if (prevProps.balloonContent !== this.props.balloonContent) {
      if (this.balloonLayout.updateReactTree) {
        this.balloonLayout.updateReactTree();
      }
    }
  }

  render() {
    return (
      <Placemark
        {...this.props}
        options={{
          balloonContentLayout: this.balloonLayout,
          balloonPanelMaxMapArea: 0,
          ...this.props.options,
        }}
      />
    );
  }
}

export default ActivePlacemark;

export 'ListBox' was not found in 'react-yandex-maps'
export 'ListBoxItem' was not found in 'react-yandex-maps'

version 2.1.0

react-yandex-maps/es/index.js

export { YMaps } from './YMaps';
export { Map } from './Map';

export { GeoObject } from './GeoObject';
export { ObjectManager } from './ObjectManager';
export { Clusterer } from './Clusterer';
export { Control } from './Control';

export { Placemark, Polyline, Rectangle, Polygon, Circle } from './Helpers';

export { Button, FullscreenControl, GeolocationControl, RouteEditor, RulerControl, SearchControl, TrafficControl, TypeSelector, ZoomControl } from './Helpers';

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

Hello!
Is it a normal if I click on the map onMouseUp is triggered but if after click I move a cursor then nothing will happen(event won't triggered at all)..?

Is it possible to realize SuggestView in React?
I trying connect this function with my input id='suggest' but it's doesn't work for me

onApiAvaliable(ymaps) {
ymaps.load(() => {
      const suggestView = ymaps.SuggestView("suggest", {
        results: 10,
      });
}

  render() {
    return (
      <div className="panel panel-default" >
        <div className="panel-heading" >
          <h3 className="panel-title" >My blahblahblah</h3 >
        </div >
        <div className="panel-body">
          <form className="form-horizontal form-border" id="form" >
            <div className="form-group" >
              <label className="col-sm-3 control-label" >Project name</label >
              <div className="col-sm-6" >
                <input
                  type="text"
                  className="form-control"
                  id="suggest"
                />
              </div >
            </div >
          </form>
          <YMaps onApiAvaliable={ymaps => this.onApiAvaliable(ymaps)}> 
...

Please help me. I don't know why, but I have some problems with Js Array Map function in my code.

If i use smth like this:

                    <YMaps ymapsParams...>
                        <Map mapParams..>
                            {routes.map((route, i) => 
                                <Polygon polygonParams.../>
                            )}
                        </Map>
                    </YMaps>

Everything is okay.

But in case I use curly braces

                    <YMaps ymapsParams...>
                        <Map mapParams..>
                            {routes.map((route, i) => {
                                <Polygon polygonParams.../>
                            })}
                        </Map>
                    </YMaps>

There are no Polygon elements on my map and no errors provided in console.

Thank you in advance

Yandex updated their sandbox for Maps API. We should update documentation in this repo accordingly: https://tech.yandex.com/maps/jsbox/2.1/?from=techmapsmain

Можно ли строить маршруты? И как растянуть в слое 100% по ширине и высоте? Нашел размеры только в пикселах, а по построению маршрута вообще ничего не нашел.

А можно реализовать элемент управления RouteButton, вызывающий панель маршрутизации?

Есть RouteEditor, но это не то же самое.

Нету поддержки написания на Typescript? Нету declaration файла

Right now components that are not from this library are ignored when <Map> renders its children. This should be changed probably, React Components also should be rendered to allow something like this:

const MoscowCenter = () => 
    <Placemark geometry={{ coordinates: [55.751244, 37.618423] }} />

// ...

const MapContainer = () => 
    <Map>
        <MoscowCenter />
    </Map>

I want to use routes API to calculate a route length between two point. Can i access API without rendering YMaps component?

Добрый день, у меня появляется следующая ошибка при попытке сборки:

C:\code\webserver\vrch\node_modules\react-yandex-maps\main\util\api.js:36
    this.api = window[ns] || null;
               ^

ReferenceError: window is not defined

При замене строки на
this.api = typeof window !== 'undefined' ? (window[ns] || null) : null;
Всё заработало

Follow-up to this issue #14

I probably need to add support for router yandex.maps api. It could look something like this:

<Route>
    <Point value="Королев" />
    <Point type="viaPoint" value="Мытищи" />
    <Point type="wayPoint" value="Химки" />
    {/* shorthands */}
    <ViaPoint value="Москва, Кремль" />
    <WayPoint value={[55.811511, 37.312518]} />
</Route>

Помогите разобраться с элементами управления. Как их корректно убирать/добавлять, менять их расположение и внешний вид.

Что конкретно нужно:

1. Задать положение и внешний вид ZoomControl
2. Добавить одну кнопку (поверх карты), которая будет менять размер карты.

Например, есть координаты для точек:
65.173107, 167.959015
64.681627, 170.406987
65.012088, -175.840402
67.044523, -178.879519

точки с отрицательной долготой отобразятся на проекции карты слева, а те что с положительной долготой - справа.
("слева" и "справа" имеется в виду если сделать минимальный зум карты, то появится больше одной карты Мира и какие-то будут на одной части, а какие то на другой)

В чем может быть проблема?

Небольшой jsFiddle с Яндекс.Картами без использования обертки, на котором отображаются две точки с положительной и отрицательной долготой:
http://jsfiddle.net/awx6gnu8/14/

Нужно поменять курсор.
В оригинальном апи это делается так:

map.cursors.push('arrow');

https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/reference/util.cursor.Manager-docpage/

В вашей версии я не нашел реализации.
Костыльно оригинальный апи можно получить через события. Например

<Map
... onClick={this.handleClick}
>
...
handleClick(e){
        let arCoord = e.get('coords');
        // e.originalEvent.target.cursors.push('arrow');
        return false;
    }

Можно ли это сделать через ref или иным образом?

I have an array of points to render on a map. If I change it in some way (for example, change property of one point object that is used for marking currently active placemark) map gets re-rendered and I see flickering.
Is there any way to avoid it?

Как передать свой react-компонент в routeBalloonContentLayout?

Hi there.
How to get Yandex Maps API without rendering Map component.

<YMaps> <Map state={ { center: [55.76, 37.64], zoom: 10 } }> </Map> </YMaps>

Сама карта рендерится только после каких-либо изменений. (когда компонент апдейтится). Кто-нибудь знает почему такое может происходить?

Не могу разобраться, как с помощью этой библиотеки вызывать event клика на Placemark из компонента вне карты. Как я понял, нужно использовать instanceRef, но не могу понять, где прописывать подобие вот такой конструкции и как оно должно выглядеть в терминах этой библиотеки (пример с использованием Yandex API) относительно Placemark:
YMaps.Events.notify(placemark, placemark.Events.Click)

Столкнулся сегодня с проблемой, в консоли ошибка Uncaught (in promise) {status: "error", code: 403, message: "Invalid API key"}
На демо-стенде с компонентом та же песня

Привет. Не подскажешь как сделать получение местоположение пользователя? Я так понял надо использовать только не могу разобраться как с помощью него получить в каком городе находится пользователь. Например выводить в консоли название его города.

Не совсем понятно как реализовать с помощью этой библиотеки вот такой пример https://tech.yandex.com/maps/jsbox/2.1/object_manager_events
т.е. привязку событий?

#27
Для ГеоОбъекта создаваемого как в 27ом ишью все понятно, но каким образом вызывать метод компонента из balloonContentBody точки, созданной через ObjectManager?
Натолкните пожалуйста на правильное решение! Спасибо!

import React, {PureComponent} from 'react';
import { YMaps, Map, ObjectManager } from 'react-yandex-maps';
import { connect } from 'react-redux';
import { addressAdd } from '../../actions/addresses';
import points from './points.json';

class MapPVZ extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            mapState:{
             center: [55.751574, 37.573856],
             zoom: 9,
             behaviors: ['default', 'scrollZoom'],
             controls: ['zoomControl']
           }
        };
        this.dataConvert = this.dataConvert.bind(this);
        this.getPointData = this.getPointData.bind(this);
        this.getPointOptions = this.getPointOptions.bind(this);
        this.createAddress = this.createAddress.bind(this);
    };

    dataConvert(data){
        var features = [];
        data.map((pvz, idx) => {
            var tmpObj = {
                "type": "Feature",
                "id": idx,
                "geometry": {
                    "type": "Point",
                    "coordinates": [pvz.Latitude, pvz.Longitude]
                },
                "properties": this.getPointData(pvz)
            };
            return features.push(tmpObj);
        })
        return features;
    };

    getPointOptions(){
      return {
        iconLayout: 'default#imageWithContent',
        iconImageHref: "/iml-logo-s.png",
        iconImageSize: [34, 22],
        iconImageOffset: [-17, -11]
      };
    };

    createAddress(data){
        var normilized = {
            additionalInfo: data.WorkMode,
            address: data.Address,
            city: data.RegionCode,
            country: "Россия",
            externalId: "pref_"+ data.Code,
            isActive: true,
            postcode: data.Index,
            title: data.Code
        }

        console.log(normilized)
        this.props.addNewAddress(normilized);
    }

    getPointData(pvz){
        return {
            balloonContentBody:
                `<address>
                    <strong> ${pvz.Address} </strong>
                    <br/>Телефон: ${pvz.Phone}
                    <br/>Оплата картой: ${pvz.PaymentCard ? 'да' : 'нет'}
                    <br/><button onclick='this.createAddress(${pvz})' class="address-pvz__choose"><label for=${this.props.labelFor}>Доставить сюда!</label></button>
                </address>`
        }
    };

    render() {
        return (
            <YMaps>
                <div id="map-basics">
                    <Map state={this.state.mapState}>
                        <ObjectManager
                            options={{
                            clusterize: false
                            }}
                            objects={this.getPointOptions()}
                            features={this.dataConvert(points)}
                        />
                    </Map>
                </div>
            </YMaps>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        isAdding: state.addressIsAdding,
        config: state.getConfigSuccess
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        addressAdd: (data) => dispatch(addressAdd(data))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(MapPVZ);

Привет! Я пытаюсь сделать простейший виджет для получения координат по адресу и запутался.

У меня есть такая карта:

<YMaps>
  <Map>
    <SearchControl onResultShow={this.onResultShow} />
  </Map>
</YMaps>

В onResultShow я получаю только событие, в котором есть только индекс выбранного адреса. Если и сами адреса, но они закопаны в приватных свойствах.

Из АПИ Яндекс.Карт я узнал, что для получения данных о выбранной точке нужно использовать метод searchControl.getResult(index), но я не понимаю, как мне получить инстанс контрола. Я попробовал ref, но получаю null.

Возможно, мне не хватает какого-то фундаментального понимая здесь. Направь меня, пожалуйста.

Вернее обновление features касается только добавления/удаления объектов.
Ситуация следующая: юзер открывает баллун, в нем кнопка, при клике на неё меняется properties у геоОбъекта и это изменение не попадает в objectManager.

Hi.
This example doesn't work.

<YMaps.Map
    width={width}
    height={height}
    state={{
        center: center,
        zoom: zoom,
    }}
    options={{
        searchControlProvider: 'yandex#search',
    }}
    behaviors={{
        disable:['drag', 'rightMouseButtonMagnifier']
    }}
>

Need solution for rendering baloon content
i try make somethin like this

 <Placemark key={'placemark-' + uuid.v1()}
    geometry={{
        coordinates: [item.latitude, item.longitude],
    }}
    properties={{
        balloonContent: () => <span onClick={() => this.handleItemClick(item.id)}>item.name</span>,
        iconCaption: item.name
    }}
    options={{
        preset: 'islands#greenDotIconWithCaption',
        iconColor: '#aeca3b',
        controls: []
    }}
/>

but balloon content no rendering correctly

Создал с помощью библиотеки следующий компонент:

import React, { Component } from "react";
import { YMaps, Map as YandexMap, Placemark } from 'react-yandex-maps';

class Map extends Component {

render() {
const { mapPoints } = this.props
const mapCenter = [ mapPoints[0].lat, mapPoints[0].lng ]
const mapState = { center: mapCenter, zoom: 11 }

return (
      <YMaps>
        <YandexMap state={mapState} width={'100%'} height={'100%'}>
        {
          mapPoints.map( (item, key) => (
             <Placemark
                key={key}
                geometry={{
                  type: "Point",
                  coordinates: [ parseFloat(item.lat), parseFloat(item.lng) ],
                }}
                properties={{
                  // Проставляем цифры иконкам на карте
                  iconContent: key+1,
                  hintContent: 'Собственный значок метки',
                  balloonContent: 'Это красивая метка',
                }}
                options={{
                  iconShape: {
                    type: 'Point',
                    coordinates: [ parseFloat(item.lat), parseFloat(item.lng) ]
                  }
                }}
                onClick={function(){ console.log('Got clicked!') }}
              />
          ))
        } 
        </YandexMap>
      </YMaps>
    )
}
}

Карта отображается, точки отображаются, но клик по точкам ничего не дает. Если повесить onClick на <YandexMap/>, то клик на нее срабатывает, но мне нужен именно клик по <Placemark/>.

Добрый вечер! Использую react-starter-kit https://github.com/kriasoft/react-starter-kit для приложения. При добавлении тэга ListBox в консоле вываливаются ошибки, вида
Uncaught Error: Unable to find element with ID 1698. at invariant (invariant.js:42) at precacheChildNodes (ReactDOMComponentTree.js:101) at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:133) at handleTopLevelImpl (ReactEventListener.js:56) at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141) at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60) at Object.batchedUpdates (ReactUpdates.js:95) at dispatchEvent (ReactEventListener.js:145) invariant @ invariant.js:42 precacheChildNodes @ ReactDOMComponentTree.js:101 getClosestInstanceFromNode @ ReactDOMComponentTree.js:133 handleTopLevelImpl @ ReactEventListener.js:56 perform @ Transaction.js:141 batchedUpdates @ ReactDefaultBatchingStrategy.js:60 batchedUpdates @ ReactUpdates.js:95 dispatchEvent @ ReactEventListener.js:145
Пытаясь разобраться в чем дело, рассматривал различные варианты. При отключении функции server side rendering, все нормально. Полагаю, что проблема с этим элементом, ибо только при его использовании появляются ошибки данного вида.

Спасибо!

onUnmount component error:
Cannot read property 'remove' of undefined
in Control.js#L99

How to make a map fill 100% of height and width of its containing DOM element?

Сергей, добрый день!

Спасибо за отличный компонент!
Все здорово, но мелкая неприятность есть. На сколько я понимаю, в YMaps можно передавать функцию-обертку, вот здесь прописано. https://github.com/gribnoysup/react-yandex-maps/blob/master/src/YMaps.js#L62-L64
Я делаю так:

render(){

	return <YMaps
		children={function(yamaps){return <AutoComplete 
			yamaps={yamaps}
		/>}}
	>
  </YMaps>;
}

Но в консоли ловлю предупреждение "Failed prop type: Invalid prop children supplied to YMaps, expected a ReactNode.", хотя рендерится то, что я хочу - то есть компонент с переданным в него АПИ. Судя по всему, проптайпс недописан, протисана только нода. https://github.com/gribnoysup/react-yandex-maps/blob/master/src/YMaps.js#L10

Спасибо!

Почему размеры передаются через width и height атрибуты? Можно же просто передать className и style в div-wrapper и воспользоваться магией flexbox'а

Довольно частая ситуация, связанная с тем что нужно использовать instanceRef, для того чтобы использовать map. В Readme достаточно сложно соориентироваться по его использованию, т.е. сказано что мы можем его использовать, но вот примеров нет. Мне кажется, добавление пары примеров сняло достаточное количество вопросов

add support of location selection