I have some zxy tiles built with tippecanoe that I can load into QGIS by setting a remote connection in the Vector Tiles tab to the url where the files are kept. However, I can not load them into my map (I am trying with both Leaflet and Mapbox). With Mapbox I get some errors, though with Leaflet nothing shows up. I suspect with Leaflet the files are being loaded but as no style has been assigned to them at any point they just don't show up.

I generated the files from GeoJSON using: tippecanoe -o thing.mbtiles --no-tile-size-limit --no-tile-compression file.json --force" then to extract from the mbtiles: b-util thing.mbtiles woptions_file --image_format=pbf (I have tried using png files too)

The code to load into Leaflet is:

import "leaflet/dist/leaflet.css";
import L from "leaflet";
import vectorTileLayer from "leaflet-vector-tile-layer";

export default {
    name: "Map",
    data () {
        return {
            center: [37, 7749, -122, 4194]
    methods: {
        setupLeafletMap: function () {
            var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                maxZoom: 19,
                attribution: "© OpenStreetMap"
            const url_pbf = "https://my-cloudfornt-url/{z}/{x}/{y}.pbf";
            const pbfLayer = vectorTileLayer(url_pbf);
            const map = L.map("mapContainer", {
                center: [50.9025349, -1.404189],
                zoom: 14,
                layers: [pbfLayer]

    mounted () {

Why aren't the vector tiles showing on Leaflet and what can I do to fix that?

Caveat: I don't want a running server to process the tiles on the fly, I want to use S3 and cloudfront to serve the tiles.

  • Any errors in the browser debugger console or network section?
    – TomazicM
    Aug 10 at 18:15


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.