CODEWITHSUNDEEP
javascriptleaflet
Mita
Mita

Reputation: 1

How to plot pixel co-ordinates in leaflet map with axis origin at bottom left

I am new to leaflet and I need to plot markers based on pixel values on an image in a leaflet map, by considering axis origin as the bottom left corner. How do I achieve this?

I have set an image Overlay to plot an image.Also set bounds to the map. I can plot markers too. I used the map.unproject() method to project pixel values onto the image. I am using CRS.Simple as the coordinate reference system.

   var map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -3,
    center: [0,-500],
    zoom: 2,
    maxZoom: 8
});

//height = 500 width = 900  
var southWest = map.unproject([0,500], map.getMaxZoom());
    var northEast = map.unproject([900,0], map.getMaxZoom());

var bounds = L.latLngBounds(southWest, northEast);
var image = L.imageOverlay('MyImage.bmp', bounds).addTo(map);

map.setMaxBounds(bounds);

var m1 = map.unproject([0,0], map.getMaxZoom());
var m2 = map.unproject([300,500], map.getMaxZoom())
var m3 = map.unproject([900,400], map.getMaxZoom())
var m4 = map.unproject([900,500], map.getMaxZoom())

L.marker(m1).addTo(map).bindPopup('m1');
L.marker(m2).addTo(map).bindPopup('m2');
L.marker(m3).addTo(map).bindPopup('m3');
L.marker(m4).addTo(map).bindPopup('m4');

Currently the marker for pixel co-ordinate [0,0] appears on the top left of the image. I have the coordinate values based on origin at bottom left.I was expecting the marker [0,0] to be at bottom left.

Upvotes: 0

Views: 912

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

I used the map.unproject() method to project pixel values onto the image.

You don't need to do that. Screen coordinates are top-left-based, whereas L.CRS.Simple are bottom-left-based.

I encourage you to re-read the Leaflet tutorial on L.CRS.Simple.

Upvotes: 1

Related Questions