Add thumbnail-on-map example (warping)

ddohler · Dec 26, 2017 · 5c14e40 · 5c14e40
1 parent 59a6d59
commit 5c14e40
Show file tree

Hide file tree

Showing 10 changed files with 554 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
+gdal.js
 *.swp
 *.mem
diff --git a/Makefile b/Makefile
@@ -8,21 +8,34 @@ GDAL_EMCC_CFLAGS := -msse -Oz
 PROJ_EMCC_CFLAGS := -msse -Oz
 EXPORTED_FUNCTIONS = "[\
   '_CSLCount',\
+  '_GDALSetCacheMax',\
   '_GDALAllRegister',\
   '_GDALOpen',\
   '_GDALClose',\
+  '_GDALGetDriverByName',\
+  '_GDALCreate',\
+  '_GDALCreateCopy',\
   '_GDALGetRasterXSize',\
   '_GDALGetRasterYSize',\
   '_GDALGetRasterCount',\
+  '_GDALGetRasterDataType',\
+  '_GDALGetRasterBand',\
   '_GDALGetProjectionRef',\
+  '_GDALSetProjection',\
   '_GDALGetGeoTransform',\
+  '_GDALSetGeoTransform',\
   '_OSRNewSpatialReference',\
   '_OSRImportFromEPSG',\
   '_OCTNewCoordinateTransformation',\
   '_OCTTransform',\
+  '_GDALCreateGenImgProjTransformer',\
+  '_GDALGenImgProjTransform',\
+  '_GDALDestroyGenImgProjTransformer',\
+  '_GDALSuggestedWarpOutput',\
   '_GDALTranslate',\
   '_GDALTranslateOptionsNew',\
-  '_GDALTranslateOptionsFree'\
+  '_GDALTranslateOptionsFree',\
+  '_GDALReprojectImage'\
 ]"
 
 export EMCONFIGURE_JS
@@ -40,6 +53,7 @@ gdal.js: $(GDAL)/libgdal.a
 	EMCC_CFLAGS="$(GDAL_EMCC_CFLAGS)" $(EMCC) $(GDAL)/libgdal.a $(PROJ4)/src/.libs/libproj.a -o gdal.js \
 		-s EXPORTED_FUNCTIONS=$(EXPORTED_FUNCTIONS) \
 		-s TOTAL_MEMORY=256MB \
+		-s RESERVED_FUNCTION_POINTERS=1 \
 		--preload-file $(GDAL)/data/pcs.csv@/usr/local/share/gdal/pcs.csv \
 		--preload-file $(GDAL)/data/gcs.csv@/usr/local/share/gdal/gcs.csv \
 		--preload-file $(GDAL)/data/gcs.override.csv@/usr/local/share/gdal/gcs.override.csv \

diff --git a/examples/inspect_geotiff/worker.js b/examples/inspect_geotiff/worker.js
@@ -128,4 +128,4 @@ onmessage = function(msg) {
         return;
     }
     inspectTiff(msg.data);
-}
+};
diff --git a/examples/map_extent/worker.js b/examples/map_extent/worker.js
@@ -68,7 +68,7 @@ var Module = {
             'OCTTransform',
             'number',
             ['number', 'number', 'number', 'number', 'number']
-        )
+        );
 
         // Create a "directory" where user-selected files will be placed
         FS.mkdir(TIFFPATH);
@@ -181,4 +181,4 @@ onmessage = function(msg) {
         return;
     }
     inspectTiff(msg.data);
-}
+};
diff --git a/examples/thumbnail/worker.js b/examples/thumbnail/worker.js
@@ -43,7 +43,7 @@ var Module = {
         // Returns a pointer to a new GDAL Dataset
         GDALTranslate = Module.cwrap('GDALTranslate', 'number', ['string', 'number', 'number', 'number']);
         // Params: array of option strings as to gdal_translate; pointer to a struct that should be null.
-        GDALTranslateOptionsNew = Module.cwrap('GDALTranslateOptionsNew', 'number' ['number', 'number']);
+        GDALTranslateOptionsNew = Module.cwrap('GDALTranslateOptionsNew', 'number', ['number', 'number']);
         GDALTranslateOptionsFree = Module.cwrap('GDALTranslateOptionsFree', 'number', ['number']);
 
         CSLCount = Module.cwrap('CSLCount', 'number', ['number']);
@@ -148,4 +148,4 @@ onmessage = function(msg) {
         return;
     }
     translateTiff(msg.data);
-}
+};
diff --git a/examples/thumbnail_map/README b/examples/thumbnail_map/README
@@ -0,0 +1,13 @@
+This shows an example of how to use the GDAL API from within a web browser to
+generate a thumbnail from a GeoTIFF using GDALTranslate and then display it on
+a Leaflet map.
+
+To use, first make sure that `gdal.js`, `gdal.js.mem`, and `gdal.data` are
+available in this directory. There are some symlinks provided that will do this
+automatically if you build the project from source. Alternatively, you can
+[download a release](https://github.com/ddohler/gdal-js/releases) and place the
+files in this directory manually.
+
+Next, start up an HTTP server to serve this folder. For example, `python -m
+SimpleHTTPServer`. Navigate to whatever port your server is listening at, and
+follow the instructions on the page.
diff --git a/examples/thumbnail_map/gdal.data b/examples/thumbnail_map/gdal.data
@@ -0,0 +1 @@
+../../gdal.data
diff --git a/examples/thumbnail_map/index.html b/examples/thumbnail_map/index.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+    crossorigin=""/>
+  <title>Test GDAL.js</title>
+</head>
+<body>
+<input type="file" id="geotiff-select">
+<button onclick="makeThumbnail()">Thumbnail</button>
+<p>Select a GeoTIFF using the Browse... button.
+Click on the "Thumbnail" button and a thumbnail of the image will be
+displayed on the map below.</p>
+
+<div id="leaflet" style="height: 600px"></div>
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+  integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+  crossorigin=""></script>
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/examples/thumbnail_map/index.js b/examples/thumbnail_map/index.js
@@ -0,0 +1,38 @@
+var thumbnailer = new Worker('worker.js');
+
+var map = L.map('leaflet').setView([0,0],3);
+
+L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 18,
+}).addTo(map);
+
+var overlay = null;
+
+function makeThumbnail() {
+    var files = document.querySelector('#geotiff-select').files;
+    thumbnailer.postMessage(files);
+}
+
+thumbnailer.onmessage = function(evt) {
+    displayMapImage(evt.data);
+};
+
+function displayMapImage(data) {
+    if (overlay !== null) {
+        overlay.remove();
+    }
+    var imageBytes = data.bytes;
+    var coords = data.coords;
+    var outputBlob = new Blob([imageBytes], { type: 'image/png' });
+    var imageURL = window.URL.createObjectURL(outputBlob);
+    var lats = Array.from(coords[1]);
+    var lngs = Array.from(coords[0]);
+
+    // Zip
+    var latLngs = lats.map(function(lat, i, arr) {
+        return new Array(lat, lngs[i]);
+    });
+    overlay = L.imageOverlay(imageURL, latLngs).addTo(map);
+    map.fitBounds(overlay.getBounds());
+}
-Original file line number
+Diff line change
@@ -1,2 +1,3 @@
+    gdal.js
     *.swp
     *.mem