All Questions
1,096
questions
2
votes
2
answers
2k
views
react-leaflet: adding a TopoJSON layer
I just started using the react-leaflet library and got a map to load with a geoJSON layer, however I would like to use a TopoJSON layer instead.
I know that it is possible with pure Leaflet like this:...
- 141
3
votes
2
answers
8k
views
Registering event with react leaflet
I'm trying to incorporate React-Leaflet into my Create React App. I am able to overlay GeoJSON data on a base map, but I cannot register clicks on this layer.
In investigating this issue, I ...
- 269
3
votes
4
answers
8k
views
How to get the bounds of a collection of markers with React-Leaflet
How can I get the bounds of a collection of markers, so that these bounds can be used to show all markers on a react-leaflet map?
This is my render function:
render() {
const position = [51.505, ...
- 458
0
votes
1
answer
1k
views
why component is not display in react?
I am trying to use leaflet in react ..I take reference of this module
https://github.com/PaulLeCam/react-leaflet
https://www.npmjs.com/package/react-leaflet
but it not show map why ?
here is my code
...
- 12.6k
1
vote
1
answer
529
views
calling redux actions from leaflet map
I have a react/redux application that I've added a leaflet map to. The leaflet map is being populated through geoJSON. Is there a way I can call a redux action through a user click on a map feature? ...
- 1,600
0
votes
0
answers
228
views
Utilizing Jquery UI into React Component?
I am trying to follow this tutorial for drag n' drop.
https://georepublic.info/en/blog/2012/leaflet-example-with-wfs-t/
I want to build this out using react, but see they are using jquery ui and ...
- 3
2
votes
0
answers
2k
views
custom marker is not shown react-leaflet
I have used react-leaflet for showing the map. Also i have used leaflet-routing-machine for routing. The routing is shown correctly but the marker is not overriden by car icon. I tried on both routing ...
- 4,004
15
votes
4
answers
26k
views
Arbitrary function on react-leaflet marker click
React-leaflet nicely provides the ability to put content within a Popup of a Marker.
For instance in my example:
<Marker position={[item.lat, item.lng]} key={item.machineid}>
...
- 2,586
0
votes
2
answers
1k
views
Search box in react-leaflet looks wrong
It looks like that when it is supposed to be a button that you press to open.
I am using react-leaflet with mapzen's leaflet-geocoder.
import { MapControl } from 'react-leaflet'
import L from '...
- 337
0
votes
1
answer
1k
views
incorporating AnimatedMarker plugin with react-leaflet
I have chosen this plugin because it seems like the best way to animate a marker on a map polyline.
It's not on npm so I just added module.exports = L.animatedMarker to AnimatedMarker.js from the ...
- 337
1
vote
0
answers
611
views
Leaflet (geojson) mouseover don't work
I am having problems attaching mouseover, mouseout and click events to leaflet geojson features. I cannot make them work.
Here is my code:
import React, { Component } from 'react';
import L from '...
- 13
0
votes
1
answer
319
views
Leaflet plugin only working when geolocation is enabled
I am using leaflet with react-leaflet.
OverpassLayer is working when geolocation is enabled. When Geolocation is blocked because I'm on localhost, the app isn't even entering the OverpassLayer ...
- 337
12
votes
2
answers
14k
views
How to get bounds with react-leaflet
I want to get bounds of the current map so that I can search those bounds with the Overpass API.
For leaflet I know the method is just map.getBounds(), but I don't know how to implement that in react-...
- 337
21
votes
7
answers
41k
views
How to include "leaflet.css" in a React app with webpack?
I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can't find a way to add the leaflet.css. Without this the map tiles are ...
- 691
0
votes
1
answer
494
views
Error message when importing esri-leaflet-renderers to ReactJS+Backbone Cordova app
I've been building a Cordova app as a proof of concept for display about one of my ideas, so far it's been going great and I've come to learn plenty from this experience.
I've based my work off of ...
- 93
1
vote
1
answer
1k
views
React and Leaflet - issue displaying a layer
I'm trying to use Leaflet on a React project.
My goal is actually very basic: just display a openstreetMap layer (without markers or stuff)
Here is my code:
import React, { Component } from 'react';
...
- 443
1
vote
3
answers
9k
views
react-leaflet: how to set zoom based on geojson
I'm using react-leaflet and my map is displaying fine so far. I've also successfully used <GeoJson> to overlay a polygon.
I've currently got hard-coded my center and zoom values, but I'd like ...
- 33
91
votes
19
answers
85k
views
react-leaflet map not correctly displayed
I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output
Here is my code :
DeviceMap.js
import React from 'react'
...
- 11.8k
2
votes
1
answer
373
views
react-leaflet 1.x + create-react-app : 404 on marker image
I tried using react-leaflet (in version 1.0.0-rc.2) with create-react-app but the marker image is in 404.
The generated image src is http://{server_host}:3000/static/media/marker-icon.2273e3d8.png")...
- 4,980
0
votes
1
answer
2k
views
React leaflet marker layer not updating on zoom
The react-leaflet-marker-layer does not update on zooming the map in/out.
It stays the same, while the map content changes its zoom level.
This happens both during zoom using mouse scroll and the +/...
- 7,954
18
votes
5
answers
15k
views
React leaflet not rendering properly
The react-leaflet map does not get rendered properly.
The map is rendered outside of its parent's boundaries
Some tiles of the map are missing
The problem occurs when using the map with standard ...
- 7,954
2
votes
2
answers
3k
views
React-leaflet: How can GeoJson methods like resetStyle be called?
I am following leafletjs's interactive choropleth map example and I am trying to add interaction by using the GeoJson object's resetStyle method and the Map object's fitBounds method. In leaflet, ...
- 606
9
votes
1
answer
5k
views
componentDidUpdate prevProps gives me current / new props
I'm trying to integrate a leaflet map but I think that is not the problem here. Anyway to re-render my map I want to use componentDidUpdate to see if the props changed I pass down to my map component ...
- 1,129
-1
votes
1
answer
104
views
Mapbox.js not rendering properly in React
I've recently removed pauloborges:mapbox atmosphere package from my project and I'm trying to replace it with mapbox.js from npm. Instead of the map, I get a random mashup of tiles that gets out of ...
- 509
7
votes
2
answers
3k
views
React-leaflet how to resetStyle
I'm following Leaflet's Choropleth tutorial
http://leafletjs.com/examples/choropleth.html
and using react-leaflet.
I managed to setStyle without any modification from the original source code and it ...
- 1,246
2
votes
2
answers
9k
views
How to reference the leaflet layer of a react-leaflet component?
I used react-leaflet to visualize a quite long path on a map. Users can select from a list and I would like to have different color for the selected path. Changing the state and rendering again is too ...
- 180
4
votes
1
answer
2k
views
Leaflet popup won't open (React)
I'm working on a map view for a react application which I'm using Leaflet for (react-leaflet). I'm able to plot markers on the map, but the popups that I have bound to them won't open when clicked. I ...
- 4,049
2
votes
1
answer
7k
views
Having trouble getting a custom zoom button in React-Leaflet
I'm trying to build my own Zoom button with react-leaflet
I have the following code:
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, ...
- 772
4
votes
1
answer
4k
views
I can't get esri-leaflet to work with ReactJS --> basemapLayer of undefined
After npm installing esri-leaflet, and leaflet packages, I get the following error
This is my maps component:
import React from 'react'
import ReactDOM , {render} from 'react-don'
import L from '...
- 5,749
4
votes
1
answer
1k
views
TileLayer displays in different order (Using React-Leaflet library)
I'm trying to do a simple Web App using the library react-leaflet.
I have the following code:
import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
class ...
- 772
0
votes
1
answer
3k
views
Leaflet JS (react-leaflet) - Bounds Box Filled With Transparent Color
I'm working with react-leaflet package, however, if you can answer the question in plain leaflet that would be helpful as well.
I am successfully panning to the bounds of a polygon that I supply like ...
- 2,361
2
votes
1
answer
2k
views
React/ES6: Arrow Function not binding "this" as expected
Language: React/JavaScript ES6
Bundling Tool: Webpack(babel-loader 6.0.0)
Other Libs Involved : Leaflet
Problem:
With the function below the context this is bound to the
component as I need.
...
- 6,402
3
votes
4
answers
5k
views
React and Leaflet
I'm trying to use Leaflet in my React App. I'm running into an issue. Leaflet.js requires the div component to pre-exist when initiating the map. React doesn't "create" the div until it renders the ...
- 161
68
votes
4
answers
71k
views
Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?
I'm working on an app using Leaflet (via react-leaflet). Leaflet directly manipulates the DOM. The react-leaflet library doesn't change that, it just gives you React components that you can use to ...
- 2,213
0
votes
1
answer
2k
views
How to get marker drag event on dragging marker with mapbox LeafLet
I have created custom create Marker button and onClick of that i am adding marker on map.
I can drag that map but I am lot getting it's LatLng on dragging.
I want to get latlng on marker drag event....
- 1,127
2
votes
1
answer
2k
views
Tiles not ordered correctly when using LeafletJS with ReactJS
I am using the LeafletJS plugin to display a full page map in a ReactJS single page app. I followed the instructions here. However, the tiles are not displayed in correct order. They are ordered ...
- 10.1k
0
votes
1
answer
1k
views
What is the proper way to set options for the <Map> component in the React-Leaflet library?
The React-Leaflet documentation specifies that certain dynamic properties can be set via props. However, there are many other Leaflet properties/methods that are customizable...the caveat being that ...
- 80
1
vote
2
answers
755
views
Redux for use in mapping applications
I know that redux is great for handling the global state of an application, and when that state is updated to reflect that in the view. However, is it possible to use it on a react component that ...
- 1,385
4
votes
1
answer
22k
views
React-leaflet bounds
Right now I am setting the bounds of my react leaflet map by passing a bounds parameter as shown below:
<div hidden={!this.props.hide && !this.props.toggle} className="map-container"&...
- 775
0
votes
1
answer
2k
views
ReactJS with Leaflet: tiles not correctly displayed until page refresh
I am building an application using Semantic UI and ReactJS. I am using a tab module to contain my map, which uses the Leaflet Javascript library to render the map.
The problem is that the tiles do ...
- 1,296
0
votes
2
answers
907
views
PruneCluster and React.js
Some used them together?
Maybe there is a component for the PruneCluster?
It will be great to see some examples/tutorials....
- 1,719
3
votes
1
answer
4k
views
Reference on object instance - React
I'm using react to render a leaflet map. Since I can't get the map object instance from the DOM, how can I retrieve the instance from components inside different routes ?
App.js
const Main = React....
- 202
2
votes
2
answers
2k
views
How to write a component which outputs Markers of react-leaflet?
How a custom react component which outputs Marker on map should be written? I need to have smth like this working:
import MyMarker from './MyMarker.js';
const builtMarker = (function() {
const ...
- 3,569
1
vote
1
answer
1k
views
Embeed script tag in React.js render
I try to include a script from Leaflet in a React element, and because it contains a <script>code</script> it raises an error:
var Carte = React.createClass({
render: function() {
var ...
- 7,509
2
votes
1
answer
5k
views
React.js and Mapbox: mapbox map not rendering properly when using react.js
I'm learning to use both react and mapbox,but am struggling with why my mapbox map is not rendering properly when loaded through React. When I load it normally (without React.js), there is no problem,...
- 2,041
37
votes
2
answers
22k
views
Good way to combine React and Leaflet
I am working on a project to combine React and Leaflet, but I must say I am having some hard time with the semantics.
As most of the stuff is managed by Leaflet directly, I don't know if it would ...
- 2,453