Render GeoTiff to on browser with leaflet

Question

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 ?

What I found was the coordinates which we get are from browser pixel. Made use proj4js. — Prajyot Khandeparkar
What is the javascript code that you're using to get the coordinates on click? — IvanSanchez
[github.com/commenthol/leaflet-rastercoords] // assign map and image dimensions var rc = new L.RasterCoords(map, img); // set markers on click events in the map ` map.on('click', function (event) { var coords = rc.project(event.latlng)` — Prajyot Khandeparkar

Prajyot Khandeparkar Prajyot Khandeparkar · Accepted Answer · 2018-06-30T06:32:57

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

Render GeoTiff to on browser with leaflet

1 Answers