yandex-map-react

Yandex map react

Stats

StarsIssuesVersionUpdatedCreatedSize
yandex-map-react
1.1.15 years ago6 years agoMinified + gzip package size for yandex-map-react in KB

Readme

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)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.