Leaflet: Custom Projection Lat/Lon Coordinates?

[Jakobud]

I am experimenting with using Leaflet for a custom map of a fictional video game world. The map is just a simple square map.

Is it possible to customize the Lat/Lon coordinate system that is used in a map? Because my map is not based on a spherical planetary body, traditional Lat/Long coordinates aren't really a good fit for it.

This is an example of what I'd be looking for:

I have a square map. The Lat/Lng coordinate at the top/left of the map is 0,0. The Lat/Lng coordinate at the bottom right corner is 1000,1000. If I played a marker at [500,500], the marker would be placed directly in the center of the map.

Is it possible to do this? With the Google Maps API I've been able to do this, but I'm new to Leaflet and it's not clear to me how to accomplish this so far...

[mourner]

Use L.CRS.Simple for map crs option. In this projection, lat and lon values basically correspond to pixels, the only caveat being that lat would still go from bottom to top.

[Jakobud]

Thank you, I will investigate that! What does CRS stand for?

[mourner]

Coordinate Reference System.

[joaomcarlos]

Hello.

I have a 5501x3270 pixel custom drawn map, all tiled up perfectly and working correctly with the following code:

window.map = L.map('worldmap', {
        maxZoom: 17,
        minZoom: 14,
        crs: L.CRS.Simple
    }).setView([0, 0], 14);
    var southWest = map.unproject([0, 3270], map.getMaxZoom());
    var northEast = map.unproject([5501, 0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
    L.tileLayer('/styles/images/worldmap_tiles/{z}/world_{x}_{y}.png', {
    }).addTo(map);

I added a mouse click event handler that console.logs the mouse click lat and long, however, when clicking on the middle of the map, instead of getting something like x: 5501/2 y: 3270/2, I get wierd values like :

o.LatLng {lat: -0.01068115234375, lng: 0.02032470703125}
o.LatLng {lat: -0.0137939453125, lng: 0.01934814453125}
o.LatLng {lat: -0.0113525390625, lng: 0.0213623046875}

If what @mourner said still holds, why would I get this coordinates?
All my markers are wayyy outside the browser window.

[joaomcarlos]

After much searching, it turns I misunderstood crs: L.CRS.Simple, you still have to project/unproject your coordinates into the map, my own code had it because I copied it from a tutorial however I thought it was part of boilerplate code for setting up the map and then all other coordinates would simply stick to those ranges, but thats not the case.

Each "map-space" coordinate needs to be projected into "pixel-space" of your image to get latLng->pixels, and unprojected to get pixels->latLng, this operations need to be done at the maxZoom level of your map, so you get the "pixel-space" of your original image, the following functions will be of use to anyone searching for a solution to this problem (I assume window.map is your L.map() instance :

window.latLngToPixels = function(latlng){
    return window.map.project([latlng.lat,latlng.lng], window.map.getMaxZoom());
};
window.pixelsToLatLng = function(x,y){
    return window.map.unproject([x,y], window.map.getMaxZoom());
};