react-leaflet Map doesn't appear at the page

[yuzhva]

Actually I created local branch with that small update for README, but i got 403.

It took me few hours to understand why I can't see map on my page. At first, I thought because of some style attributes:

position: relative;

or

overflow: hidden;

But that I understood that, there is poor exemple in you README, so you could make some important addition:

React-Leaflet

import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

const position = [51.505, -0.09];
const mapStyle = {
  height: '180px'
};

const map = (
  <Map center={position} zoom={13} style={mapStyle}>
    <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>
);

render(map, document.getElementById('map-container'));

Note that the <Map> component creates its own <div> container for the map, it does not get attached to an existing node. Also don't forget to add height style attribute (as it mentioned in quick start guide) for <div> tag that contains map.

[PaulLeCam]

Hi, This code is only an example, it is not meant to replace the getting started section of the documentation.

[neopostmodern]

I disagree. Even if it is "just an example" it's the first thing everybody will copy and it's very, very unintuitive if you can't see anything. It will be trivially easy for everybody to start adapting / removing the specific styles if they understand that they are necessary. I also don't see any specific downside to including it? Correct me if I'm mistaken there.

[PaulLeCam]

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.

This is literally the first line of the getting started section of the documentation, before the code sample that is simply an adaptation of Leaflet's one. I'm all for making the documentation better, but I can't help if people choose not to read it.