paullecam/react-leaflet

React components for Leaflet maps

React Leaflet

React components for Leaflet maps.

Documentation

• Getting started
• API reference

Changes

See the CHANGELOG file.

Contributing

See the CONTRIBUTING file.

Support

Please do not use GitHub issues for support, but instead post your questions on StackOverflow using the react-leaflet tag.

License

Hippocratic License - see the LICENSE file.

react-leaflet's Issues

Flux example ?

Hi,

I started to use your react-leaflet component (works well for now :)) and wanted to know how to integrate it with react + flux. How should the state be handled ? Creating a separate store for leaflet (which feels weird since leaflet handle his own state) ? Do you provide any convenient method to be able to separate state from view ?

Thanks !

ReferenceError: window is not defined

Hi there,

When I include the react-leaflet library I seem to get "ReferenceError: window is not defined".

This comes from leaflet-src.js as far as I can see, any ideas? Seems like I'm including something incorrectly.

ReferenceError: window is not defined
at Object. (C:\Applications\Nexus\Nexus\node_modules\leaflet\dist
\leaflet-src.js:9163:3)
at Module._compile (module.js:460:26)
at Module._extensions..js (module.js:478:10)
at Object.require.extensions.(anonymous function) [as .js](C:Applications
NexusNexusnode_modulesbabelnode_modulesbabel-corelibapiregisternode.js:
214:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (C:\Applications\Nexus\Nexus\node_modules\react-leafle
t\lib\index.js:9:16)
at Module._compile (module.js:460:26)
14 Sep 11:44:46 - [nodemon] app crashed - waiting for file changes before starti
ng...

Support marker divicon

Hi,

I seek to have a custom icon for my markers, but the divicon property is not exposed. Any plan to expose it ?

Thanks for your great work !

Vectors not displaying. Markers are working fine.

I'm trying to display polylines, circles etc. However, these are never displayed. Markers are working fine. And the map is displayed properly.

My render method

render() {
    const center = [51.505, -0.09];

    const polyline = [
      [51.505, -0.09],
      [51.51, -0.1],
      [51.51, -0.12]
    ];

    const polygon = [
      [51.515, -0.09],
      [51.52, -0.1],
      [51.52, -0.12]
    ];

    return (
        <Map center={center} zoom={13}>
          <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
              />
          <Circle center={center} fillColor='blue' radius={200}/> // not displayed
          <Polygon color='purple' positions={polygon}/> // not displayed
         <Marker position={center} /> // is displayed
        </Map>
    );
  }

I'm using version 0.7.0 and leaflet 0.7.5. I've tried requesting the leaflet css in my HTML headers or copying the CSS.

No errors are thrown, just nothing is displaying. I'm a little bit lost where to find the problem. Any pointers or ideas?

Window is not defined

Hi,

I am trying to use react-leaflet in a isomorphic js project with webpack and leaflet its returning window is not defined. Is there any reason to use window object in the server side?

Standalone build?

Hello!
I would really love to use react-leaflet in my project but i don't have a require.js there and i can't have it installed for various reasons. I just can't.

I can't see any standalone build of react-leaflet in the repo but i've seen a lot or react (and js in generall) libs made in two version - for AMD and standalone so i assume that's doable. I'm not really good in JS and i don't know require.js so i'm totally not sure if that's possible but - is that possible for you to add a standalone version ? Or can i somehow build such thing myself?

Thanks!

Add PropTypes for `map` in MapLayer

I ran into an issue that was very hard to debug because this was missing.

I tried to wrap a marker in another component, and got all these crazy findComponentRoot errors. The issue was the map prop was not passed because it was not a direct child. Obvious issue in hindsight, but explicit props would help a lot.

Markers classes / icons

Hi there !

I am having a problematic issue concerning the rendering of markers using your lib (Markers and Map are React-Leaflet components).
I have about 1100 markers of 4 or 5 different types on a map, and i have coded some filter buttons with React, that recalculate which markers should be displayed or not.
Initial rendering is ok (i.e displaying markers when map is empty), but on further renderings, my classes are mixed. For some reason i get my markers with classes that are not correct. I've tried with icons, same thing...
My filter logic is correct, so i figured maybe with the component ...? Am i missing something here or is this something that happened already ?

Invariant Violation when unmounting popup

I'm getting the following error when a component is unmounted that makes use of Popup:

Uncaught Error: Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.

Any ideas? I'm using React 0.14.0-rc1 with version 0.8.0-rc.1 of react-leaflet.

Defer requiring leaflet until inside componentDidMount

I want to to try out this library, but one of my requirements is server-side rendering. This means that leaflet probably shouldn't be imported until componentDidMount is called, at which point the presence of a DOM is guaranteed.

Obviously I can't do server-side rendering of the map itself, but it should be possible to leave an empty container ready to be initialised on the client.

Popups in GeoJSON?

In Leaflet there is a way to bind a popup to each Feature polygon through onEachFeature function: http://leafletjs.com/examples/geojson.html

How can I do the same in react-leaflet using the Popup component?

Support server-side rendering

https://github.com/PaulLeCam/react-leaflet#technical-considerations have the following point:

Leaflet makes direct calls to the DOM when it is loaded, therefore this library is not compatible with server-side rendering.

I would like to discuss of the possibilities how it's possible to add server-side support for this library.

My current solution just skip rendering the leaflet on server-side, and render just on client-side:

  render() {
    const position = [51.505, -0.09];

    if (process.env.BROWSER) {
      var {Map, Marker, Popup, TileLayer} = require('react-leaflet');
      return (
        <div className="search-map">
          <Map center={position} zoom={13}>
            <TileLayer
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              />
            <Marker position={position}>
              <Popup>
                <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
              </Popup>
            </Marker>
          </Map>
        </div>
      );
    }
    else {
      return null;
    }
  }

I don't believe it's a best practice, but still it's something, than nothing, and I think it's better than using the headless-leaflet fork.

Question about library stability

@PaulLeCam

I'm going down a route where it would be nice to use this, but its not necessary if there are any glaring issues related to common map function. How stable you feel your library is?

react-leaflet with react-bootstrap tabs

Hi,

Thanks for the project. I really appreciate being able to use it for my web app.

I am attempting to have a map inside a tab using react-bootstrap tabs. The tab is not selected by at load but it seems that the react-bootstrap implementation still initialises the tab contents with the Map component. When I do change to the tab with the map, the map tiles have not loaded properly and they seem to struggle to load properly as I pan around the map (only some tiles load.) If I change the application to load that tab initially then to map works perfectly.

The react bootstrap tabs have a fade out & in behaviour as you switch tabs, which might affect things. I'm not sure.

Is this something you are familiar with? Can you offer advice or would you have time to look at it if I provide example set up that shows the issue?

I have some react experience but I'm new to Leaflet and I'm not sure where to begin with figuring this out.

Cheers,
Michael

react-native support ?

amazing work!

Can i use it in my react-native project ?

Support for new Leaflet Version 1?

Hello Paul,

Is react-leaflet 100% compatible with the enhanced new version of leaflet (1.0)? I know it is on beta status, but as it is now the preferred development branch (on 'master') with many new features I cannot resist not to use it:

https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md

P.S. It would be great if there was a branch for extending react-leaflet with the new features of leaflet.

Thanks!

Passing props freely

Hi,

• It was a pain to give the Map the shape and size I wanted (using CSS class). It is nice somebody else did a merge request adding the style attribute to a Map component, but why do not you use the ES6 destructuring assignment to make it a lot easier and flexible to pass props to components ?
• Could you please upload the last version of compiled files here on Github ? (even after merge requests as it is the case right now) Depending on the computer I work on I can't compile it myself to keep it updated from your last src modified files.

PS : I had some issues while showing a map but it was my bad, I edit this text + title issue

Thanks !

Add ability to modify the leaflet-control-container

Leaflet automatically adds leaflet-top leaflet-left to the +/- buttons. I can't seem to figure out how to control the class' here.

Please provide example for featureGroup

Hi Paul,

I am ATM looking into using FeatureGroup because I am integrating Leaflet.draw. I am trying to understand how I can pass my different shapes that I have saved into the featureGroup.

For example imagine I have the following:

<Marker position={position}/>
<Rectangle bounds={bounds}>

how would I add them into the FeatureGroup?

Best way to interact with layers

Hi,
thanks for your lib,
I wonder what is the best way to to interact with vector layers, for now I use ref in the component that contains the map on the layers to access leafletElement to be able to do :

this.map.getLeafletElement().fitBounds(this.refs.circle.leafletElement.getBounds())

I could compute the bounds but it would duplicate the complexity already handled by leaflet.
Or maybe should I subclass the Circle component, and make it a "connected component" that handle it himself.
Any idea ?
Thanks.

Issues around loss of Virtual DOM?

This is a question, not an issue :-)

I'm looking at doing some map work with leaflet, and was wondering what using it within react does for the better rather than using just leaflet since react loses the DOM after the initial render. I enjoy react, but am new to it. I'm in a similar situation with Leaflet. So I know just enough to be dangerous, but at least I know that.

Is this better/worse for certain types of maps? Any other caveats? What pain did the creation of this library ease?

Thanks for your time, and for this library.

Add ability to use mapbox gl

Mapbox GL is so nice. Would be great to be able to add this to this component!

react-leaflet is not extendable

When I npm install --save react-leaflet, I get a compiled version that does not include the src/ directory.

I'm using babel in my own project, so it would be nice to be able to do

import { Marker } from 'react-leaflet';

export default MyCustomizedMarker extends Marker {
  ...
}

---

My current solution is to add a github tarbal to package.json manually:

  "dependencies": {
    "react-leaflet": "https://github.com/PaulLeCam/react-leaflet/archive/v0.7.0"
  }

and then import like

import Marker from 'react-leaflet/src/Marker'

however, it would be nice to be able to do this with a normal npm install.

Using quadkey

Hi - how should I use quadkeys when instantiating a < Map /> ?

Uncaught TypeError: Cannot read property 'baseVal' of undefined

This is the only thing that I see when try to put simple example code from README into existing app.
http://take.ms/lQdnl
Am I missing smth? Maybe it's a known issue.
version 0.7

I've tried to put Map inside the modal. And straight to the page also. This is somehow related to elements that react-leaflet creates inside I guess.

React + Leaflet with html markers

Hello,

I just noticed your message on Twitter, I really not a CoffeeScript expert so I mostly translate your coffee in JS so I can learn from it.
My main probleme is that I am trying to put some very customized marker with leaflet (an iconDiv one with html)
But ReactComponents are not html but leaflet is expecting some html to work. My question is how would you approach this ?

By the way I posted my question in English as maybe it can help someone reading this but I am French like you, so if my question is not properly asked, I can explain it in French.

Thanks. :)

Leaflet.markercluster support

I'm interested in using https://github.com/Leaflet/Leaflet.markercluster with react-leaflet. What's the best way to go about this?

support disabled prop

It would be nice if disabled={...} props would be supported in all relevant components.

Currently one has to manually unwrap the element and call the control functions as in:

this.deactivateMap(
  this.refs.map.getLeafletElement()
);

  deactivateMap: function (map) {
    map.dragging.disable();
    map.touchZoom.disable();
    map.doubleClickZoom.disable();
    map.scrollWheelZoom.disable();
    map.boxZoom.disable();
    map.keyboard.disable();
    if (map.tap) map.tap.disable();

Issues building locally

Trying to help work on the project by adding layers control toggling. There seems to be several problems setting up the environment correctly.

• The jest tests will not run entirely
• I believe you are missing eslint from the package.json
• Getting an error from babel when trying to use the package in the via npm link

ERROR in Loader /home/jmfurlott/work/misc/react-leaflet/node_modules/babel/index.js?optional=runtime&stage=0 didn't return a function
 @ ../misc/react-leaflet/lib/index.js 17:13-31

The Jest error I am getting on just npm install:

Using Jest CLI v0.4.13
Waiting on 5 tests...Could not find a `test` module while analyzing dependencies of `MapComponent`
 FAIL  lib/__tests__/Map.js
Error: Worker process exited before responding! exit code: null, exit signal: SIGSEGV
stderr:

Seen these problems before? Is it just my environment?

Problems with findComponentRoot

Hi!

I have some weird error, while using your lib.
I wonder if it is possible to use your components inside old-style react createClass components?

When I use simple component everything seems to work fine:

import React from 'react'

// import {Map, Marker, Popup, TileLayer} from "react-leaflet";

module.exports = React.createClass({
  displayName: 'Satellite',

  render: function() {
    const position = [this.state.lat, this.state.lng];
    return (
      <h1>content</h1>
    );
  },

  getInitialState: function() {
    return {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    };
  }

});

But then I add simple map from your example:

import React from 'react'

import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

module.exports = React.createClass({
  displayName: 'Satellite',

  render: function() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  },

  getInitialState: function() {
    const flux = this.getFlux();
    flux.actions.drafts.reloadAsync();
    return {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    };
  }

});

And I have following error in browser:

Error: Invariant Violation: findComponentRoot(..., .0.0.0.$=11:0.$=10:0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

Am I forgetting about something or doing something wrong?

When I add a Popup to a Marker then call setState I get `Invariant Violation`

If I remove the Popup element it doesn't happen.

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.1.0.1.0.$=11=20:0.$=10:0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

---

I am using the Map component inside another component.

README.md example does not work

React-Leaflet

var {Map, Marker, Popup} = require("react-leaflet");

should be

var {Map, TileLayer, Marker, Popup} = require("react-leaflet");

Cheers!

FeatureGroup fails when passing in react-style shapes: TypeError: layer.onAdd is not a function

I realize FeatureGroups aren't documented/tested yet, but I've tested them and hitting an error: TypeError: layer.onAdd is not a function.

I made a test case here: master...marcello3d:broken-featuregroup-example

Key bit is:

      <FeatureGroup layers={[
          <Circle center={center} radius={200} fillColor='blue' />,
          <CircleMarker center={[51.51, -0.12]} radius={20} color='red'>
            <Popup>
              <span>Popup in CircleMarker</span>
            </Popup>
          </CircleMarker>,
          <Polyline positions={polyline} color='lime' />
      ]}/> 

Although it seems like it'd be better if the API were:

      <FeatureGroup>
          <Circle center={center} radius={200} fillColor='blue' />,
          <CircleMarker center={[51.51, -0.12]} radius={20} color='red'>
            <Popup>
              <span>Popup in CircleMarker</span>
            </Popup>
          </CircleMarker>,
          <Polyline positions={polyline} color='lime' />
      </FeatureGroup>

I haven't quite wrapped my head around the voodoo this project is doing to make a PR. :-)

GeoJson Component not update data

Hey gays !

For my project, I use geojson layer. My project use Flux (with Fluxible). The problem is that the data transmited to GeoJson component are not update (when the store indicates that view must be updated). I don't understand why data doesn't update. If you have an idea...

Make TileLayer subdomains dynamic

Hi,

I need to be able to switch tilelayers in my app. It works fine if all tilelayers have the same subdomains. But if I mix tilelayers with different subdomains, it does not work because subdomains option is static.

Sample code :

    if (this.props.mapState.baseLayer === 'road') {
      baseLayer = <TileLayer
          url="http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png" subdomains={['otile1', 'otile2', 'otile3', 'otile4']} />;
    } else if (this.props.mapState.baseLayer === 'satellite') {
      baseLayer = <TileLayer
          url="http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png" subdomains={['otile1', 'otile2', 'otile3', 'otile4']} />;
    } else if (this.props.mapState.baseLayer === 'cycle') {
      baseLayer = <TileLayer
          url="http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png" subdomains={['a', 'b', 'c']} />;
    }

Lib compile error

@PaulLeCam In my PR #28, I forgot to include the babelfied equivalent. I went and ran the compile command last night, and it ran successfully... but upon trying to use those files, I was greeted with:

Couldn't autodetect L.Icon.Default.imagePath, set it manually

Mind investigating? From the little time I spent debugging I could not find an obvious reason for the error.

Obtaining the leafletElement

Say I have a React Component that creates a Map

render() {
  return (
    <Map ... />
  );
}

How do I get a handle to the leafletElement?

Accessing map instance from within leafletElement

I need to access map from within my GeoJson layer. How can I do that?
It is not available through props. Providing map={this} (see below) doesn't work, because neither GeoJson nor any other component passes map to the props of created component.

<Map
    center={this.props.initialPosition}
    zoom={13}
    id='map'>              
    <GeoJson
        ...
        map={this}
        ...
    />
</Map>

Changing the code in GeoJson component from const {data, map, ...props} = this.props; to const {data, ...props} = this.props; fixes the issue as the map now is passed to the component and can be accessed through props.

Is there a better way to solve this issue?

in index.js PopupContainer exports Popup

In index.js on line 21 you have
import PopupContainer from "./Popup";
Shouldn't it be
import PopupContainer from "./PopupContainer";
instead?

How to run tests

I tried jest --coverage ./lib

Using Jest CLI v0.4.0
Waiting on 4 tests...Could not find a `test` module while analyzing dependencies of `MapComponent`
 FAIL  lib/__tests__/Map.js
Error: Worker process exited before responding! exit code: null, exit signal: SIGSEGV
stderr:


A worker process has quit unexpectedly! This is bad news, shutting down now!

node version v0.12.2

react-leaflet Components cannot be wrapped in React components

In apps I work on, we often want to do things like:

• Have different views over the same map (maybe controlled by react-router)
• Share customized Marker wrapper code between different views.

For both of these use-cases we should be able to make new React components that can be placed on the map, containing only react-leaflet children.

Example code:

import React, { Component } from 'react';
import { Map, Marker } from 'react-leaflet';

class WrappedMarker extends Component {
  render() {
    return <Marker position={[51.505, -0.09]} />;
  }
}

export default class MapView extends Component {
  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <WrappedMarker />
      </Map>
    );
  }
}

The above does not show the marker, and logs a warning:

Uncaught TypeError: Cannot read property 'addLayer' of undefined

Example/ideas about importing plugins

How hard/simple would it be to import existing plugins? For example the https://github.com/Leaflet/Leaflet.markercluster is a very nice plugin, but I don´t have any idea about how hard it will be to implement this in react.

Are there any examples of ported plugins?

Polyline - updating properties other than positions does not trigger React reconciliation

Is there any reason why the code below does not take into account the changes made on properties such as: color, weight, opacity etc?

// Polyline.js
componentDidUpdate(prevProps) {
    if (this.props.positions !== prevProps.positions) {
      this.leafletElement.setLatLngs(this.props.positions);
    }
}

At the moment the only way to cause the polyline to update is to change 'key' property of the component which is a bit of a hack.

It would be nice to have the remaining properties explicitly included. I can make a proper PR if needed.

Great library, btw! :)

README technical considerations: unique 'ref'

The README states that in order to force update of components they need a unique ref prop.

Needs to be a unique key prop.

Bug combining Circle + Marker + Popup

Hi,

I am trying to display a marker with a popup inside a Circle. It was working fine in classic leaflet but with react-leaflet, only marker + popup shows. There is no way to display the circle (except when there is no marker in it).

Here is the code :

        <Circle center={this.props.mapState.ui.userPosition} radius={radius} color="#FF4E00">
          <Marker position={this.props.mapState.ui.userPosition}>
            <Popup>
              <span>You are within {radius} meters from this point</span>
            </Popup>
          </Marker>
        </Circle>

Make popup clickable and interactable

Hi Paul,

I am trying to use clickable elements in popups, but without success.

For example imagine the following:

    <Marker position={position}>
      <Popup>
          <button onClick={this.bus}>thorsten</button>
        </Popup>
    </Marker>

Now if you click on the button there is nothing happening (at least there should be a complain about "bus" not defined. On a side note I tried as well with "onclick" and as well with onClick="this.bus()"

Now when I patch the marker like:

--- a/src/Marker.js
+++ b/src/Marker.js
@@ -16,6 +16,9 @@ module.exports = React.createClass({
   componentWillMount() {
     var {map, position, ...props} = this.props;
-    this._leafletElement = Leaflet.marker(position, props);
+    var marker = Leaflet.marker(position, props);
+    if (this.props.onClick) {
+      marker.on('click', this.props.onClick);
+    }
+   this._leafletElement = marker;
   },

And do

<Marker position={position}  onClick={this.bus}"/>

Then it is working as expected but I have no popup.

To bring back the popup and not having React.renderToStaticMarkup (which is in the Popup.js) remove all onClicks or logic I use, I came up with the following:

--- a/src/Marker.js
+++ b/src/Marker.js
@@ -16,6 +16,9 @@ module.exports = React.createClass({
   componentWillMount() {
     var {map, position, ...props} = this.props;
-    this._leafletElement = Leaflet.marker(position, props);
+    var marker = Leaflet.marker(position, props);
+    if (this.props.onClick) {
+      marker.on('click', this.props.onClick);
+    }
+   this._leafletElement = marker;
+    var popup = this.props.popup;
+    if (popup) {
+      var LPopup = Leaflet.popup().setContent(popup);
+      marker.bindPopup(LPopup);
+    }
+    this._leafletElement = marker;
   },

and in my calling code I have:

   function bus(){
     console.log("ssssssssserererererssss")
   }

   Leaflet.thorsten={};
   Leaflet.thorsten.bus = bus;
...
    var  xxx = '<div><h2>bus</h2><button onclick="L.thorsten.bus()">thorsten</button></div>';
     <Marker position={position} popup={xxx}"/>

This finally works, but it really feels like a workaround more then the way to go.

Do you know a better way?

Cannot bind to onLoad event

Cannot bind to the onLoad event to invoke invalidateSize(). Looks like it loads before events are set: https://github.com/PaulLeCam/react-leaflet/blob/master/src/Map.js#L34 (events are setting in super.componentDidMount();).

How to make it work: Leaflet/Leaflet#3560

Lets discuss about the solutions, before I will try to push a PR.

Javascript vs CoffeeScript

I would like to use this library but I'm not that familiar with coffeescript. Is there anyway you would consider making the source files javascript or coffeescript.

Im not exactly sure how it would work with gulp-js2coffee.

Add Leaflet CSS as a requirement

It's probably worth mentioning in your README.md that leaflet.css is a requirement for this component, e.g. <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">. Experienced users of Leaflet will figure this out easily; others may not.

What sort of array is the FeatureGroup expecting?

I was expecting to do:

<Map...>
    <TileLayer ... />
    <FeatureGroup ref="features">
        <Marker position={[0, 0]}></Marker>
        <Marker position={[1, 1]}></Marker>
        <Marker position={[2, 2]}></Marker>
    </FeatureGroup>
</Map>

But I get a warning:
Failed propType: Required prop layers was not specified in FeatureGroup. Check the render method of AsdComponent.

What should I pass as layers? I was under the impression that markers are the layers.

Also this Error appears for every other Marker I nest in FeatureGroup. If it's only 1 marker it's fine.

Danger: Discarding unexpected node: <noscript data-reactid=".0.$=11:0.$=11:0"></noscript>

Ultimately what I'm trying to do is pass a FeatureGroup to Leaflet.draw so I can edit features using this plugin.