I am working with the leaflet api.

I am trying to figure out how to change or set the latlng start point in leaflet map.

Currently i am working on use image as map,,,,the latlng(0,0) is at the top left of the image or container of that image...

If its possible that i change it to left-bottom

Snapshot of map :

enter image description here

If its possible to change the position of origin (0,0) from top-left to bottom-left,,,,

  • 1
    I am doing the same thing! Trying to render large floorplans using leaflet! Did you have any success with this? – Prime By Design Oct 22 '16 at 11:37

First, read the source code for L.CRS.Simple, particularly, this line:

transformation: toTransformation(1, 0, -1, 0),

That is a factory method to instantiate an affine transformation from L.Transformation. Reading the documentation you can note that a L.Transformation(a, b, c, d) corresponds to the transformation with the affine matrix:

a  0  b
0  c  d
0  0  1

So the L.Transformation(1, 0, -1, 0) from L.CRS.Simple corresponds to

1  0  0
0 -1  0
0  0  1

And by now you should be thinking "Hey, why does Leaflet invert the Y coordinate in L.CRS.Simple?" The answer is that screen pixel coordinates go down and right while coordinates in a cartesian coordinate system go up and right.

You should also note that planar coordinate systems are infinite in both the horizontal and vertical directions. That means that (0, 0) is not in a corner of the coordinate system, because... the coordinate system does not have corners.

Also note that there is no requirement that the (0, 0) coordinate corresponds to a corner of the image. You should define what are the semantics of your origin of coordinates. Do you want coordinates relative to a corner of the image, to the center (or centroid) of the building, to a nearby landmark, relative to another geographic CRS?

Also, what are the units of your CRS? Is 1 unit = 1 pixel in the image? 1 unit = 1 meter? 1 unit = 1 centimeter? 1 unit = 1 feet? 1 unit = 1 yard?

Now, assuming that you want to use a cartesian coordiante system, assign the (0, 0) coordinate to the bottom left of your image, and ensure that all pixels have positive (larger than zero) coordinates, then you don't need to do anything. (Just pay more attention to the semantics of your CRS).

Assuming that you want to use a cartesian coordinate system, assign the (0, 0) coordinate to the top left of your image, and ensure that all pixels have positive coordinates, then use a custom CRS inverting the Y axis relative to L.CRS. This can be achieved by defining such a CRS as L.CRS.Simple.extend({ transformation: L.transformation(1, 0, 1, 0) }) (as per the Leaflet documentation on extending classes).

In any case, I suggest you pay more attention to the semantics of your coordinate system.

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.