CODEWITHSUNDEEP
reactjsleafletreact-leaflet
Brad
Brad

Reputation: 91

Render local tiles as <TileLayer> in react-leaflet

When I run my local .png tile library in a simple Leaflet index.html I get perfectly rendered and geo-correct tiles:

    <script>
        function onLoad() {

            var mymap = L.map('mapid').setView([-42.132, 147.175], 12);

            L.tileLayer('demo-map/{z}/{x}/{y}.png',
            {    maxZoom: 16  }).addTo(mymap);
        }
    </script>   
</head>
<body onload="onLoad();"> 
    <div id="mapid" style="height: 500px;"></div>
</body>

But when I put the same path in "url=" in react-leaflet TileLayer, the tiles do not render.

          <BaseLayer checked name="Local Map (Offline)">
        <TileLayer
          attribution="This map is offline"
          url="demo-map/{z}/{x}/{y}.png"
        />
      </BaseLayer>

The .png tiles are stored in src/demo-map/ in the same directory structure that Mobile Atlas Creator exported

Can anyone help me load my tiles in react-leaflet, or suggest a method incorporating standard Leaflet into my React app, bypassing react-leaflet and TileLayer?

Thank you

Upvotes: 1

Views: 2507

Answers (1)

Lcool
Lcool

Reputation: 379

what worked for me, is that i moved my tiles folder into the public directory, then in the jsx code I refer to it like this : code

and this is my directory : public directory

Upvotes: 2

Related Questions