0

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:

<script>
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 () {
        this.setupLeafletMap();
    },
};
</script>

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.

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

0

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.