react-leaflet

What I want to achieve: Have a <Map><FeatureGroup><Circle />[1 or more]...</FeatureGroup></Map> hierarchy and fit the map bounds to the feature group so that all the circles are in the viewport. If there is only one circle, it should fit the bounds (ie: zoom in on) to that circle. What I've tried: giving FeatureGroup a ref and calling getBounds on it to pass onto Map . Because of the lifecycle FeatureGroup doesn't exist at the time componentDidMount is called - it gets rendered later ( https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-161594328 ). Storing Circle in state and

I would like to add the module "React-leaflet-locate-control" on Map. Unfortunately, I have this error "TypeError: Cannot read property 'addLayer' of undefined" and I don't know how to correct this error. Can you help me please ? Here is my component Map : import './Map.css'; import React, { Component } from 'react'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import L from "leaflet"; import { getLat, getLng } from '../../Store.js'; import SearchBar from '../SearchBar/SearchBar.js'; import LocateControl from 'react-leaflet-locate-control'; const customMarker = new L.icon({

Versions: react-router-dom 4.1.1 react-router-redux 5.0.0-alpha.4 react-leaflet 1.1.3 leaflet 1.0.3 Steps to reproduce I create a leaflet map. In which I add some markers. These markers have popups. In each of these popup I want to have a <Link> Also if it helps this is my Routing config: ReactDOM.render( <Provider store={store}> <div> <AppContainer /> <ConnectedRouter history={history}> <div> <MenuContainer /> <Switch> <Route path='/:area/:sport/list' component={ListContainer} /> <Route path='/:area/:sport/map' component={MapContainer} /> <Route path='/:area/:sport/rasp' component=

I've got very simple code to display a map using react-leaflet and place a marker on it. However, i get the following two errors in my browser console GET http://localhost:8080/marker-icon-2x.png 404 (Not Found) GET http://localhost:8080/marker-shadow.png 404 (Not Found) I tried to fix this issue by downloading those two images and placing them at the root. It works. However, how can i change the URL the react-leaflet marker element looks for the marker images? I'd like to store them in "./images" rather than at the root. Try to do this :) React leaflet for some reason do not include images

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-leaflet. class SimpleExample extends React.Component { constructor() { super(); this.state = { lat: 51.505, lng: -0.09, zoom: 13, }; } componentDidMount() { console.log(this.refs.map.getBounds()) } render() { const position = [this.state.lat, this.state.lng]; return ( <Map center={position} zoom={this.state.zoom} ref='map'> <TileLayer attribution='© <a href="http://osm.org/copyright">OpenStreetMap

I'm developing a leaflet map with reactjs but I got this error when I implemented a <MarkerClusterGroup> from react-leaflet-markercluster . TypeError: Super expression must either be null or a function, not object Here is the error below: Here's the Javascript: import React, { Component } from 'react'; import L from 'leaflet'; import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import MarkerClusterGroup from 'react-leaflet-markercluster'; import 'react-leaflet-markercluster/dist/styles.min.css'; // code for map marker icon var myIcon = L.icon({ iconUrl: 'data:image/png;base64

Is there a way to use vector tiles from react-leaflet ? I am aware of Leaflet.VectorGrid , but it is not written for react-leaflet? For react-leaflet v2 , export the MapBoxGLLayer component wrapped with HOC withLeaflet() to get it working. Steps: 1.Install mapbox-gl-leaflet . npm i mapbox-gl-leaflet 2.Add mapbox-gl js and css to index.html <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' /> 3.Add this component. import L from "leaflet"; import {} from "mapbox-gl

is there any way popup always stay open ? Not having the need to click on it to open. Expected behavior https://monosnap.com/file/mPkuSTmPAfwxTxY99YQVA5m96Zolow.png Actual behavior http://take.ms/cUej0 What you can do is to make your own Marker class from the react-leaflet marker, and then call the leaflet function openPopup() on the leaflet object after it has been mounted. // Create your own class, extending from the Marker class. class ExtendedMarker extends Marker { componentDidMount() { // Call the Marker class componentDidMount (to make sure everything behaves as normal) super