Search code examples
javascriptphpleaflet

Problem on creating webmap for a online game


I am trying to create a webmap for my game based on OpenSimulator.

All images are present on one position (ex: https://example.com/map-1-1000-1000-objects.jpg).

Now I am trying to display these Images on my worldmap. I can implement leaflet without any problems. I think my problem is the conversion of latlng because the coordinates of my world are without any decimals (like the example above).

1000x1000 means X x Y. The first type after the "/map-" is the zoom (by default only 1). So the entire URL is: /map-(Z)-(X)-(Y)-objects.jpg.

How can i display these tiles with leaflet?


Solution

  • The issue is that your tiles naming scheme directly includes your "coordinates"; therefore they do not follow the quad tree naming convention that Leaflet default Tile Layer assumes.

    You can easily adapt Leaflet Tile Layer to your need by overriding the [getTileUrl](https://github.com/Leaflet/Leaflet/blob/v1.5.1/src/layer/tile/TileLayer.js#L163-L186] method.

    In your developer console you will see the URL of requests that Leaflet makes, so you adjust your implementation of getTileUrl more easily.