Odtnhj

I have a Leaflet map on my React app and I would like to dynamically update the URL with position information (latitude, longitude and zoom) when the map is moved.

Something like: app.com/lat,lng,z/myroutes

Additionally, lat,lng,z should have default values so the app can start at app.com and redirect.

Leaflet has an event listener called onMoveend which gives me the information I want. Question is how to pass it to my Router so it updates the URL and the app internal links.

I am using react-router v4 for the routes.

I've tried creating a custom history object with a basename property attached to the state then passing it to the Router. It works (in terms of updating the URL - in this case, the basename), but the navigation on the app crashes and the console say "You cannot change Router history".

This is the component which updates the URL (this.props.map are from Redux store):

componentDidUpdate(prevProps) 
 if (this.props.map !== prevProps.map) 
 const lat, lng, z = this.props.map
 this.setState( lat, lng, z )
 


render() 
 const lat, lng, z = this.state

 if (lat && lng && z) 

 const history = createBrowserHistory(
 basename: `@$lat,$lng,$z`
 )

 return (
 <Router history=history>
 <Main>
 <Switch>
 <Route exact path='/farms' component=FarmsList />
 <Route exact path='/farms/new' component=NewFarm />
 <Redirect from='*' to='/farms' />
 </Switch>
 </Main>
 </Router>
 )
 else 
 ...
 

Just push the new url onto the history stack,

window.history.pushState(/*empty state object*/, "example name", "/`@$lat,$lng,$z`");

to change the url without causing the browser to load the new page

check out the documentation

I did this exact thing for a website I built. Didn't use react-router but used my own little url parser thing to update the URL and inform redux of the url params on page load.

https://github.com/jbccollins/metro-monitor/blob/master/client/src/containers/app/index.js#L55

Here's where it's called using onMoveEnd
https://github.com/jbccollins/metro-monitor/blob/master/client/src/containers/MetroMap/index.js#L269

Note that I added a check to make sure you don't save fractional zoom levels that can happen using mobile pinch zoom. That'll really confuse leaflet and was crashing my app.

Hope that helps