Relative Tile Path in Vueleaflet

Question

I want to load a map from my computer which worked when I tried it with a normal JavaScript solution

Now I want to use Vue Leaflet2, but the path:

url: '@/assets/map/{z}/{x}/{y}.png',

... does not work.

I tried an example path from the docs which refers to a website, and it worked, so both my map and my implementation are working.

The only problem is getting both to work together.

My tile path is like:

src/assets/map/..

How can I accomplish my goal?

EDIT 1:

Folder Structure

EDIT 2: Network Track

Answer 1

I guess you prepared your Vue project with Vue CLI and webpack template, given that you use the @ alias and /assets/ subfolder.

You should realize that what you pass to Vue2Leaflet url prop is the Leaflet Tile Layer urlTemplate. As a "template", it is only a "hint" to the actual tile images path. Therefore, if you allow webpack to manage those images, make sure it does not fiddle too much with their filename, otherwise Leaflet will no longer be able to retrieve them. In particular, do not try inlining them (with url-loader) or hashing their name (with file-loader).

A more reasonable approach would have been to treat your tiles as static assets (instead of managing them as source code in your src folder), so that webpack totally ignore them and Vue build will "just" copy them to your build output: put your tiles into the /static/ folder at the root of your project, instead of /src/assets/.

Note: if you used Vue CLI 3, the static folder is now /public/ instead:

When to use the public folder

• You need a file with a specific name in the build output.
• You have thousands of images and need to dynamically reference their paths.

With Vue CLI 3, you could then use:

<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>

data () {
 return {
 // Assuming your tile images are in /public/map/
 url: process.env.BASE_URL + 'map/{z}/{x}/{y}.png',
 attribution : '',
 }
}

Given that you probably have thousands of such tile images to be copied, you could also completely separate your tiles from your Vue project: e.g. directly copy them to your host server.

• niclas_4: Hello, thanks for taking your time but so far the solution is not working. I included my Folder Structure above and tested the following things: // url: '../../public/map/{z}/{x}/{y}', url: process.env.BASE_URL + 'map/{z}/{x}/{y}.png',
• ghybs: Open your browser web console and look for actual network requests. Adjust your url accordingly. If you need further help, please report the network request for tiles, your project structure and webpack config.
• niclas_4: Okay, im at work now and home in About 8 Hours, then i will try it out, thanks for your help so far i will @ you again when im home and tested it out again.
• niclas_4: Okay i editet my post with the Network Requests, but i dont really know what to do with that information. Thanks in advance.
• niclas_4: I got it working now it was all my fault using .png due to it being in the docs of vueleaflet while having .jpg, all these hours for such a problem i am sorry for your time and that im so stupid.