3

I am trying to show my own custom tiles and I am having trouble with the display of the tiles and their sizing.

The Entire game map is corresponding to x16384,y16384
Which I confirmed with the imgaeOverlay, displaying the entire map from one image of 1024px/1024px which shows the entire map while dropping a tree to the correct coordinates.

But the resolution is terrible so I am trying to display it with tiles

enter image description here

But the tiles are displayed way too small. The first layer L7(zoom0) which is only one image is shown as one tiny image(tile) while zoom level 1(L6) is showing the 4 images of this level a bit closer.

Presumable cause it's showing 1/16 and 4/16 of a grid?
The tree is also way out of bounds with the tilelayer.
The count of my map source files(game files) goes up each zoom level (L7-L1) x*4 (1,4,16,64....)

Question: How can I change the grid pattern? So that the one image of zoom 0 and the 4 images of zoom level 1 both correspond to y16384 x16384 while taking 100isch% of my map div?

I had to change the map names from how you see them I'm above the image into the following folder/naming structure, maybe this is part of the issue?

  • map/{1}/{0}/{0}.png
  • map/{1}/{0}/{1}.png
  • map/{1}/{1}/{0}.png
  • map/{1}/{1}/{1}.png
<script>
    var map = L.map('map', {
        crs: L.CRS.Simple,
        minZoom: 0,
        maxZoom: 7,
        tileSize: 1024,
        });
        
    var bounds = [[0,0], [16384,16384]];
    //var image = L.imageOverlay('map/source/MAP_L7_y000_x000.png', bounds).addTo(map);
    L.tileLayer('map/{z}/{y}/{x}.png').addTo(map);
    map.fitBounds(bounds);
    map.setView( [000, 000], 0);
    
    //test marker
    var tree = L.latLng([ 6231.0166015625, 10161.369140625 ]);
    L.marker(tree).addTo(map);
</script>
6

First, there is a mistake in setting tileSize option in map definition. It should be set in tile layer creation.

Second, since tiled layer is different in nature than image layer, it requires different approach. It's coordinates range (bounds) is [[0, 0], [tileSize, tileSize]]. If you want to use your range of [[0, 0], [16384, 16384]], you have to use a transformed simple CRS, where every coordinate is multiplied by tileSize / 16384.

Code could then look something like this:

var tileSize = 1024;
var imageSize = 16384;
var factor = tileSize / imageSize;

L.CRS.myCRS = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(factor, 0, factor, 0)
});

var map = L.map('map', {
  crs: L.CRS.myCRS,
  minZoom: 0,
  maxZoom: 7,
});
    
L.tileLayer('map/{z}/{y}/{x}.png', {
  tileSize: tileSize,
}).addTo(map);

var bounds = [[0,0], [imageSize, imageSize]];
map.fitBounds(bounds);

map.setView([imageSize / 2, imageSize / 2], 0);

var tree = L.latLng([6231.0166015625, 10161.369140625]);
L.marker(tree).addTo(map);

Coordinate order for Leaflet functions/methods in L.CRS.Simple projection is [y, x]. Origin [0, 0] is in upper left corner, y goes from top to bottom, x goes from left to right.

If you want to have origin [0, 0] at lower left corner and y going from bottom to top, CRS transform has to be a little different (see https://leafletjs.com/reference-1.7.1.html#transformation):

L.CRS.myCRS = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(factor, 0, -factor, tileSize)
});
10
  • This is definitely more like I was expecting it. Though the test tree is at a completely different position now compared to when using imageOverlay. I changed L.Transformation(factor, 1, factor, 246) so it is very close to where it is supposed to be. But I assume the factor is wrong somehow. When I open the 1024px image the tree should be at pixel 634/634
    – veritaS
    May 16 at 14:15
  • Without having access to your tiles it's hard to say why it's not working for you as expected. See working JSFiddle here: jsfiddle.net/TomazicM/rfgoe6m3
    – TomazicM
    May 16 at 15:32
  • I found the issue, the Y-axis is inverted compared to imageoverlay and source, which is why the test marker is placed correctly there but wrong on L.CRS.myCRS
    – veritaS
    May 17 at 19:16
  • If answer helped you solve your problem, it's customary on GIS SE site to mark it as accepted, to let other users with similar problems know that problem was resolved.
    – TomazicM
    May 17 at 19:42
  • It's not solved, I know what the issue is, still testing mate
    – veritaS
    May 17 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.