skip to Main Content

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.

enter image description here

enter image description here

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;
}

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. Use an older version of map like below command .the current one is bugged

    pmtiles extract https://build.protomaps.com/20240919.pmtiles
    my_area.pmtiles –bbox=$AREA

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search