CODEWITHSUNDEEP
leaflet
kundan suthar
kundan suthar

Reputation: 69

Change x-y cordinate starting position in leaflet.js custom maps

How to change the x-y axis starting point from bottom left corner to top left corner in leaflet.js custom maps?By default it is at bottom left corner..

Upvotes: 2

Views: 3622

Answers (1)

user2441511
user2441511

Reputation: 11116

For a standard map, the top left corner is the origin, as is explained here in the Leaflet tutorials:

When the L.Map is ready (has a center LatLng and a zoom level), the absolute pixel coordinates of the top-left corner become the “pixel origin” enter image description here

EDIT: As OP pointed out, L.CRS.Simple has the origin in the bottom left corner.

A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps). Note that the y axis should still be inverted (going from bottom to top).

To change this behavior, edit the leaflet-src.js document (or the minified version) to change the transformation:

L.CRS.Simple = L.extend({}, L.CRS, {
  projection: L.Projection.LonLat,
  transformation: new L.Transformation(1, 0, 1, 0), // this line is changed!!
  ... // more leaflet variables
}

Here's a screen shot of crs-simple-example2.html (from the official tutorial examples) implemented with the old (left) and new (right) coordinate transformations.

enter image description here

Upvotes: 2

Related Questions