React-leaflet: Example from readme does not render a map

[pke]

I tried this in a new react app and all I got was a white screen.
Any ideas?

[PaulLeCam]

This example assumes you are familiar with React and Leaflet, if not you should read their "getting started" guides first to make sure your environment is properly set.

[pke]

I am familiar with the stack. The sample code is just not displaying a map.

[benzen]

I also experience some difficulties with the example for the readme.

Maybe it's due to my setup, but it's hard to tell.

Here is an example:

The map render partially, but there is always a section of the map that doesn't render correctly, like here:

In theses example i have the devtools open. If I resize the window, the map goes white, and i will never see any change again. The tiles are downloaded, but never rendered.

I have no error message.

@pke Is this the same behavior ?
@PaulLeCam Any clue on what can go wrong here?

[pke]

Yes same here!

[benzen]

I've tried to use the pure leaf-let example, It produce the same result.
So i think we are missing some piece here.

Here is a drupal guy which seems to experience the same problem as we do.
https://www.drupal.org/node/2472299

[benzen]

As mentioned by @PaulLeCam we should have read more carrefully the quickstart guide of leaftlet.
http://leafletjs.com/examples/quick-start.html
If you define a heigh on the map container, and you also need to import the css provided with leaflet.

@PaulLeCam I understand that you don't want to repeat everything that is sayed on the leaflet website, but be reader are so much lazy (I didn't noticed that there is a mention about the css).

I propose to move thoses consideration into the install section of the readme.

[benzen]

Here is a PR for this:
https://github.com/PaulLeCam/react-leaflet/pull/124

I've spoken about the container height, not sure if it's required.

[benzen]

After other trials, It seams that the map inside the components get rendered inside a container iwht the class .leaflet-container. That class require a height in order to show something.

I think that we should make it more abvious to the new comer that he/she need to set a height on a leaflet-container class

[PaulLeCam]

Getting started section of the doc:

If you are not familiar with Leaflet, make sure you read its quick start guide first. You will need to add its CSS to your page to render the components properly.

It's written black on white you should setup Leaflet following their documentation, if you choose to skip this step it is not an issue with this lib.

[pke]

Does it really hurt to add a reminder in the readme of this project also, to set the mapContainer height? How many issues you think can you prevent in the future? And contrary to your section of the doc its not enough to add their CSS to the page. The most important part is to set the map container's element height explicitly.

[PaulLeCam]

Again, this library provides bindings to Leaflet, it is not a replacement for it. This documentation is not intended to replace Leaflet's one, it is meant to describe how to use this library after you have setup Leaflet (and React, and Babel, and an HTML page for that matter).

[benzen]

I totally agree on this with you, and thanks to your efforts, I was able to
use this lib to quickly implements everything that I need for my app.
The point that i want to make is that making thoses two information more
evident will help people get started.

The way i generally work, is that I try to get something running with just
a quick overview of the read me.
In general if it doesn't I will leave and try the next one. which is sad
since your lib works pretty well.

I understand that you don't want to replace the leaftlet docs, it's to big
for any of us. But I think the starting point are really important.
Since this lib require leaflet, we almost need no setup once in a react app.

If you really prefer you opinion, I won't go against, nor fork you project.
I just will have to keep it in mind for other project that will need your
lib.

You made a Great job.

2016-03-10 6:56 GMT-05:00 Paul Le Cam [email protected]:

Again, this library provides _bindings_ to Leaflet, it is _not a
replacement_ for it. This documentation is not intended to replace
Leaflet's one, it is meant to describe how to use this library _after_
you have setup Leaflet (and React, and Babel, and an HTML page for that
matter).

—
Reply to this email directly or view it on GitHub
https://github.com/PaulLeCam/react-leaflet/issues/123#issuecomment-194811614
.

Benjamin DREUX

[pke]

Still can't get it to work. My code is the same as in the example. But no tiles for the tile layer are loaded. Using browserify instead of webpack though. Not sure if it does anything different.

[PaulLeCam]

Here is a working jsfiddle using the UMD build, you may have better luck starting from there to adapt your code: http://jsfiddle.net/paul_lecam/q2v7t59h/

[pke]

Thanks Paul for ur efforts. I got it working with plain leaflet now. Trying ur components again.

[pke]

So after some trying, that are my results. Plain leaflet works with that code

export default class MapContainer extends React.Component {
  componentDidMount() {
    this.map = L.map(this.refs.map).setView(position, 13)
    L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      attribution: "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"
    }).addTo(this.map)
  }

  render() {
    return <div ref="map" style={{height:"100%",width:"100%",position:"relative"}}/>
  }
}

No external stylesheet to style ".leaflet-container" is used. The map is displayed as it should.

Now with your components instead nothing is displayed except for the zoom controls.

export default class MapContainer extends React.Component {
  render() {
    <Map zoom={13} position={position} style={{height:"100%",width:"100%",position:"relative"}}>
      <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      />
    </Map>
  }
}

[PaulLeCam]

I can't reproduce your issue, this example using style rather than setting CSS properties is working as expected: http://jsfiddle.net/paul_lecam/w04wrb4g/

[sulihuang]

@benzen @pke I have the same problem;
and I use this
import 'leaflet/dist/leaflet.css'

[idurant]

My issue with rendering was the fact that I was using a parent div. Once removed it worked. Truly the fix was making sure to include the css for .leaf-container when using react-leaflet. The demo used #mapid

example from @PaulLeCam jsFiddle:
.leaflet-container { height: 400px; width: 100%; }

cheers!

[NithinKulal]

How to add Google Map Layer..?

[umergraana]

1) import 'leaflet/dist/leaflet.css'
2)

[S04Nik]

It was exhausting to find a solution . Here what Iv done :

import React from 'react'
import {MapContainer,Marker, Popup, TileLayer } from 'react-leaflet';
import './map.css';
const WeatherMapComponent=(props)=>{
return(
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{/*
A pretty CSS3 popup.
Easily customizable.

*/}

)
}

export default WeatherMapComponent;

map.css file

.leaflet-container { height: 400px; width:100%; }

to my mind this problem was in div id . iv just deleted div with id and added css with .leaflet-container class . fwuh...solved