I'm currently data mining a game, and I pulled out the in-game map files (and converted to png). The images are 1024x1024 (pixels). I am currently in the process of learning Leaflet (and gis in general), and having issues with a coord displaying incorrectly on the map. The game has an origin of 0,0 at the bottom left of the map, and the map is in the top right quadrant (x & y are positive). The tiles in the game are built by going left to right, bottom to top. I understand that Leaflet likes the top left to be where it starts labeling the tiles. My issue is that I create a marker using map.getCenter(), and for zoom levels 1-2 it's great. The center is the center. But once I go to level 3 zoom, the entire map shifts up by one block, and the marker I setup for center moves down exactly one tile (as does the 0,0 marker I set for reference).

visual issue.  top is zoom level 2, bottom is zoom level 3

Here is my code depicting this.

let imageSize = 1024;
        let tileSize = 256;
        let factor = tileSize/imageSize;

        let bounds = [[0,0],[tileSize/2,tileSize/2]]

        let newCRS = L.extend({}, L.CRS.Simple, {
            transformation: new L.transformation(factor, 0, factor, 0),
            infinite: false

        let map1 = L.map('map1',{
                        crs: newCRS,
                        center: [0,0],
                        scrollWheelZoom: true,
                        //zoomSnap: 0,
                        //zoomDelta: 0.25,
                        maxBounds: bounds,
                        wheelPxPerZoomLevel: 180,
                        zoom: 1
        let baseLayer = L.tileLayer('maps\\map_l{z}_y{-y}_x{x}.png', {
                                        maxZoom: 7,
                                        minZoom: 1,
                                        tileSize: tileSize*factor,
                                        continuousWorld: false,
                                        noWrap: true,
                                        tms: true
        map1.on('click', clickZoom);

The updated and more "correct" way...which makes more sense for me...but which doesn't actually work...

let imageSize = 16384;
        let tileSize = 1024;
        let factor = tileSize/imageSize;
        let bounds = [[0,0],[imageSize,imageSize]]
        let newCRS = L.extend({}, L.CRS.Simple, {
            transformation: new L.transformation(factor, 0, -factor, tileSize),
            infinite: false
        let map = L.map('map1',{
                        crs: newCRS,
                        minZoom: 0,
                        maxZoom: 7
                       }).setView([imageSize/2, imageSize/2], 0);
        let baseLayer = L.tileLayer('maps\\map_l{z}_y{-y}_x{x}.png', {
                                        tileSize: tileSize,
                                        minZoom: 0,
                                        maxZoom: 7,
                                        noWrap: true,
                                        errorTileUrl: 'maps\\map_l3_y3_x3.png', //This is a transparent .png
        map.on('click', clickZoom);

        function clickZoom(e){
  • Ah, the map for the New World MMO. You should double-check your tile-splitting logic, specifically whether zoom level 2 means 3 tiles (1+zoom level) or 4 tiles (2^zoom level, which is what Leaflet expects) Aug 29 at 15:37
  • BTW do compare your tiles against the ones from newworld-map.com - something like L.TileLayer('https://newworld-map.fra1.cdn.digitaloceanspaces.com/{z}/{x}/{y}.png') works out of the box (demo). Aug 29 at 15:44
  • A lot of this is due to my ignorance. This is my first venture into the awesome world of GIS, and the 2^n split makes total sense with what I've read. 1->2^2->2^3...etc...and I figured there was a good chance it was just due to improper alignment (for working with that 2^n expectation, not with their mapping framework). Aug 29 at 17:51
  • Now, as for the map url...mother@*#$&^!!!!! lol, would have saved me issues...but...I learned a lot...AND I can automatically pull and rename my own map system directly from the game .pak files...I got all that setup...and I wouldn't have had to learn about inverting the y axis for the tilelayer, and a whole bunch of other gotchas...so...I am stronger Aug 29 at 17:54
  • I had issues trying it another way...and it made more sense doing it the other way, but didn't display the map image (though the markers I setup looked great). I will update my post to display the other way I've done it...which makes sense...but doesn't display the map tileLayer at all... Aug 29 at 18:00

Your Answer

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

Browse other questions tagged or ask your own question.