CODEWITHSUNDEEP
reactjsopenlayersopenlayers-5
Addison
Addison

Reputation: 26

Can't Center Map with XYZ Tiles

I sliced an image into XYZ tiles using the gdal2tiles command-line tool. The map loads fine and all the expected tiles are in working order, however there are two problems (probably related):

  1. The {z}/{x}/{y} format is making a bunch of requests to tiles that don't exist.
  2. I can't seem to accurately center the map or its extent (so that I can prevent panning off the map).

I am attempting to use fit() first so that the map is fully visible, and then on('change:resolution') updating the extent to prevent panning beyond the edges of the map (not working at the moment)

The code comes in around 200 lines, so I'll leave links below

I tried setting up a JSFiddle but couldn't get it to work.. Alternatively, you can look at the live demo or clone the repo, which should work fine.

Live Demo: https://dndiaries.netlify.com/faerun Repo: https://gitlab.com/heartofcode/swamptrek

No error messages, but the "center" is off-center of the rendered map

Upvotes: 0

Views: 243

Answers (1)

Kristen Stilson
Kristen Stilson

Reputation: 79

Your map is set to be 100% width and height of the browser window. You are calling tiles that don't exist because it is trying to tile the entire map and trying to grab the tiles you have removed. Try setting an extent on the layer, not the map to not call the ones outside of where you want. You also can't center something, the map, that takes up the entire amount of space. The tiles are being placed where they are supposed to go, you can adjust the map height and width to fit them and then center it. Or on 'change:resolution' change the map div size not the extent, you can also update the zoom level to make sure the map has no white space when changing sizes. You can also turn off (set to false) interactions and controls, like dragPan and zoom, if you don't want users panning around.

Upvotes: 0

Related Questions