yandex-map-react's Introduction

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>