Render GeoTiff to on browser with leaflet

I have a big GeoTiff Image with following gdalinfo :

Driver: GTiff/GeoTIFF
Files: ImageNew.tif
Size is 8501, 8544
Coordinate System is:
PROJCS["WGS 84 / Pseudo-Mercator",
GEOGCS["WGS 84",
DATUM["WGS_1984",
SPHEROID["WGS 84",6378137,298.257223563,
AUTHORITY["EPSG","7030"]],
AUTHORITY["EPSG","6326"]],
PRIMEM["Greenwich",0,
AUTHORITY["EPSG","8901"]],
UNIT["degree",0.0174532925199433,
AUTHORITY["EPSG","9122"]],
AUTHORITY["EPSG","4326"]],
PROJECTION["Mercator_1SP"],
PARAMETER["central_meridian",0],
PARAMETER["scale_factor",1],
PARAMETER["false_easting",0],
PARAMETER["false_northing",0],
UNIT["metre",1,
AUTHORITY["EPSG","9001"]],
AXIS["X",EAST],
AXIS["Y",NORTH],
EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"],
AUTHORITY["EPSG","3857"]]
Origin = (8267060.670175411738455,3458242.195657447911799)
Pixel Size = (0.583831698389895,-0.583831698389895)
Metadata:
AREA_OR_POINT=Area
Image Structure Metadata:
INTERLEAVE=BAND
Corner Coordinates:
Upper Left ( 8267060.670, 3458242.196) ( 74d15'51.37"E, 29d38'48.83"N)
Lower Left ( 8267060.670, 3453253.938) ( 74d15'51.37"E, 29d36'28.61"N)
Upper Right ( 8272023.823, 3458242.196) ( 74d18'31.88"E, 29d38'48.83"N)
Lower Right ( 8272023.823, 3453253.938) ( 74d18'31.88"E, 29d36'28.61"N)
Center ( 8269542.247, 3455748.067) ( 74d17'11.62"E, 29d37'38.73"N)
Band 1 Block=8501x1 Type=Byte, ColorInterp=Palette


What I wanted to do is render the image on browser and get actual lat long coordinates (As how google map points)

I used following library to convert the image to tiles :
https://github.com/commenthol/gdal2tiles-leaflet

And https://github.com/commenthol/leaflet-rastercoords

to render the mosaic on web browser.

All seems to work fine. But when I click it return wrong lat lng coordinates compared to actual google latlong and rendered image latlng.

Am I going wrong somewhere ?

var rc = new L.RasterCoords(map, img);

1 Answer
1

Using gdal2tiles leaflet I am rendering raster image GeoTiff image on browser. https://github.com/commenthol/gdal2tiles-leaflet

What I am doing to convert from projected map to get actual coordinates (lat,lng)

// GeoTransform data

var xoff = 424562.64403639885,
a = 0.5064676564009486,
b = 0,
yoff = 3285265.740653501,
d = 0,
e = -0.5064676564009355;


var X_proj = a * coords.x + b * coords.y + xoff
var Y_proj = d * coords.x + e * coords.y + yoff


Where coords.x and coords.y is ( {x: 15336, y: 14088} ) pixel point of browser map. Returned from click event as from example : https://commenthol.github.io/leaflet-rastercoords/.

Then Converting raster points (X_proj and Y_proj) using proj4js to get lat,lng

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.