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.14npm
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: 'ruRU', 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 | ArrayNumber | coordinates of map center |
| zoom
| 10 | Number | zoom level |
| loadOptions
| {lang: 'ruRU', 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 addon
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>