Meteor + React-Leaflet = No go?

react
1

Hey guys!

Been trying to use the react-leaflet npm package with Meteor 1.4.1 with no success.

Everything builds and run without errors but the result is completely random. The map tiles are all over the place :frowning:

This is my first attempt with React so I’m probably missing something. Basically I’m trying to adopt this JS fiddle here: React-Leaflet example - JSFiddle - Code Playground

Any suggestions welcome!
Thanks

Git repo: GitHub - janoschpizza/metor-react-leaflet: Meteor + React-Leaflet experiment

Result:

933×775 385 KB

2

I don’t have time right now to look at the app in detail, but I can’t think of anything in Meteor that would make this work any differently.

3

Thanks @Sashko.

I’m thinking this has to be a lifecycle / load order issue. How could I force a redraw of the component?

4

Update: I’ve tried doing a delayed render() and forceUpdate() on the component to no avail.

I’m brand spanking new to React but I have a feeling this has something to do with it:

React does not render Leaflet layers to the DOM, this rendering is done by Leaflet itself.

Full document: How it works

5

Do it as I did: Don’t use the npm package, instead use leaflet from source and put the sourcecode into /compatibility

And then create the overlay in componentDidMount() and, of course, destroy it again in componentWillUnmount()

6

Ok, here’s a twist: By accidentally adding the bevanhunt:leaflet Meteor package to the project, react-leaflet magically started working normally.

Go figure!

1 Like
7

I tried adding bevanhunt’s leaflet package but what ended up happening was the whole page just went blank. Any one else have another workaround?

8

I’ll quote myself:

[quote]Do it as I did: Don’t use the npm package, instead use leaflet from source and put the sourcecode into /compatibility
And then create the overlay in componentDidMount() and, of course, destroy it again in componentWillUnmount()
[/quote]

9

This actually worked, I just forgot to add the height to the map container! Maybe that should be in the react-leaflet quick start.

For a concise resolution:
meteor npm install --save leaflet
meteor npm install --save react-leaflet
meteor add bevanhunt:leaflet

For the component, just add a style and height to it if you’re rendering using a the class render aproach:

render() {
         return (
                 <Map center={position} zoom={13} style={{height: 180}}>
                     <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>
                 );
     }
10

My solution https://github.com/Siteograf/meteor-react-leaflet/blob/master/README.md

11

I follow your guide but still the map is not correct