title: Leaflet-React map rendering tiles not in place and empty tiles
body: <p>I am trying to render a simple Leaflet-React map to the screen.</p>
  
  <p>But the tiles are all messed up and or not rendering. Take a look at the screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/tmfDK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tmfDK.png" alt="demonstration"></a></p>
  
  <p>I tried using the default OpenStreetMaps URL as well as a MapBox URL but both give the same result, so I think it is not a tile server issue. Though I could be wrong. </p>
  
  <p>Here is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {Component} from 'react'
  import ReactDOM from 'react-dom'
  import {Map, TileLayer, Marker, Popup} from 'react-leaflet'
  
  class FieldMap extends Component {
      state = {
          lat: 51.505,
          lng: -0.09,
          zoom: 1,
          zoomOffset: 1
      }
  
      render() {
          const position = [this.state.lat, this.state.lng]
          return (
              &lt;div style={{
                  paddingBottom: "5%",
                  height: "200px",
                  width: "200px"
              }}&gt;
                  &lt;Map style={{
                  paddingBottom: "5%",
                  height: "200px",
                  width: "200px"}} center={position} zoom={this.state.zoom} zoomOffset={this.zoomOffset}&gt;
                      &lt;TileLayer
                          attribution="&amp;amp;copy &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors"
                          url="https://api.mapbox.com/styles/v1/rustyraptor/cjkbednp4buod2rnwog2xrdtb/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicnVzdHlyYXB0b3IiLCJhIjoiY2prOXdtZ2E5MjN3ODNxbWVsM3NyNWlsZCJ9.AVHo6o9Z68w1c2lsBXuGDg"/&gt;
                      &lt;Marker position={position}&gt;
                          &lt;Popup&gt;
                              A pretty CSS3 popup.
                              &lt;br/&gt;
                              Easily customizable.
                          &lt;/Popup&gt;
                      &lt;/Marker&gt;
                  &lt;/Map&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>Here is my HTML file:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;!-- &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; --&gt;
      &lt;title&gt;AgrowView&lt;/title&gt;
      &lt;!-- &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
  
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can also view the whole project on my github repo. <a href="https://github.com/RustyRaptor/AgrowView" rel="noreferrer">https://github.com/RustyRaptor/AgrowView</a></p>