Representing GeoTIFF values with D3js

.block

license: mit

README.md

This example shows how to represent a GeoTIFF raster directly into a Canvas object.

Here you have a question about how to set pixels: http://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas the way used in the example draws all the pixels at once, since is much more efficient.

Note that using the Math.round function, the example will work if the original GeoTIFF has more pixels than the output image. Also, drawing small rectangles would be less efficient.

The color scales from D3js aren't used, since the performance is very poor. It's still a problem, since the ColorBrewer scales are much better than this, but difficult to calculate.

geotiff.min.js

!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";function d(){}d.prototype={isAsync:function(){return"undefined"==typeof this.decodeBlock}},b.exports=d},{}],2:[function(a,b,c){"use strict";function d(){}var e=a("../abstractdecoder.js");d.prototype=Object.create(e.prototype),d.prototype.constructor=d,d.prototype.decodeBlockAsync=function(a,b){throw new Error("DeflateDecoder is not yet implemented.")},b.exports=d},{"../abstractdecoder.js":1}],3:[function(a,b,c){"use strict";function d(){}var e=a("../abstractdecoder.js");d.prototype=Object.create(e.prototype),d.prototype.constructor=d,d.prototype.decodeBlock=function(a){throw new Error("LZWDecoder is not yet implemented")},b.exports=d},{"../abstractdecoder.js":1}],4:[function(a,b,c){"use strict";function d(){}var e=a("../abstractdecoder.js");d.prototype=Object.create(e.prototype),d.prototype.constructor=d,d.prototype.decodeBlock=function(a){var b,c,d=new DataView(a),e=[];for(b=0;b<a.byteLength;++b){var f=d.getInt8(b);if(0>f){var g=d.getUint8(b+1);for(f=-f,c=0;f>=c;++c)e.push(g);b+=1}else{for(c=0;f>=c;++c)e.push(d.getUint8(b+c+1));b+=f+1}}return new Uint8Array(e).buffer},b.exports=d},{"../abstractdecoder.js":1}],5:[function(a,b,c){"use strict";function d(){}var e=a("../abstractdecoder.js");d.prototype=Object.create(e.prototype),d.prototype.constructor=d,d.prototype.decodeBlock=function(a){return a},b.exports=d},{"../abstractdecoder.js":1}],6:[function(a,b,c){"use strict";function d(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var e=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),f=function(){function a(b){d(this,a),this._dataView=new DataView(b)}return e(a,[{key:"getUint64",value:function(a,b){var c=this.getUint32(a,b),d=this.getUint32(a+4,b);return b?c<<32|d:d<<32|c}},{key:"getInt64",value:function(a,b){var c,d;return b?(c=this.getInt32(a,b),d=this.getUint32(a+4,b),c<<32|d):(c=this.getUint32(a,b),d=this.getInt32(a+4,b),d<<32|c)}},{key:"getUint8",value:function(a,b){return this._dataView.getUint8(a,b)}},{key:"getInt8",value:function(a,b){return this._dataView.getInt8(a,b)}},{key:"getUint16",value:function(a,b){return this._dataView.getUint16(a,b)}},{key:"getInt16",value:function(a,b){return this._dataView.getInt16(a,b)}},{key:"getUint32",value:function(a,b){return this._dataView.getUint32(a,b)}},{key:"getInt32",value:function(a,b){return this._dataView.getInt32(a,b)}},{key:"getFloat32",value:function(a,b){return this._dataView.getFloat32(a,b)}},{key:"getFloat64",value:function(a,b){return this._dataView.getFloat64(a,b)}},{key:"buffer",get:function(){return this._dataView.buffer}}]),a}();b.exports=f},{}],7:[function(a,b,c){"use strict";function d(a,b){this.dataView=new g(a),b=b||{},this.cache=b.cache||!1;var c=this.dataView.getUint16(0,0);if(18761===c)this.littleEndian=!0;else{if(19789!==c)throw new TypeError("Invalid byte order value.");this.littleEndian=!1}var d=this.dataView.getUint16(2,this.littleEndian);if(42===this.dataView.getUint16(2,this.littleEndian))this.bigTiff=!1;else{if(43!==d)throw new TypeError("Invalid magic number.");this.bigTiff=!0;var e=this.dataView.getUint16(4,this.littleEndian);if(8!==e)throw new Error("Unsupported offset byte-size.")}this.fileDirectories=this.parseFileDirectories(this.getOffset(this.bigTiff?8:4))}var e=a("./globals.js"),f=a("./geotiffimage.js"),g=a("./dataview64.js"),h=e.fieldTypes,i=e.fieldTagNames,j=e.arrayFields,k=e.geoKeyNames;d.prototype={getOffset:function(a){return this.bigTiff?this.dataView.getUint64(a,this.littleEndian):this.dataView.getUint32(a,this.littleEndian)},getFieldTypeLength:function(a){switch(a){case h.BYTE:case h.ASCII:case h.SBYTE:case h.UNDEFINED:return 1;case h.SHORT:case h.SSHORT:return 2;case h.LONG:case h.SLONG:case h.FLOAT:return 4;case h.RATIONAL:case h.SRATIONAL:case h.DOUBLE:case h.LONG8:case h.SLONG8:case h.IFD8:return 8;default:throw new RangeError("Invalid field type: "+a)}},getValues:function(a,b,c){var d,e=null,f=null,g=this.getFieldTypeLength(a);switch(a){case h.BYTE:case h.ASCII:case h.UNDEFINED:e=new Uint8Array(b),f=this.dataView.getUint8;break;case h.SBYTE:e=new Int8Array(b),f=this.dataView.getInt8;break;case h.SHORT:e=new Uint16Array(b),f=this.dataView.getUint16;break;case h.SSHORT:e=new Int16Array(b),f=this.dataView.getInt16;break;case h.LONG:e=new Uint32Array(b),f=this.dataView.getUint32;break;case h.SLONG:e=new Int32Array(b),f=this.dataView.getInt32;break;case h.LONG8:case h.IFD8:e=new Array(b),f=this.dataView.getUint64;break;case h.SLONG8:e=new Array(b),f=this.dataView.getInt64;break;case h.RATIONAL:e=new Uint32Array(2*b),f=this.dataView.getUint32;break;case h.SRATIONAL:e=new Int32Array(2*b),f=this.dataView.getInt32;break;case h.FLOAT:e=new Float32Array(b),f=this.dataView.getFloat32;break;case h.DOUBLE:e=new Float64Array(b),f=this.dataView.getFloat64;break;default:throw new RangeError("Invalid field type: "+a)}if(a!==h.RATIONAL&&a!==h.SRATIONAL)for(d=0;b>d;++d)e[d]=f.call(this.dataView,c+d*g,this.littleEndian);else for(d=0;2*b>d;d+=2)e[d]=f.call(this.dataView,c+d*g,this.littleEndian),e[d+1]=f.call(this.dataView,c+(d+1)*g,this.littleEndian);return a===h.ASCII?String.fromCharCode.apply(null,e):e},getFieldValues:function(a,b,c,d){var e,f=this.getFieldTypeLength(b);if(f*c<=(this.bigTiff?8:4))e=this.getValues(b,c,d);else{var g=this.getOffset(d);e=this.getValues(b,c,g)}return 1===c&&-1===j.indexOf(a)&&b!==h.RATIONAL&&b!==h.SRATIONAL?e[0]:e},parseGeoKeyDirectory:function(a){var b=a.GeoKeyDirectory;if(!b)return null;for(var c={},d=4;d<4*b[3];d+=4){var e=k[b[d]],f=b[d+1]?i[b[d+1]]:null,g=b[d+2],h=b[d+3],j=null;if(f){if(j=a[f],"undefined"==typeof j||null===j)throw new Error("Could not get value of geoKey '"+e+"'.");"string"==typeof j?j=j.substring(h,h+g-1):j.subarray&&(j=j.subarray(h,h+g-1))}else j=h;c[e]=j}return c},parseFileDirectories:function(a){for(var b=a,c=[];0!==b;){for(var d=this.bigTiff?this.dataView.getUint64(b,this.littleEndian):this.dataView.getUint16(b,this.littleEndian),e={},f=a+(this.bigTiff?8:2),g=0;d>g;f+=this.bigTiff?20:12,++g){var h=this.dataView.getUint16(f,this.littleEndian),j=this.dataView.getUint16(f+2,this.littleEndian),k=this.bigTiff?this.dataView.getUint64(f+4,this.littleEndian):this.dataView.getUint32(f+4,this.littleEndian);e[i[h]]=this.getFieldValues(h,j,k,f+(this.bigTiff?12:8))}c.push([e,this.parseGeoKeyDirectory(e)]),b=this.getOffset(f)}return c},getImage:function(a){a=a||0;var b=this.fileDirectories[a];if(!b)throw new RangeError("Invalid image index");return new f(b[0],b[1],this.dataView,this.littleEndian,this.cache)},getImageCount:function(){return this.fileDirectories.length}},b.exports=d},{"./dataview64.js":6,"./geotiffimage.js":8,"./globals.js":9}],8:[function(a,b,c){"use strict";function d(a,b,c,d,e){this.fileDirectory=a,this.geoKeys=b,this.dataView=c,this.littleEndian=d,this.tiles=e?{}:null,this.isTiled=a.StripOffsets?!1:!0;var j=a.PlanarConfiguration;if(this.planarConfiguration="undefined"==typeof j?1:j,1!==this.planarConfiguration&&2!==this.planarConfiguration)throw new Error("Invalid planar configuration.");switch(this.fileDirectory.Compression){case void 0:case 1:this.decoder=new f;break;case 5:this.decoder=new g;break;case 6:throw new Error("JPEG compression not supported.");case 8:this.decoder=new h;break;case 32773:this.decoder=new i;break;default:throw new Error("Unknown compresseion method identifier: "+this.fileDirectory.Compression)}}var e=a("./globals.js"),f=a("./compression/raw.js"),g=a("./compression/lzw.js"),h=a("./compression/deflate.js"),i=a("./compression/packbits.js"),j=function(a,b,c){for(var d=0,e=b;c>e;++e)d+=a[e];return d},k=function(a,b,c){switch(a){case 1:switch(b){case 8:return new Uint8Array(c);case 16:return new Uint16Array(c);case 32:return new Uint32Array(c)}break;case 2:switch(b){case 8:return new Int8Array(c);case 16:return new Int16Array(c);case 32:return new Int32Array(c)}break;case 3:switch(b){case 32:return new Float32Array(c);case 64:return new Float64Array(c)}}throw Error("Unsupported data format/bitsPerSample")};d.prototype={getFileDirectory:function(){return this.fileDirectory},getGeoKeys:function(){return this.geoKeys},getWidth:function(){return this.fileDirectory.ImageWidth},getHeight:function(){return this.fileDirectory.ImageLength},getSamplesPerPixel:function(){return this.fileDirectory.SamplesPerPixel},getTileWidth:function(){return this.isTiled?this.fileDirectory.TileWidth:this.getWidth()},getTileHeight:function(){return this.isTiled?this.fileDirectory.TileLength:this.fileDirectory.RowsPerStrip},getBytesPerPixel:function(){for(var a=0,b=0;b<this.fileDirectory.BitsPerSample.length;++b){var c=this.fileDirectory.BitsPerSample[b];if(c%8!==0)throw new Error("Sample bit-width of "+c+" is not supported.");if(c!==this.fileDirectory.BitsPerSample[0])throw new Error("Differing size of samples in a pixel are not supported.");a+=c}return a/8},getSampleByteSize:function(a){if(a>=this.fileDirectory.BitsPerSample.length)throw new RangeError("Sample index "+a+" is out of range.");var b=this.fileDirectory.BitsPerSample[a];if(b%8!==0)throw new Error("Sample bit-width of "+b+" is not supported.");return b/8},getReaderForSample:function(a){var b=this.fileDirectory.SampleFormat?this.fileDirectory.SampleFormat[a]:1,c=this.fileDirectory.BitsPerSample[a];switch(b){case 1:switch(c){case 8:return DataView.prototype.getUint8;case 16:return DataView.prototype.getUint16;case 32:return DataView.prototype.getUint32}break;case 2:switch(c){case 8:return DataView.prototype.getInt8;case 16:return DataView.prototype.getInt16;case 32:return DataView.prototype.getInt32}break;case 3:switch(c){case 32:return DataView.prototype.getFloat32;case 64:return DataView.prototype.getFloat64}}},getArrayForSample:function(a,b){var c=this.fileDirectory.SampleFormat?this.fileDirectory.SampleFormat[a]:1,d=this.fileDirectory.BitsPerSample[a];return k(c,d,b)},getDecoder:function(){return this.decoder},getTileOrStrip:function(a,b,c,d){var e,f=Math.ceil(this.getWidth()/this.getTileWidth()),g=Math.ceil(this.getHeight()/this.getTileHeight()),h=this.tiles;if(1===this.planarConfiguration?e=b*f+a:2===this.planarConfiguration&&(e=c*f*g+b*f+a),null!==h&&e in h)return d?d(null,{x:a,y:b,sample:c,data:h[e]}):h[e];var i,j;this.isTiled?(i=this.fileDirectory.TileOffsets[e],j=this.fileDirectory.TileByteCounts[e]):(i=this.fileDirectory.StripOffsets[e],j=this.fileDirectory.StripByteCounts[e]);var k=this.dataView.buffer.slice(i,i+j);if(d)return this.getDecoder().decodeBlockAsync(k,function(f,g){f||null===h||(h[e]=g),d(f,{x:a,y:b,sample:c,data:g})});var l=this.getDecoder().decodeBlock(k);return null!==h&&(h[e]=l),l},_readRasterAsync:function(a,b,c,d,e,f){function g(e,f){if(e)x=e;else for(var g=new DataView(f.data),j=f.y*k,l=f.x*i,m=(f.y+1)*k,n=(f.x+1)*i,o=(f.sample,Math.max(0,a[1]-j));o<Math.min(k,k-(m-a[3]));++o)for(var t=Math.max(0,a[0]-l);t<Math.min(i,i-(n-a[2]));++t){var u,y=(o*i+t)*q,z=s[C].call(g,y+r[C],w);d?(u=(o+j-a[1])*p*b.length+(t+l-a[0])*b.length+C,c[u]=z):(u=(o+j-a[1])*p+t+l-a[0],c[C][u]=z)}v-=1,h()}function h(){u&&0===v&&(x?f(x):e(c))}for(var i=this.getTileWidth(),k=this.getTileHeight(),l=Math.floor(a[0]/i),m=Math.ceil(a[2]/i),n=Math.floor(a[1]/k),o=Math.ceil(a[3]/k),p=(Math.ceil(this.getWidth()/i),a[2]-a[0]),q=(a[3]-a[1],this.getBytesPerPixel()),r=(this.getWidth(),[]),s=[],t=0;t<b.length;++t)1===this.planarConfiguration?r.push(j(this.fileDirectory.BitsPerSample,0,b[t])/8):r.push(0),s.push(this.getReaderForSample(b[t]));for(var u=!1,v=0,w=this.littleEndian,x=null,y=n;o>=y;++y)for(var z=l;m>=z;++z)for(var A=0;A<b.length;++A){var B=b[A];2===this.planarConfiguration&&(q=this.getSampleByteSize(B));var C=A;v+=1,this.getTileOrStrip(z,y,B,g)}u=!0,h()},_readRaster:function(a,b,c,d,e,f){try{for(var g=this.getTileWidth(),h=this.getTileHeight(),i=Math.floor(a[0]/g),k=Math.ceil(a[2]/g),l=Math.floor(a[1]/h),m=Math.ceil(a[3]/h),n=(Math.ceil(this.getWidth()/g),a[2]-a[0]),o=(a[3]-a[1],this.getBytesPerPixel()),p=(this.getWidth(),[]),q=[],r=0;r<b.length;++r)1===this.planarConfiguration?p.push(j(this.fileDirectory.BitsPerSample,0,b[r])/8):p.push(0),q.push(this.getReaderForSample(b[r]));for(var s=l;m>s;++s)for(var t=i;k>t;++t)for(var u=s*h,v=t*g,w=(s+1)*h,x=(t+1)*g,y=0;y<b.length;++y){var z=b[y];2===this.planarConfiguration&&(o=this.getSampleByteSize(z));for(var A=new DataView(this.getTileOrStrip(t,s,z)),B=Math.max(0,a[1]-u);B<Math.min(h,h-(w-a[3]));++B)for(var C=Math.max(0,a[0]-v);C<Math.min(g,g-(x-a[2]));++C){var D,E=(B*g+C)*o,F=q[y].call(A,E+p[y],this.littleEndian);d?(D=(B+u-a[1])*n*b.length+(C+v-a[0])*b.length+y,c[D]=F):(D=(B+u-a[1])*n+C+v-a[0],c[y][D]=F)}}return e(c),c}catch(G){return f(G)}},readRasters:function(){var a,b,c;switch(arguments.length){case 0:break;case 1:"function"==typeof arguments[0]?b=arguments[0]:a=arguments[0];break;case 2:"function"==typeof arguments[0]?(b=arguments[0],c=arguments[1]):(a=arguments[0],b=arguments[1]);break;case 3:a=arguments[0],b=arguments[1],c=arguments[2];break;default:throw new Error("Invalid number of arguments passed.")}a=a||{},c=c||function(a){console.error(a)};var d=a.window||[0,0,this.getWidth(),this.getHeight()],e=a.samples,f=a.interleave;if(d[0]<0||d[1]<0||d[2]>this.getWidth()||d[3]>this.getHeight())throw new Error("Select window is out of image bounds.");if(d[0]>d[2]||d[1]>d[3])throw new Error("Invalid subsets");var g,h=d[2]-d[0],i=d[3]-d[1],j=h*i;if(e){for(g=0;g<e.length;++g)if(e[g]>=this.fileDirectory.SamplesPerPixel)throw new RangeError("Invalid sample index '"+e[g]+"'.")}else for(e=[],g=0;g<this.fileDirectory.SamplesPerPixel;++g)e.push(g);var l;if(f){var m=this.fileDirectory.SampleFormat?Math.max.apply(null,this.fileDirectory.SampleFormat):1,n=Math.max.apply(null,this.fileDirectory.BitsPerSample);l=k(m,n,j*e.length)}else for(l=[],g=0;g<e.length;++g)l.push(this.getArrayForSample(e[g],j));var o=this.getDecoder();if(o.isAsync()){if(!b)throw new Error("No callback specified for asynchronous raster reading.");return this._readRasterAsync(d,e,l,f,b,c)}return b=b||function(){},this._readRaster(d,e,l,f,b,c)},getTiePoints:function(){if(!this.fileDirectory.ModelTiepoint)return[];for(var a=[],b=0;b<this.fileDirectory.ModelTiepoint.length;b+=6)a.push({i:this.fileDirectory.ModelTiepoint[b],j:this.fileDirectory.ModelTiepoint[b+1],k:this.fileDirectory.ModelTiepoint[b+2],x:this.fileDirectory.ModelTiepoint[b+3],y:this.fileDirectory.ModelTiepoint[b+4],z:this.fileDirectory.ModelTiepoint[b+5]});return a},getGDALMetadata:function(){var a={};if(!this.fileDirectory.GDAL_METADATA)return null;for(var b=this.fileDirectory.GDAL_METADATA,c=e.parseXml(b.substring(0,b.length-1)),d=c.evaluate("GDALMetadata/Item",c,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null),f=0;f<d.snapshotLength;++f){var g=d.snapshotItem(f);a[g.getAttribute("name")]=g.textContent}return a}},b.exports=d},{"./compression/deflate.js":2,"./compression/lzw.js":3,"./compression/packbits.js":4,"./compression/raw.js":5,"./globals.js":9}],9:[function(a,b,c){"use strict";var d,e={315:"Artist",258:"BitsPerSample",265:"CellLength",264:"CellWidth",320:"ColorMap",259:"Compression",33432:"Copyright",306:"DateTime",338:"ExtraSamples",266:"FillOrder",289:"FreeByteCounts",288:"FreeOffsets",291:"GrayResponseCurve",290:"GrayResponseUnit",316:"HostComputer",270:"ImageDescription",257:"ImageLength",256:"ImageWidth",271:"Make",281:"MaxSampleValue",280:"MinSampleValue",272:"Model",254:"NewSubfileType",274:"Orientation",262:"PhotometricInterpretation",284:"PlanarConfiguration",296:"ResolutionUnit",278:"RowsPerStrip",277:"SamplesPerPixel",305:"Software",279:"StripByteCounts",273:"StripOffsets",255:"SubfileType",263:"Threshholding",282:"XResolution",283:"YResolution",326:"BadFaxLines",327:"CleanFaxData",343:"ClipPath",328:"ConsecutiveBadFaxLines",433:"Decode",434:"DefaultImageColor",269:"DocumentName",336:"DotRange",321:"HalftoneHints",346:"Indexed",347:"JPEGTables",285:"PageName",297:"PageNumber",317:"Predictor",319:"PrimaryChromaticities",532:"ReferenceBlackWhite",339:"SampleFormat",340:"SMinSampleValue",341:"SMaxSampleValue",559:"StripRowCounts",330:"SubIFDs",292:"T4Options",293:"T6Options",325:"TileByteCounts",323:"TileLength",324:"TileOffsets",322:"TileWidth",301:"TransferFunction",318:"WhitePoint",344:"XClipPathUnits",286:"XPosition",529:"YCbCrCoefficients",531:"YCbCrPositioning",530:"YCbCrSubSampling",345:"YClipPathUnits",287:"YPosition",37378:"ApertureValue",40961:"ColorSpace",36868:"DateTimeDigitized",36867:"DateTimeOriginal",34665:"Exif IFD",36864:"ExifVersion",33434:"ExposureTime",41728:"FileSource",37385:"Flash",40960:"FlashpixVersion",33437:"FNumber",42016:"ImageUniqueID",37384:"LightSource",37500:"MakerNote",37377:"ShutterSpeedValue",37510:"UserComment",33723:"IPTC",34675:"ICC Profile",700:"XMP",42112:"GDAL_METADATA",42113:"GDAL_NODATA",34377:"Photoshop",33550:"ModelPixelScale",33922:"ModelTiepoint",34264:"ModelTransformation",34735:"GeoKeyDirectory",34736:"GeoDoubleParams",34737:"GeoAsciiParams"},f={};for(d in e)f[e[d]]=parseInt(d);var g=[f.BitsPerSample,f.ExtraSamples,f.SampleFormat,f.StripByteCounts,f.StripOffsets,f.StripRowCounts,f.TileByteCounts,f.TileOffsets],h={1:"BYTE",2:"ASCII",3:"SHORT",4:"LONG",5:"RATIONAL",6:"SBYTE",7:"UNDEFINED",8:"SSHORT",9:"SLONG",10:"SRATIONAL",11:"FLOAT",12:"DOUBLE",16:"LONG8",17:"SLONG8",18:"IFD8"},i={};for(d in h)i[h[d]]=parseInt(d);var j={1024:"GTModelTypeGeoKey",1025:"GTRasterTypeGeoKey",1026:"GTCitationGeoKey",2048:"GeographicTypeGeoKey",2049:"GeogCitationGeoKey",2050:"GeogGeodeticDatumGeoKey",2051:"GeogPrimeMeridianGeoKey",2052:"GeogLinearUnitsGeoKey",2053:"GeogLinearUnitSizeGeoKey",2054:"GeogAngularUnitsGeoKey",2055:"GeogAngularUnitSizeGeoKey",2056:"GeogEllipsoidGeoKey",2057:"GeogSemiMajorAxisGeoKey",2058:"GeogSemiMinorAxisGeoKey",2059:"GeogInvFlatteningGeoKey",2060:"GeogAzimuthUnitsGeoKey",2061:"GeogPrimeMeridianLongGeoKey",2062:"GeogTOWGS84GeoKey",3072:"ProjectedCSTypeGeoKey",3073:"PCSCitationGeoKey",3074:"ProjectionGeoKey",3075:"ProjCoordTransGeoKey",3076:"ProjLinearUnitsGeoKey",3077:"ProjLinearUnitSizeGeoKey",3078:"ProjStdParallel1GeoKey",3079:"ProjStdParallel2GeoKey",3080:"ProjNatOriginLongGeoKey",3081:"ProjNatOriginLatGeoKey",3082:"ProjFalseEastingGeoKey",3083:"ProjFalseNorthingGeoKey",3084:"ProjFalseOriginLongGeoKey",3085:"ProjFalseOriginLatGeoKey",3086:"ProjFalseOriginEastingGeoKey",3087:"ProjFalseOriginNorthingGeoKey",3088:"ProjCenterLongGeoKey",3089:"ProjCenterLatGeoKey",3090:"ProjCenterEastingGeoKey",3091:"ProjCenterNorthingGeoKey",3092:"ProjScaleAtNatOriginGeoKey",3093:"ProjScaleAtCenterGeoKey",3094:"ProjAzimuthAngleGeoKey",3095:"ProjStraightVertPoleLongGeoKey",3096:"ProjRectifiedGridAngleGeoKey",4096:"VerticalCSTypeGeoKey",4097:"VerticalCitationGeoKey",4098:"VerticalDatumGeoKey",4099:"VerticalUnitsGeoKey"},k={};for(d in j)k[j[d]]=parseInt(d);var l;"undefined"==typeof window?l=function(b){var c=a("xmldom").DOMParser;return(new c).parseFromString(b,"text/xml")}:"undefined"!=typeof window.DOMParser?l=function(a){return(new window.DOMParser).parseFromString(a,"text/xml")}:"undefined"!=typeof window.ActiveXObject&&new window.ActiveXObject("Microsoft.XMLDOM")&&(l=function(a){var b=new window.ActiveXObject("Microsoft.XMLDOM");return b.async="false",b.loadXML(a),b}),b.exports={fieldTags:f,fieldTagNames:e,arrayFields:g,fieldTypes:i,fieldTypeNames:h,geoKeys:k,geoKeyNames:j,parseXml:l}},{xmldom:"xmldom"}],10:[function(a,b,c){"use strict";var d=a("./geotiff.js"),e=function(a,b){var c,e,f,g;if("string"==typeof a||a instanceof String)for(c=new ArrayBuffer(2*a.length),g=new Uint16Array(c),e=0,f=a.length;f>e;++e)g[e]=a.charCodeAt(e);else{if(!(a instanceof ArrayBuffer))throw new Error("Invalid input data given.");c=a}return new d(c,b)};"undefined"!=typeof b&&"undefined"!=typeof b.exports&&(b.exports.parse=e),"undefined"!=typeof window&&(window.GeoTIFF={parse:e})},{"./geotiff.js":7}]},{},[10]);

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="geotiff.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
var width = 680,
    height = 500,
    barbSize = 40;

var projection = d3.geoAzimuthalEqualArea()
    .rotate([-55.5, -24])
    .scale(1100);

var intervalsTemp = [14,17,20,23,26,29,35,38];

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");
d3.request("tz850.tiff")
  .responseType('arraybuffer')
  .get(function(error, tiffData){
d3.json("world-110m.json", function(error, topojsonData) {
  var countries = topojson.feature(topojsonData, topojsonData.objects.countries);
  var path = d3.geoPath()
      .projection(projection).context(context);

  context.beginPath();
  context.strokeStyle = "#777";
  context.fillStyle = "#aaa";
  path(countries);
  context.fill();
  context.stroke();

  var tiff = GeoTIFF.parse(tiffData.response);
  var image = tiff.getImage();
  var rasters = image.readRasters();
  var tiepoint = image.getTiePoints()[0];
  var pixelScale = image.getFileDirectory().ModelPixelScale;
  var geoTransform = [tiepoint.x, pixelScale[0], 0, tiepoint.y, 0, -1*pixelScale[1]];
  var invGeoTransform = [-geoTransform[0]/geoTransform[1], 1/geoTransform[1],0,-geoTransform[3]/geoTransform[5],0,1/geoTransform[5]];

  var tempData = new Array(image.getHeight());
  for (var j = 0; j<image.getHeight(); j++){
      tempData[j] = new Array(image.getWidth());
      for (var i = 0; i<image.getWidth(); i++){
          tempData[j][i] = rasters[1][i + j*image.getWidth()];
      }
  }


  var canvasRaster = d3.select("body").append("canvas")
      .attr("width", width)
      .attr("height", height)
      .style("display","none");

  var contextRaster = canvasRaster.node().getContext("2d");
  var id = contextRaster.createImageData(width,height);
  var data = id.data;
  var pos = 0;

  for(var j = 0; j<height; j++){
    for(var i = 0; i<width; i++){
      var pointCoords = projection.invert([i,j]);
      var px = Math.round(invGeoTransform[0] + pointCoords[0]* invGeoTransform[1]);
      var py = Math.round(invGeoTransform[3] + pointCoords[1] * invGeoTransform[5]);

      if(px >= 0 && px < image.getWidth() && py >= 0 && py < image.getHeight()){

        var v = (tempData[py][px]- 14)/24;
        data[pos]   = 255 * (v<0.5?2*v:1);
        data[pos+1]   = 255 * (v<0.5?2*v:1-2*(v-0.5));
        data[pos+2]   = 255 * (v<0.5?1:1-2*(v-0.5));
        data[pos+3]   = 180;
        pos = pos + 4

      }
    }
  }

  contextRaster.putImageData( id, 0, 0);
  context.drawImage(canvasRaster.node(), 0, 0);
});
});
</script>

</body>

thumbnail.png

tz850.tiff

world-110m.json