title: Use react-leaflet with custom tilemap
body: <p>I'm trying to use react-leaflet with a custom map to switch my project from javascript to React.</p>
  <p>And I'm encountering some difficulties, when i'm setting the tileLayer url to my local map files, the map container just display nothing else then grey empty map.</p>
  <p>Here is the code working with the openstreetmap :</p>
  <pre class="lang-js prettyprint-override"><code>import './Map.css';
  
  import { MapContainer, TileLayer, useMap } from 'react-leaflet';
  
  function Map() {
  
      const center = [51.505, -0.09]
  
      return (
              &lt;MapContainer id=&quot;mapSection&quot; center={center} zoom={13} scrollWheelZoom={false}&gt;
                  &lt;TileLayer
                  attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
                  url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
                  /&gt;
              &lt;/MapContainer&gt;
      )
  }
  
  export default Map;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/youQB.png" rel="nofollow noreferrer">Here is the result</a></p>
  <p>And then, here is my code with custom map :</p>
  <pre class="lang-js prettyprint-override"><code>import './Map.css';
  
  import { MapContainer, TileLayer, useMap } from 'react-leaflet';
  
  function Map() {
  
      const center = [51.505, -0.09]
  
      return (
              &lt;MapContainer id=&quot;mapSection&quot; center={center} zoom={13} scrollWheelZoom={false}&gt;
                  &lt;TileLayer
                  attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
                  url=&quot;../../img/map/{z}/{x}/{y}.png&quot;
                  /&gt;
              &lt;/MapContainer&gt;
      )
  }
  
  export default Map;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/nAShr.png" rel="nofollow noreferrer">Here is the result</a></p>