Unable to display map on browsers

[xinyuluo]

Hi! I'm new to this project. I tried running some html files in the example section in Safari/Chrome but maps were not shown. I got the following errors: I couldn't figure out why fetch is aborted. Is there something I'm missing here?

Thank you.

[bdon]

how are you serving the directory containing the PMTiles? using the file:/// protocol won't work, you need to use an HTTP server like the nodejs http-server or this small go program I've included: https://github.com/protomaps/PMTiles/blob/master/examples/serve_localhost.go

[xinyuluo]

Hi Brandon, thanks for your quick reply.

I was previously using python -m http.server but once I switched to nodejs http-server it works :)

[xinyuluo]

However, If I replace the pmtiles file from the example to one I generated using pmtiles-convert (converting from mbtiles file), I cannot display tiles on the web properly. For Leaflet, I get an error image like this:

and for maplibre gl I don't see anything in the interface. Do you know what might be the cause of it? Thank you.

[bdon]

@xinyuluo you are using vector tiles (uncompressed) as the tile format inside the PMTiles? what console errors do you get? can you share your HTML code and datasets via GitHub gist?

[xinyuluo]

@bdon yes I used vector tiles; should I use raster tiles instead? I didn't get any console errors. For my HTML code, i used almost the same code from the example (just replacing tile file and coordinates): https://gist.github.com/xinyuluo/aea1b52d7ddbb33d8722ca6acde9bc51. I'm not sure how to share tile datasets via gist, so they are here: https://drive.google.com/drive/folders/1yutH5rn4Q5ZuvZlo0Eb_xRAFPQRWxc0U?usp=sharing. Thank you!

[bdon]

Hi Xinyu,

Everything is working correctly - you can verify the PMTiles archive by dropping it into the inspector here: https://protomaps.github.io/PMTiles/examples/inspector.html

What's happening is that the style you have defined does not visualize any of the layers in the vector tiles: the examples I show are based off the layers and tags defined here: https://protomaps.com/docs/map-layers-tags/ while your PMTiles uses the OpenMapTiles schema. You'll need to replace the style with one designed against the OpenMapTiles schema or make some changes to the example styles: like, replace road with transportation and building with buildings for source-layer

[xinyuluo]

Hi Brandon, it works! Thank you for your tips. :)