How I can update map by new array points? I take new point from state and I want that map is updated

<Map
        onAPIAvailable={ () => { console.log('API loaded') }}
        center={[55.754734, 37.583314]}
        zoom={10}
        >
            <Marker key={item._id} lat={55.754734} lon={37.583314} >
              <BalloonLayout>
                <div>test</div>
                </BalloonLayout>
              </Marker>
          )}
 </Map>

this don't works

Hi :)
I need set lang=en_US. How can I do it?

Hi!

Style prop doesn't work anyway.

Thx

Now _getAPIParams method allows modify only coordorder field. How about modify more params?

Such as

• api version;
• debug or release mode;
• etc.

Hi Alexey! Thanks for your efforts to create the yandex maps component! If this is something production-ready, could you please add a short description of the features in README.md?

I've been trying to find such a component recently but with no results so far. Ended up creating a discussion in the yandex maps club.

Всем привет, простите что по русски. Есть ли возможность в текущей версии использовать ymaps.geocode()? Можно задать вопрос по другому, есть ли способ получить доступ к ./api напрямую, например

import {Map, Marker, API} from 'yandex-map-react';

Спасибо

After upgrading to [email protected] npm starts complaining:

npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.

Patch example: react-grid-layout/react-grid-layout@ef335bc
(not submitting a PR since I don't know whether it is just about changing a version or there should be some modifications in the code too)

If add some like:
<Map bounds={[ [54.636729, 39.565623], [55.606291, 41.136668 ]} />

shows the whole map, without center & zoom.

А можно реализовать элемент управления RouteButton, вызывающий панель маршрутизации?

Есть RouteEditor, но это не то же самое.

When i use this component in isomorfic app and server-side rendering , then i have error:

node_modules\yandex-map-react\lib\api.js:21
        this.api = window.ymaps ? window.ymaps : null;
                   ^
ReferenceError: window is not defined

• Map
• GeoObject

It seems to be impossible to update center through props.

I've looked into the code, nextProps will be ignored except controls, does it mean that you cannot change either initialCenter or initialZoom with props, but manage it through the map instance, with maps methods outside the <Map />?

I'm curious if there is a way to change language for the controls such as this one:

I tried injecting the language into the state (which generally works), but this gave no effect:

const mapState = {
  behaviors: ['drag', 'dblClickZoom', 'multiTouch', 'rightMouseButtonMagnifier'],
  controls: ['zoomControl', 'typeSelector'],
  // language: "en",
  // lang: "en",
  // lang: "en_US",
};

<Map width={...} height={...} state={mapState} />

Any ideas?

Столкнулся с проблемой, не удается добавить карту, при запуске webpack выдает ошибку:

ERROR in ./src/js/client.js
Module not found: Error: Cannot resolve module 'yandex-map-react' in D:\Projects\Front\Goalzilla_redux\src\js
 @ ./src/js/client.js 13:22-49

Устанавливаю с помощью команды npm install yandex-map-react
При этом в ./node_modules/yandex-map-react/ только 2 файла: package.json и README.md
Не могу понять, что я делаю не так.

./src/js/client.js

import React from 'react';
import ReactDom from 'react-dom';
import { Map } from 'yandex-map-react';
class ContactMap extends React.Component {
  render () {
      return (
          <Map onAPIAvailable={function () { console.log('API loaded'); }} center={[55.754734, 37.583314]} zoom={10}>
          </Map>
      );
  }
}
const app = document.getElementById('app');
ReactDom.render(
  <ContactMap />,
  app
);

./package.json

{
  "name": "goalzilla",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "material-ui": "^0.15.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.5.2",
    "react-router-redux": "^4.0.5",
    "react-tap-event-plugin": "^1.0.0",
    "redux": "^3.5.2",
    "yandex-map-react": "^1.0.0-beta.8"
  },
  "devDependencies": {
    "expect": "^1.20.2",
    "deep-freeze": "0.0.1",
    "babel-eslint": "^6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.9.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "eslint": "^3.0.0",
    "eslint-loader": "^1.4.0",
    "eslint-plugin-react": "^5.2.2",
    "history": "^3.0.0",
    "mocha": "^2.5.3",
    "react-router": "^2.4.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
    "test": "mocha --compilers js:babel-register --recursive",
    "test:watch": "npm test -- --watch"
  },
  "author": "",
  "license": "ISC"
}

./webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    preLoaders: [ //добавили ESlint в preloaders
      {
        test: /\.js$/,
        loaders: ['eslint'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      }
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

I think it's a good practice to have only source code in repository.

Add onMapAvailable to component propTypes for better readability and type checking

Render map image via static api

Cases:

• while loading API
• javascript disabled (?)
• support print mode in future (?)

When module is minified, this comparison doesn't work because components name is minified as well

switch (component.type.name) {
    case 'MarkerLayout':
        this._setupMarkerLayout(component);
        break;
    case 'BalloonLayout':
        this._setupBalloonLayout(component);
        break;
    default:
        break;
}

I created a PR with possible solution #21

From my previous experience with web maps, longitude normally precedes latitude, which makes geographical coordinates similar to x/y on a Cartesian plane. It's good that the <Map /> component has coordorder prop, but this still leaves a couple of issues.

• The values of coordorder refer to longitude as long rather than lon as this is done is markers, which results in some kind of inconsistency. I would expect lonlat / latlon here or <Marker long=? lat=?>.
• When coordorder="longlat", markers flip despite that they explicitly use lon and lat props. Here are the the Moscow ones from the example:
  
  Removing coordorder="longlat" brings them back.

If Yandex maps API uses lat/lon instead of lot/lan by default, I assume it is for a good reason. However, the React component could probably have a different default behaviour here, just to be more consistent with other mapping / data vis tools and formats (e.g. Mapbox GL JS and GeoJSON).

I guess that the most common potential use of the component is an embedded map on a company's contacts page. These maps are sometimes drawn as a user map and can be simply added as an overlay:

var ml = new YMaps.YMapsML('http://maps.yandex.ru/export/usermaps/xxx/');
map.addOverlay(ml);

It would be nice to have this functionality in the React version too:

<Map center={ [55.754734, 37.583314] } zoom={ 10 } >
  <UserMapLayer id="xxx" onLoad={ this._userMapLoad } onLoadError={ this._userMapLoadError } />
</Map>

How difficult would this be to add? What alternatives to YMapsML exist in 2016? I might be pretty outdated about the way the things are done these days since I haven't been implementing anything YMaps-related for about 5 yrs. YMapsML seemed to be a good way of showing the driving directions to a company with no need to program the markers, the territories and the arrows manually.

Now this params calculated dynamically

• Use GeoObjectCollection for Markers

Need to have marker or marker layout onPress method

I really needed properties and options support for MapMarker so I added it.

I created a PR #18 with added support for Placemark options and properties. Not sure that this is the best possible implementation, so maybe any comments/ideas?

I'm playing with your package, and managed to receive lat and lon onClick

How could I translate it to the address?