Yandex Maps API bindings for React

react-yandex-maps

Yandex Maps API bindings for React.

Install

npm install --save react-yandex-maps

Components

Basic components

• <YMaps /> - provides child components with yandex maps api via context
• <Map /> - Map instance
• <Clusterer /> - Clusterer instance
• <ObjectManager /> - ObjectManager instance
• <GeoObject /> - generic GeoObject instance
• <Control /> - generic Control instance

GeoObject shorthands

• <Placemark />
• <Polyline />
• <Rectangle />
• <Polygon />
• <Circle />

Control shorthands

• <Button />
• <FullscreenControl />
• <GeolocationControl />
• <RouteEditor />
• <RulerControl />
• <SearchControl />
• <TrafficControl />
• <TypeSelector />
• <ZoomControl />
• <ListBox />
• <ListBoxItem />

With Yandex Maps API

window.ymaps.ready(function () {
  const myMap = new window.ymaps.Map('map', {
    center: [55.751574, 37.573856],
    zoom: 9
  }, {
    searchControlProvider: 'yandex#search'
  })

  const myPlacemark = new window.ymaps.Placemark([55.751574, 37.573856], {
    hintContent: 'Собственный значок метки',
    balloonContent: 'Это красивая метка'
  }, {
    iconLayout: 'default#image',
    iconImageHref: 'images/myIcon.gif',
    iconImageSize: [30, 42],
    iconImageOffset: [-3, -42]
  })

  myMap.geoObjects.add(myPlacemark)
})

With react-yandex-maps

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

const mapState = { center: [55.76, 37.64], zoom: 10 };

const MyPlacemark = () => (
  <YMaps>
    <Map state={mapState}>

      <Placemark
        geometry={{
          coordinates: [55.751574, 37.573856]
        }}
        properties={{
          hintContent: 'Собственный значок метки',
          balloonContent: 'Это красивая метка'
        }}
        options={{
          iconLayout: 'default#image',
          iconImageHref: 'images/myIcon.gif',
          iconImageSize: [30, 42],
          iconImageOffset: [-3, -42]
        }}
      />

    </Map>
  </YMaps>
);

Enterprise

react-yandex-maps library also supports enterprise version of Yandex.Maps API:

  <YMaps
    enterprise
    query={{
      apikey: '// your api key here',
    }}
  />

Events

All Objects events are available, just use camelCase event names instead of
default ones (for example geometrychange -> onGeometryChange):

With Yandex Maps API

function onGeometryChange() {/* more code */}

const circle = new window.ymaps.GeoObject({
  geometry: {
    type: "Circle",
    coordinates: [55.76, 37.64],
    radius: 10000
  }
})

circle.events.add('geometrychange', handleEventSomehow)

With react-yandex-maps

import { Circle } from 'react-yandex-maps'

const CircleWithEvents = ({onGeometryChange}) => (
  <Circle
    geometry={{
      coordinates: [55.76, 37.64],
      radius: 10000
    }}
    onGeometryChange={onGeometryChange}
  />
)

GitHub