pmtiles center coordinates wrong (was:not able to render pmtiles file in maplibreGL)

[eliboni]

I've generated pmtiles file for Malta via basemap and serving it via http-server.

I can display them fine within leaflet with protomapsL.leafletLayer - here the index.html snippet:

<div id="map"></div> 
<script>
        const map = L.map('map')
            map.setView(new L.LatLng(35.8836,14.4468),14);
        var layer = protomapsL.leafletLayer({url:'http://192.168.1.178:8080/malta.pmtiles'})
        layer.addTo(map)
            layer.addInspector(map)
            // layer.removeInspector(map)
</script>

I'm now trying to render it via maplibreGL but I just get an empty screen (no console errors), it is as if the layers are not loaded correctly: however when I drop the pmtiles file in https://maps.protomaps.com it displayes jiust fine and I got the JSON style - here is index.html:

        <script>
            let protocol = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles",protocol.tile); 
        let PMTILES_URL = "http://192.168.1.178:8080/malta.pmtiles";
            const p = new pmtiles.PMTiles(PMTILES_URL);
            protocol.add(p);
            p.getHeader().then(h => {
                const map = new maplibregl.Map({
                    container: 'map',
                    zoom: h.maxZoom-2,
                    center: [h.centerLon, h.centerLat],
                    style: 'http://192.168.1.178:8080/mystyle.json'
                });
                map.showTileBoundaries = true;
            });

        </script>

and mystyle.json is attached: mystyle.json

Is anyone so kind to give me an hint on what I am doing wrong? Thanks in advance

[bdon]

we need your malta.pmtiles to reproduce, please upload that somewhere

[eliboni]

@bdon here it is, many thanks:

https://drive.google.com/file/d/1VtsZvOqNA4w4Rv95hB4zHASQs6crlWgM/view?usp=sharing

[bdon]

Your PMTiles header has center lon, center lat: 14, 35: whole numbers instead of a precise point that is close to Malta. So your viewport is far off where it should be. Did you override the determination of the center somehow?

[eliboni]

nope, I've just run this command:

java -jar target/*-with-deps.jar --download --force --area=malta

[eliboni]

btw - you're perfectly right: just modified my code with the proper lat/lon (center: [14.4468, 35.8836]) and I see it properly:

<div id="map"></div> 
        <script>
            let protocol = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles",protocol.tile); 
        let PMTILES_URL = "http://192.168.1.178:8080/malta.pmtiles";
            const p = new pmtiles.PMTiles(PMTILES_URL);
            protocol.add(p);
            p.getHeader().then(h => {
                const map = new maplibregl.Map({
                    container: 'map',
                    zoom: h.maxZoom-2,
                    center: [14.4468, 35.8836],
                    style: 'http://192.168.1.178:8080/mystyle.json'
                });
                map.showTileBoundaries = true;
            });
        </script>

let me know if you want me to do some tests on why the default center does not contain precise point , I've used basemaps master from yesterday.

[bdon]

Thanks for reporting, will be fixed by https://github.com/onthegomap/planetiler/pull/769 upstream

[bdon]

Updating your planetiler dependency via mvn -U clean package should fix it. Please re-open if you're encountering the same issue, thanks!