I'm trying to set up OpenStreetMap with a self-hosted Protomaps file served by Apache.
The same error occurs with Leaflet and MaplibreGL. maplibreGL is what I want to use in the app.
I tried removing all stylesheets from the page (except some sizing for the map container) to make sure our styles is not causing the problem, but the result is the same.
versions from package.json:
"maplibre-gl": "^4.7.1",
"pmtiles": "^3.2.0",
The map shows, is navigable, but rivers and water bodies are rendered incorrectly, as if some parts of the SVG path was closed by a straight line.
I have the same bug with firefox and chrome. The way the rivers are broken changes with zoom level, but it is never correct.
The file /osm/my_area.pmtiles
was downloaded using the pmtiles tool. The sample code is composed of various examples. It is 1.4GB so I can't upload it here. pmtiles verify
shows no errors.
DATE='20240922'
AREA=11.958618,48.520243,18.918457,51.120765
pmtiles extract https://build.protomaps.com/$DATE.pmtiles my_area.pmtiles --bbox=$AREA
How I render the map:
import { Protocol } from "pmtiles";
import maplibregl from "maplibre-gl";
function initMaps() {
let protocol = new Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);
const mapOpts = {
style: {
version: 8,
sources: {
selfhosted: {
type: "vector",
// url: "pmtiles://https://example.com/example.pmtiles",
url: "pmtiles:///osm/my_area.pmtiles", // http://fb.local
}
},
layers: [
{
id: "water",
source: "selfhosted",
"source-layer": "water",
type: "fill",
paint: {
"fill-color": "#80b1d3",
},
},
{
id: "buildings",
source: "selfhosted",
"source-layer": "buildings",
type: "fill",
paint: {
"fill-color": "#d9d9d9",
},
},
{
id: "roads",
source: "selfhosted",
"source-layer": "roads",
type: "line",
paint: {
"line-color": "#fc8d62",
},
},
{
id: "pois",
source: "selfhosted",
"source-layer": "pois",
type: "circle",
paint: {
"circle-color": "#ffffb3",
},
},
],
},
container: document.getElementsByClassName('Map')[0],
center: [this.data.lng, this.data.lat], // starting position [lng, lat]
zoom: this.data.zoom, // starting zoom
};
console.log(mapOpts);
let map = new maplibregl.Map(mapOpts);
map.showTileBoundaries = true;
}
The problem was that the current format does not match up with the examples.
It's discussed and resolved here https://github.com/protomaps/PMTiles/issues/463
The fix was adding a newer "style" JSON.