I'm trying to display mbtiles in a Mapbox web map, and I've created the vector tiles using the ogr2ogr -f MVT -dsco FORMAT=MBTILES -dsco MAXZOOM=10 target.mbtiles data.geojson method and storing the file on an S3 bucket. However, I'm having trouble loading and displaying these in my map and am getting the following error:
Could not load image because of The source image could not be decoded.. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.
at ajax.js:301:18
I loaded the mbtiles file into QGIS and it displays as expected. Here's the HTML and JavaScript code I've been using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MBTiles Map</title>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Create a container for the map -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'TOKEN';
// Create a new Mapbox map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 10 // Set the initial zoom level
});
map.on('load', function () {
map.addSource('local-mbtiles', {
type: 'raster',
tiles: ['https://s3-bucket-url/path/to/mbtiles-file.mbtiles'],
tileSize: 256
});
map.addLayer({
id: 'local-mbtiles-layer',
type: 'raster',
source: 'local-mbtiles'
});
});
</script>
</body>
Could someone please guide me on how to correctly display my vector tiles in a Mapbox web map?
That will definitely not work.
The point of vector tiles is to fetch the single tile the browser needs, not the entire MBTiles file.
You can either upload each individual vector tile individually (and configure the S3 bucket to support public access to them), or use something different like PMTiles which does support what you're trying to do.