paullecam / react-leaflet Goto Github PK
View Code? Open in Web Editor NEWReact components for Leaflet maps
Home Page: https://react-leaflet.js.org
License: Other
React components for Leaflet maps
Home Page: https://react-leaflet.js.org
License: Other
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='© <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?
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();
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?
Mapbox GL is so nice. Would be great to be able to add this to this component!
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. :-)
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.
@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.
I'm interested in using https://github.com/Leaflet/Leaflet.markercluster with react-leaflet. What's the best way to go about this?
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.
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...
React-Leaflet
var {Map, Marker, Popup} = require("react-leaflet");
should be
var {Map, TileLayer, Marker, Popup} = require("react-leaflet");
Cheers!
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?
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='© <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.
Say I have a React Component that creates a Map
render() {
return (
<Map ... />
);
}
How do I get a handle to the leafletElement?
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 !
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.
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?
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?
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.
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?
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. :)
Trying to help work on the project by adding layers control toggling. There seems to be several problems setting up the environment correctly.
package.json
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?
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']} />;
}
Hi - how should I use quadkeys when instantiating a < Map /> ?
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.
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.
amazing work!
Can i use it in my react-native project ?
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...
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!
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>
Leaflet automatically adds leaflet-top leaflet-left
to the +/- buttons. I can't seem to figure out how to control the class' here.
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 !
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
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 ?
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.
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!
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='© <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?
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.
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?
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
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.
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 apps I work on, we often want to do things like:
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
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! :)
Hi,
PS : I had some issues while showing a map but it was my bad, I edit this text + title issue
Thanks !
In index.js on line 21 you have
import PopupContainer from "./Popup";
Shouldn't it be
import PopupContainer from "./PopupContainer";
instead?
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.
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.
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.
The README states that in order to force update of components they need a unique ref
prop.
Needs to be a unique key
prop.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.