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
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)