Flat gameworld map with existing coord system

[Fredrik Krokstad]

Hi all

So, I've been struggling a lot trying to make this library do what I want. Please bear in mind that I'm new to the world of maps. I am trying to make an gamemap that is interaction-wise just like the one you can find here:

http://wiki.game-master.net/map/ (this one uses an OpenLayers-implementation, which I find to be way overkill for my application).

There is a simple xy-pair coordinate system already in the game, and I need my map to accurately represent that system. The point at which x and y are both 0, is at the northwestern-most point of the map. The coordinates for the southeastern-most tip of the map is x=5120, y=4096, so the ratio between map coordinates and pixels is 1:1.

I use the zoomify-plugin (https://github.com/turban/Leaflet.Zoomify) to create a tilelayer. For my tiles I simply export a .tiff-image of the gameworld (5120px wide, 4096px high) from Photoshop using the built-in Zoomify-support. The map renders just fine on the page, but I cannot for the life of me get the coordinates to match whats expected. I need accurate coordinates since I plan on populating the map with a lot of markers using in-game coordinate references.

I found that I had to use something called CRS.Simple, which support non-lat-lng worlds.

$(function(){

var map = L.map('map', {

crs: L.CRS.Simple,

}).setView([0, 0], 0);

L.tileLayer.zoomify('path/to/tiles/', {width: 5120, height: 4096}).addTo(map);

});

Now, how do I tell Leaflet that the northwest corner has coordinates [0,0] and, conversely, that the southeast corner is [5120,4096]?

If i try to add a marker to the map this way, for instance:

// Desired coordinates for my marker

var x = 20;

var y = 20;

// Make a new L.Point with the x and y values

var point  = new L.Point(x, y);

// Convert the point to a LatLng

var latlng = L.CRS.Simple.pointToLatLng(point);

L.Marker(latlng).addTo(map);

One would expect that the marker would end up 20px from the top, and 20px from the left, but it doesn't. It's as if the marker was placed with lat and lng values. Additionally, when i zoom the map, the y coordinate is way off, so it appears that the marker actually moves quite a distance between different zoom levels.

Please, can anyone assist me? It would be much appreciated!

Thanks!

[Lindsay Cunningham]

Tiles, bro.I do not know why you would need Zoomify. Find a program to turn your images into nice blocks which you probably already have done. Create your map with a simple CRS.

var map = new L.map('map', {
                center: [-128, 128],
                zoom: 3,
                maxZoom: 5,
                minZoom: 1,
                crs: L.CRS.Simple
            });

Then create your layer.

var tileUrl = 'tiles/{z}_{x}_{y}.jpg';

L.tileLayer(tileUrl, {
        continuousWorld: false,
        noWrap: true,
        errorTileUrl: "GPS/404.png"
    }).addTo(window.map);

All you need to do now is set your tile size in the layer options and you are set. You can create a custom project with the coords you have requested, but it is so much easier to just convert the ones you have there by using a spreadsheet program. Because you will probably ask anyway, here is the formula for lat=((y/(4096/256)))*-1 and lng = ((x/(5120/256))-256)*-1. A simple transpose in a spreadsheet program with those formula and you will have your XML all ready for your markers.

[Lindsay Cunningham]

Or you could do the mathematics when you create the markers which will save even more time…

[Антон Антонио]

Hi Fredrik

Can you tell how you did it, please? I have been tried 3 weeks do pixel coordinates, but I still don't know how do it :(

I am waiting for your advice, thanks in advance.

P.S. Sorry for my english

воскресенье, 1 сентября 2013 г., 4:15:07 UTC+3 пользователь Fredrik Krokstad написал:

[Fredrik Krokstad]

I'm afraid I never finished my hobby-project map from almost 2 years ago, so I can't really help you, sorry. Did you try the suggestion from PinothyJ?

[Антон Антонио]

No, no, you have done what I want. I just need XY coordinates in map. So I Have image (5913x7863) and I cut it into tiles. And now I just need flat map in XY coordinates (from 0,0 to 5913x7863). How you did it?
(In you example map in coordinates from 0,0 to 5120,4096)

пятница, 3 июля 2015 г., 0:34:41 UTC+3 пользователь Fredrik Krokstad написал:

[Fredrik Krokstad]

I didn't make the map that I link to in my original post. That map uses an altogether different map API (it says so in my original post, too). So again, I can't help you, sorry. Good luck, though.