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> ); } }yandex-map-react requires React >= 0.14
npm install --save yandex-map-react | 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 |
Components support API events, to handle convert first letter of event name to uppercase and add on to begin. Example: mousemove -> onMousemove (description).
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>
