make leaflet offline map (use local map tiles) but nothing shows up

Question

it's work on leaflet online map like this

<script>
import L from 'leaflet';
export default {
mounted() {

var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 13,
  minZoom:2
}).addTo(map);

},
};
</script>

when i try to make map tiles locally then nothing show up on html ( using MobileAtlasCreator make map tiles)

<script>
import L from 'leaflet';
export default {
mounted() {

var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('./img/mapTiles/{z}/{x}/{y}.png', {
maxZoom: 13,
minZoom:2
}).addTo(map);

},
};
</script>

this is my reference below

HTML offline map with local tiles via Leaflet

https://www.youtube.com/watch?v=oP4bCLtXIeY

thanks a lot

Any errors in the "network" section of your browser's developer tools? — IvanSanchez, Mar 24 '22 at 07:40
@IvanSanchez i have checked browser console but it's nothing error . — BBQ B, Mar 24 '22 at 08:37
What if you try adding a hard coded image in your HTML page, e.g. ``? — ghybs, Mar 24 '22 at 11:32
@ghybs I have tried this before I posted . it shows with img tag — BBQ B, Mar 24 '22 at 12:58

score 0 · Answer 1 · answered Mar 24 '22 at 14:25

Since you are planning to work (or use it afterwards) in a local environment, I would take out the import snippet from the code. It's mounted, I get it; but just work locally, after you get those tiles downloaded. Put them in a folder, and load them using the code you have. Your code is fine! Here is my example:

    var m = {x: 41.892594, y: 12.484371};
    var SELF_Map = L.tileLayer('empire/{z}/{x}/{y}.jpg', {
        //attribution: 'none',
        continuousWorld: false,
        minZoom: 4,
        maxZoom: 10,
        tap: false
    }).addTo(map);
    map.setView({lat: m.x, lng: m.y}, 6);

It worked for me every time. I get the images from my favorite map provider, I download them, and store them in a folder, in this case, a folder called "empire".

hi @Abel Knezevic thanks for your advice i was trying to push on git to show that i can't use the local tile . so i made a pure html to show it and then miracle things happened . when i use just html it works and i was not build successfully by vue 2 (2.6) . anyway thanks a lot i'll figure out why i can't use vue to build nice map — BBQ B, Mar 25 '22 at 03:08

make leaflet offline map (use local map tiles) but nothing shows up

1 Answers1