CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
Veraduxxz
Veraduxxz

Reputation: 67

Mapbox GL JS tiling faulty?

Messed Up Tiling

I'm running into the issue that I can load my tiles fine but they're placed completely wrong in the map view. This happens on all zoomlevels beyond 0 (because 0 obviously is only an entire image)

I'm running a tileserver-php tileserver serving unpacked vector tiles from an mbtiles file. I've managed to get them working but the resolution becomes crap on openlayers beyond the maxzoom (as if the vectors aren't updating their own resolution properly).

On Mapbox GL JS I got them to load in but am now facing this issue. 

var simple = {
  "version": 8,
  "sources": {
      "osm": {
          "tiles": ["http://localhost:8000/tileserver/nederland/{z}/{x}/{y}.vector.pbf"],
          "type": "vector",
          "maxzoom": 14
      }
  },
  "style": {
    // this styling is about 600 lines long so I'm not including it
  }
}

var map = new mapboxgl.Map({
    container: "map",
    style: simple,
    //maxBounds: [[2.992192,50.74753],[7.230455,54.01786]],
    zoom: 1,
    center: [5.8, 53.2]
});

With OpenLayers, I was able to set a tiling grid like so:

function tileUrlFunction(tileCoord) { 
              return ("http://localhost:8000/tileserver/nederland/{z}/{y}/{x}.vector.pbf")
              .replace("{z}", String(tileCoord[0]))
              .replace("{x}", String(tileCoord[1]))
              .replace("{y}", String(-tileCoord[2] - 1));
            }

Is this possible with Mapbox GL as well or is something else somewhere else messing up?

I've tried to following: - Change URL to a different format ({x}/{y}/{z}, {z}/{y}/{x} etc..). This, funnily enough, fixed either vertical or horizontal positioning for the left tiles or the upper tiles, but not both.

Upvotes: 0

Views: 288

Answers (1)

Veraduxxz
Veraduxxz

Reputation: 67

@sabas is right.

Although it appeared to be a standard in the tileserver-php framework.. after that; I replaced the string to read like this: {z}/{y}/{x} and it works now.

Upvotes: 1

Related Questions