yandex-map-react

yandex-map-react

Quick start

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, MarkerLayout } from 'yandex-map-react';

export default function ContactMap (props) {
    render () {
        return (
            <Map onAPIAvailable={function () { console.log('API loaded'); }} center={[55.754734, 37.583314]} zoom={10}>
                <Marker lat={this.props.lat} lon={this.props.lon} />
            </Map>
        );
    }
}

Installation

yandex-map-react requires React >= 0.14

npm

npm install --save yandex-map-react

Parameters

Parameter	Default value	Type	Decription
width	600	Number	container width
height	600	Number	container height
style	{}	Object	styles that will be applied to container element
loadOptions	{lang: 'ru_RU', coordorder: 'latlong', load: 'package.full', mode: 'release'}	Object	API loading params. Enabled params: lang, apikey, coordorder, load, mode
Supported YandexMap API params
center	[55, 45]	Array[Number]	coordinates of map center
zoom	10	Number	zoom level
loadOptions	{lang: 'ru_RU', coordorder: 'latlong', load: 'package.full', mode: 'release'}	Object	API loading params. Enabled params: lang, apikey, coordorder, load, mode
state	{controls: []}	Object	describe map state (ex. controls)
Callbacks
onAPIAvailable	-	Function	callback will be invoked as soon as YandexMAP API available

Events

Components support API events, to handle convert first letter of event name to uppercase and add on to begin. Example: mousemove -> onMousemove (description).

Features

Custom Geoobject marker layout. Custom balloon layout - soon.

<Marker lat={55.783379} lon={37.775575}>
    <MarkerLayout>
        <div style={{borderRadius: '50%', overflow: 'hidden'}}>
            <img src="http://loremflickr.com/80/80"/>
        </div>
    </MarkerLayout>
</Marker>

Examples

https://github.com/effrenus/yandex-map-react-examples/

License

MIT (http://www.opensource.org/licenses/mit-license.php)