Issue creating maps with leaflet.js with files from local directory.

Question

I am currently working on an application that needs to have a map work offline. I essentially followed this tutorial:

http://blog.davidelner.com/create-map-with-tilemill-and-leaflet/

I created an mbtiles file of the area I needed here:

https://openmaptiles.com/extracts/#bounds=-83.84455,42.19104,-83.59049,42.35465

I saved the file as michigan.mbtiles then ran this command to create the png images:

mb-util --image_format=png michigan.mbtiles michigan

lastly in the javascript file I have this

    var map = L.map('map').setView([42.26, -83.72], 5);
    L.tileLayer('assets/Michigan/{z}/{x}/{y}.png', {
        maxZoom: 14
      }).addTo(map);

I am using angular 6 if that makes any difference. But I have the Michigan folder in my assets folder and I am trying to get the map made from the directory.

If I change the L.tileLayer to any of the demo code I see online a map displays so I'm thinking either there's an issue with the way I made the png's(If i open them up I don't see anything, but I'm not sure that's wrong because this is the first time I ever tried to do anything like this.)

Or there's an issue with my relative path that for some reason I cant just figure out.

Thanks for any help.

Answer 1

I figured it out, when using mb-util with openmaptiles, the mbtiles file you get from them does not contain the needed data. For example if you created a map through tilemill then used mb-util on that mbtiles file, the extracted files will be png. For some reason openmaptiles does not include whatever that is in their mbtiles files.