How to use a .tpk or GeoTiff file as a Google Maps Overlay

Question

I am building a webapp using Google Maps, and want to have an image overlaid on top of the usual Map that represents Light Pollution data.
I don't have ArcGIS myself, but I was able to download a 400 MB .tpk file with the image data I need from the website for the authors of the paper that released the dataset. It also includes a 3 GB GeoTiff file.
I've done a bit of research on how to use .tpk, The ArcMap docs show they are compatible in some manner.
This site has a similar question, but it is 8 years old. One of the linked sources in the answer no longer exists, and it would appear that the ArcGIS JS GoogleMaps API does not support the current versions of Google Maps API, so perhaps that is a non-starter.
But that might not really be relevant to the solution I am looking for. I don't know yet.
Given that I have a .tpk file, a geotiff file, and a working webapp using Google Maps created using the React JS Framework, how do I integrate the data into an overlay on Google Maps? This might mean converting it to another format, but as long as it works and maintains high resolution.
The end result would look something like this app (not mine), but with a much more recent dataset and the ability to find the value associated with any lat lng:

omega_cancer · Answer

The question seems to be asked earlier here https://stackoverflow.com/questions/45167863/how-to-load-an-geotiff-image-over-google-map, https://stackoverflow.com/questions/19492967/georeference-tiff-image-into-the-google-map and https://stackoverflow.com/questions/44493354/overlaying-a-rasterfile-tiff-into-google-map here.
Google docs reveal that you can overlay images like this: https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
400 MB tpk in browser is a bit heavy solution for browser. You need a server to serve you clips of data as needed to reduce the load on browser. So your options are:
1 . If you have ArcGIS or GeoServer Running -- TPK and GeoTIFF--
Simply open your tiff or tpk in ArcMap, publish it on your server and add it in your application as overlay. Working code can be found here. Overlaying ArcGIS REST API on Google Maps?
2. Use Google Earth or QGIS -- TPK and GeoTIFF--
Open your image in Google Earth export it as KMZ, XYZ tiles in QGIS and consume it in your application. A good discussion is posted here. https://forum.dronedeploy.com/t/combining-geotiff-w-google-map/14015
3. If you know some JavaScript and want to get your hands dirty -- TPK only--
ArcGIS API for javascript implementation to read tpk files is done here http://esri.github.io/offline-editor-js/samples/tpk-layer.html in repo https://github.com/Esri/offline-editor-js
If you can modify it to suite your needs in Google Maps.
4. If you want a small server  -- TPK and GeoTIFF--
Export XYZ tiles and host as an XYZ tile service using mbtileserver https://github.com/consbio/mbtileserver
5. More JavaScript --GeoTIFF Only--
This repo https://geotiffjs.github.io/ seems promising and loads more than 500MB geotif file. You can modify it to suit your needs.
It loads LANDSAT-8 images in sample.
Have a look at http://geotiff.io/ also.
Things to keep in mind

If you opt for option 3, it does not use a server and is good for tpks under 20 MB.
Option 3 and 5 do not require a server.

Hope it helped.

How to use a .tpk or GeoTiff file as a Google Maps Overlay

One Answer

Add your own answers!

Ask a Question