Leafletjs Custom Coord

user_14123182 0
Viewed 109

I'm trying to get a leaflet set up for a service I'm creating, but I can't seem to get the alignment set up correctly. The marker on the bottom is at the correct location, however, the top, and far-right marker are not in their correct positions, as noted with the X's on the map: https://imgur.com/a/32bIjwi

This is the image I'm currently using, apologies, it's massive at the moment: https://drive.google.com/file/d/1jwkaJ2RWhB6QnUjKCIaJ2Ex0Hc7JE45p/view

This is my current code:

var bottomLeft = [-4533, -3681];
var topRight = [7467, 4319];

var factor = 1 / 16;

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

GTAMap = L.map('map-canvas', {
  crs: myCRS,
  minZoom: -4
});

var image = L.imageOverlay('images/tiles/postal/rawGTAMap1.png', bounds).addTo(GTAMap);

GTAMap.fitBounds(bounds);

I believe my problem is I have the bounds set incorrectly. I have no clue how to do it, but I believe you have to use the bounds to tell leaflet where you want 0, 0 to be centered, which I've done using gimp.

leaflet javascript
1 Answers

I think the problem is that you are working with pixel coordinates but leaflet still thinks you're using geographical coordinates. Try adding this at the beginning of your file:

var yx = L.latLng;
var xy = function(x, y) {
  if (L.Util.isArray(x)) { // When doing xy([x, y]);
    return yx(x[1], x[0]);
  }
  return yx(y, x); // When doing xy(x, y);
};

And then define you're bounds like this:

var bounds = [xy(0, 0), xy(max x value, max y value)];

Alternativly, you might want to have a look here.

user_116756090
Related