ihcantabria / leaflet.canvaslayer.field Goto Github PK

Hello IHCatabria! Thanks again for supporting this outstanding library. I have been using a forked version of this library for the app Argovis for close to a year now. We are collaborating with some oceanographers who made some gridded products, and we want to share them on Argovis using CanvasLayer.Field. The issue is that the grids are not on a uniformly spaced grid! Instead, their latitude gets finer at the south pole (5-degree polynomial!). Is there a way to make a canvas layer using a non-uniform grid using CanvasLayer?

FYI, I'm loading the gridded data as JSON from a database, for example, we have sea-ice coverage in a small box here

Basically the grid data is comprised of an array of {lat: number, lon: number, value: number} objects. One solution I'm working on re-interpolates this grid on the front-end to something uniform. A non-trivial task...Before I work on this any further, I was wondering if there is a better way? I'm not as familiar with d3 to homebrew my own solution yet but there has to be a way for the d3/webGL lower level stuff to handle interpolation on a non-uniform grid.

Your thoughts, suggestions, counsel, would be appreciated. I'm willing to code the solution myself and share it with the community. All I am asking is a nudge in the right direction. Thank you again for your time!

I have noticed that at zoom the scaler drawing is pretty slow. I am pretty sure the reason is that _drawImage is being called multiple time(3 times) at each zoom event one is by movestart another is by moveend and I cant find out which one is calling third time. Is there a fix for this.

I use your tool to load geogiffs (georeferenced images) as overlays.

The issue I have with it is that the tool works by rerendering geogiff overlays after every move. It's slow and it hangs.

I tried modifying it to generate an ImageOverlay instead of a L.CanvasLayer.ScalarField so that it doesn't have to rerender the geogiff overlay after every move. It works.. almost.

The problem I have now is that Leaflet.CanvasLayer.Field renders the image by scanning the layer. So without doing map.fitBounds(bounds) beforehand, it doesn't work. With max bounds -180/180 on the leaflet map, when the geogiff crosses the 180th meridian, it fails to render the image.

Is there a way to render the image with a different technique? So that, from the geogiff data, I can have an image and place it using the corners of the geogiff file. I tried but with not much success.

Here is my function. The function trim removes the transparent pixels around the image. Ideally I would get rid of that and map.fitBounds.

getGeoGiffOverlay: function(map, arrayBuffer, options) {
        let geo = this.fromGeoTIFF(arrayBuffer);

        var extent = geo.extent(),
            latlng1 = L.latLng(extent[1], extent[0]),
            latlng2 = L.latLng(extent[3], extent[2]);
        var bounds = L.latLngBounds(latlng1, latlng2);

        map.fitBounds(bounds);

        var canvas = L.DomUtil.create("canvas", "leaflet-layer");
        var size = map.getSize();
        canvas.width = size.x, canvas.height = size.y;

        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);

        var width = canvas.width,
            height = canvas.height;
            var img = context.createImageData(width, height);
        var data = img.data;

        var origin = map.getPixelOrigin();

        for (var i = 0, y = 0; y < height; y++) {
            for (var x = 0; x < width; x++) {
                var point = map.containerPointToLayerPoint(L.point(x, y));
                point = point.add(origin);
                var unprojected = map.unproject(point);

                var lng = unprojected.lng;
                var lat = unprojected.lat;
                var color = geo['valueAt'](lng, lat);
                if (null !== color) {
                    color >>>= 0;
                    var B = color & 0xFF,
                        G = (color & 0xFF00) >>> 8,
                        R = (color & 0xFF0000) >>> 16,
                        A = 255 ;

                    data[i] = R, data[i + 1] = G, data[i + 2] = B, data[i + 3] = parseInt(255 * A)
                }
                i += 4
            }
        }

        context.putImageData(img, 0, 0);

        canvas = this.trim(canvas);

        var imageData = canvas.toDataURL('image/png');

        var _latlng1 = {lat: latlng2.lat, lng: latlng1.lng};
        var _latlng2 = {lat: latlng1.lat, lng: latlng2.lng};
        var latLngBounds = L.latLngBounds(_latlng1, _latlng2);
        return L.imageOverlay(imageData, latLngBounds, options);
}

I want to render something like https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/example_ VectorFieldAnim.html But I found that the particles scattered when dragging, and they didn't stop like in the example, and they were stuck. The code is the same as that in the doc. What can I do to solve this problem

Thank you for any answers
YangXy

Hello, I am trying to create a L.CanvasLayer.SimpleLonLat where I can click on each individual point and open a popup with the exact coordinates of the grid point (and not just the mouse click coordinates). The final objective is to also show a link in the popup where the user would be redirected to a THREDDS service (NCSS) where he could download the time series for that specific grid point.

Using the code in one of the examples I managed to display the points just fine but the popup never shows. My knowledge of JavaScript is very limited so I am not sure what I should try next.

// GeoTIFF
var tiff = "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/tz850.tiff";
fetch(tiff).then(r => r.arrayBuffer()).then(function(buffer) {
  var s = L.ScalarField.fromGeoTIFF(buffer);
  let points = s.getCells().map(c => c.center);
  let layer = L.canvasLayer.simpleLonLat(points, {color: 'red'}).addTo(map);
  layer.on("click", function(e) {
    if (e.points !== null) {
      let lat = e.points.lat;
      let lon = e.points.lng;
      let myLatLng = L.LatLng(lat, lng);            
      let popup = L.popup()
      .setLatLng(myLatLng)
      .setContent(`${e.points.lng}`)
      .openOn(map);
    }
  });
  map.fitBounds(layer.getBounds());
});

Thank you and congratulations for the awesome plugin. Besides the main attraction (the vector/flow view), the option of showing gridpoints is excellent for when the user wants to select a model grid point nearest to a desired location.

Hi,

I have an ASCII grid layer in UTM (EPSG:32629) coordinates and is not working with the plugin. I've tried to translate the XLL/YLL to decimal coordinates and to "adjust" the cellsize but this is not working properly (the grid is rotated and is touching land):

Do you think is possible to feed the plugin with a different coordinate system?
Any clue on how to solve this?

All the best

Hi,
thanks for the plugin. I'm now trying to use it on React (I'm new on it ) but i've no idea from where to start. Could you please give me some suggestions?

I was able to import in a standard html file.

Thanks,
Davide

Dear all, I've started an effort to create a generic Open Source platform on the weather forecast data topic (https://github.com/weacast) and discovered your work. Weacast is a work in progress but I start having a running base, you have some information here https://weacast.gitbooks.io/weacast-docs/.

I started testing your scalar layer for integration and already opened #6, I wonder if you were interested in collaborating to improve your library for Weacast (I found some performance issues) ?

Sorry using the issue tracker for this but didn't know how to contact you, let me know any other prefered way to contact you.

Thanks in advance for your return.

I'm wondering how to get the examples to work with my own data.
I tried

• exports via zygrib where i gdal_translated the u/v bands - no data displayed at all (no js-errors as well)
• another export site (http://www.globalmarinenet.com/free-grib-file-downloads/) where i had some display but also weird maxed out values (14.141 m/s) so that those were extremely long lines and the other useful data was very tiny

I used

$ gdal_translate -of AAIGrid  -a_srs EPSG:4326 -b 1 gribdata.grb U.asc 
$ gdal_translate -of AAIGrid  -a_srs EPSG:4326 -b 2 gribdata.grb V.asc 

to generate the ascii grids. I also (obviously) had to pick out the correct bands via gdalinfo first.

Thanks in advance..
Edit: if needed, i can provide resulting ascii grid files, grib input etc

i need to put one of the vector layers into that map..please help me

Thanks for your extension! It is really helpful!
Just a suggestion:
To be able to reorder the layers in leaflet,
I have modified lines 1075-1085 so that layer could be added to user-defined "map pane" by passing it in the options. I am newbie in Javascript, so you can edit it better.
, onAdd: function (t) { this._map = t, this._canvas = L.DomUtil.create("canvas", "leaflet-layer"), this.tiles = {}; var e = this._map.getSize(); this._canvas.width = e.x, this._canvas.height = e.y; var n = this._map.options.zoomAnimation && L.Browser.any3d; L.DomUtil.addClass(this._canvas, "leaflet-zoom-" + (n ? "animated" : "hide")), _this.options.hasOwnProperty('pane') ? t._panes[this.options.pane].appendChild(this._canvas): t._panes.overlayPane.appendChild(this._canvas)_, t.on(this.getEvents(), this); var i = this._delegate || this; i.onLayerDidMount && i.onLayerDidMount(), this.needRedraw() }, onRemove: function (t) { var e = this._delegate || this; e.onLayerWillUnmount && e.onLayerWillUnmount(), _this.options.hasOwnProperty('pane') ? t.getPanes()[this.options.pane].removeChild(this._canvas): t._panes.overlayPane.removeChild(this._canvas)_, t.off(this.getEvents(), this), this._canvas = null }

I have some geotiffs that have rotation or skew. Can CanvasLayer.Field handle these?

This is how we set it with GDAL SatGeoTransform:
Given information from the aforementioned gdal datamodel docs, the 3rd & 5th parameters of SatGeoTransform (x_skew and y_skew respectively) can be calculated from two control points (p1, p2) with known x and y in both "geo" and "pixel" coordinate spaces. p1 should be above-left of p2 in pixelspace.

x_skew = sqrt((p1.geox-p2.geox)**2 + (p1.geoy-p2.geoy)**2) / (p1.pixely - p2.pixely) y_skew = sqrt((p1.geox-p2.geox)**2 + (p1.geoy-p2.geoy)**2) / (p1.pixelx - p2.pixelx)
In short this is the ratio of Euclidean distance between the points in geospace to the height (or width) of the image in pixelspace.

The units of the parameters are "geo"length/"pixel"length.

Here is a demonstration using the corners of the image stored as control points (gcps):

import gdal
from math import sqrt

ds = gdal.Open(fpath)
gcps = ds.GetGCPs()

assert gcps[0].Id == 'UpperLeft'
p1 = gcps[0]
assert gcps[2].Id == 'LowerRight'
p2 = gcps[2]

y_skew = (
sqrt((p1.GCPX-p2.GCPX)**2 + (p1.GCPY-p2.GCPY)**2) /
(p1.GCPPixel - p2.GCPPixel)
)
x_skew = (
sqrt((p1.GCPX-p2.GCPX)**2 + (p1.GCPY-p2.GCPY)**2) /
(p1.GCPLine - p2.GCPLine)
)

x_res = (p2.GCPX - p1.GCPX) / ds.RasterXSize
y_res = (p2.GCPY - p1.GCPY) / ds.RasterYSize

ds.SetGeoTransform([
p1.GCPX,
x_res,
x_skew,
p1.GCPY,
y_skew,
y_res,
])

Here's the problem: http://www.doctorharapos.com/webMap/geotiff.html

-My geotiff files are ligth, just 4MB

-My process: starting from a ascii esri file I transform it to geotiff using gdalwarp, because I also do a change of projection

-I stack items in groups of 4 geotiff files with gdalbuildvrt

-I add LZW compression with gdal_translate and overviews with gdaladdo

An example of the answer of gdalinfo:

Driver: GTiff/GeoTIFF
Files: mP2_apr_p50.tiff
Size is 2978, 1167
Coordinate System is:
GEOGCS["WGS 84",
    DATUM["WGS_1984",
        SPHEROID["WGS 84",6378137,298.257223563,
            AUTHORITY["EPSG","7030"]],
        AUTHORITY["EPSG","6326"]],
    PRIMEM["Greenwich",0],
    UNIT["degree",0.0174532925199433],
    AUTHORITY["EPSG","4326"]]
Origin = (-8.830684460645021,42.286367649318294)
Pixel Size = (0.000057568360165,-0.000057568360165)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  COMPRESSION=LZW
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  (  -8.8306845,  42.2863676) (  8d49'50.46"W, 42d17'10.92"N)
Lower Left  (  -8.8306845,  42.2191854) (  8d49'50.46"W, 42d13' 9.07"N)
Upper Right (  -8.6592459,  42.2863676) (  8d39'33.29"W, 42d17'10.92"N)
Lower Right (  -8.6592459,  42.2191854) (  8d39'33.29"W, 42d13' 9.07"N)
Center      (  -8.7449652,  42.2527765) (  8d44'41.87"W, 42d15'10.00"N)
Band 1 Block=2978x1 Type=Int32, ColorInterp=Gray
  NoData Value=0
  Overviews: 1489x584, 745x292, 373x146, 187x73
Band 2 Block=2978x1 Type=Int32, ColorInterp=Undefined
  NoData Value=0
  Overviews: 1489x584, 745x292, 373x146, 187x73
Band 3 Block=2978x1 Type=Int32, ColorInterp=Undefined
  NoData Value=0
  Overviews: 1489x584, 745x292, 373x146, 187x73
Band 4 Block=2978x1 Type=Int32, ColorInterp=Undefined
  NoData Value=0
  Overviews: 1489x584, 745x292, 373x146, 187x73

Any clue of what is happening or what can I do to speed up the loading?

All the best

Facing an issue when rendering a GeoTIFF image. It prompts like "Make sure the difference is just a floating precision issue". I am confused.

Any help is appreciated . Thanks in advance !.

Hello,

I want to render some ESRI ASCII files provided by spanish government, but they use xllcenter and yllcenter in the definition of the ascii file (instead of xllcorner and yllcorner), but they're not supported by this library yet.

The definiton of ESRI ASCII Raster Format specifies that an ESRI file can contains one pair of:

• XLLCORNER and YLLCORNER
• XLLCENTER and YLLCENTER

Geographical files provided in IGN (For example in section: Modelos digitales de elevaciones > MDT200 > ...) are formed by XLLCENTER and YLLCENTER.

Thank you in advance.

missing dep:

✔ 13:15 ./Leaflet.CanvasLayer.Field [master {origin/master}|✔] $ webpack -p 
Hash: 9cd8aefc2e75112ed115
Version: webpack 2.5.1
Time: 35ms

ERROR in Entry module not found: Error: 
  Can't resolve 'eslint-loader' in './Leaflet.CanvasLayer.Field/src'

✘-2 13:15 ./Leaflet.CanvasLayer.Field [master {origin/master}|✔] $ 
  npm install eslint-loader --save-dev

I'm not 100% sure but it seems that geotiff with i.e. fileDirectory.GDAL_NODATA=-1 and values [0,306] my 0 values (int in this case) are not rendered or interpreted as null/nodata.

Further I tested the color function, it never gets the value 0;
In fact I happen to have a geotiff with only -1=nodata and 0 as data. The colorfunction is NOT called a single time.

I checked the existence of GDAL_NODATA in the js and it is there. Any ideas?

EDIT:

this hack worked around it

 zs = Array.from(zs).map(function(z) {
  return z === noData ? null : (z === 0 ? 1e-10 : z);
 });

Hello! Really loving this so far. I'm working on a product where we have multiple arrow data sets on the map to show multi-directional waves. I was wondering if there was a simple way to start all the arrows at the same center location so you can clearly see all the arrows. Here's a screenshot of what our map currently looks like with all 3 data sets plotted.

Thanks!

I tried to read and edit the code "L.Control.ColorBar.js" by adding "opacity: 0.5" to 'div', nothing is changed. This lead me to another questions, how can I edit on the code?
I put the whole Leaflet.Canvaslayer.Field directory locally.

I'm not able to do layer.on('mousemove', somefn) whereas layer.on('click', somefn) works. Is this by design ? Or is there another option.

I want to display the value on hover in a box i.e. below the map.

Hi

I have two questions.

1- I have been working on visualizing ocean temperature distribution using this awesome function. There is an obvious blur in my field (screenshot attached), and the blur is unrelated to the color palette because I tried different ones. A friend of mine viewed the map on another server with a slower refresh rate and the map got much better and more contours were shown. Is there anything I can do about this? Where in the code are the blur and the refresh rate handled?

2- I want to view the change in this temperature profile with time, using the time slider of Leaflet.timedimension, but I am not sure how to link the layers produced from the ASCII files to their corresponding times. Would you know of a successful example code that combines both functions?

Thank you so much

Hi,
i use leaflet.canvaslayer.field v1.4.1 .i get this error, didn't find any related answer in google.
my ascii grid files are .grd files and i can open it with qgis without problem.
thank you

Error: Not a valid ASCIIGrid Header: TypeError: e[1] is undefined ScalarField.js:75:18
value
ScalarField.js:75:18
value
ScalarField.js:18:21

grid files with gdal :
Driver: GSBG/Golden Software Binary Grid (.grd)
Size is 10784, 23000
Coordinate System is `'
Origin = (-80.837503782394649,-17.000503265369584)
Pixel Size = (0.001000000006202,-0.001000000022548)
Corner Coordinates:
Upper Left ( -80.8375038, -17.0005033)
Lower Left ( -80.8375038, -40.0005038)
Upper Right ( -70.0535037, -17.0005033)
Lower Right ( -70.0535037, -40.0005038)
Center ( -75.4455037, -28.5005035)
Band 1 Block=10784x1 Type=Float32, ColorInterp=Undefined
Min=0.000 Max=28.780
NoData Value=1.70141000918782799e+38

Hi

Thank you so much for this great plugin. I created a color bar similar to the one in the example demo: https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/example_VectorFieldAnim_ColorBar.html

Is it possible to make the color bar more dynamic? For example, I want to give the user the option to set the limits of the color scheme. Let's say I am plotting a temperature field and the data ranges between 0 and 20 (where 0 is blue and 20 is red). As of now, my colorbar presents the same scheme, but what if the user wants that color scale between 5 and 15 (in this case, 0 to 5 would be blue and 15 to 20 would be red, and 5 to 15 would be the same full color scale like the data.). I am new to JS so I am not sure how to work this.

Any help is appreciated.

It would be really helpful to publish this plugin to npm. Currently I am working on a project that could benefit from this plugin but all the other dependencies I am using can be installed via npm. It would be very convenient if you could add this plugin to npm.

Thank you in advance.

Hi,

I'm working with multiple band geotiff file using multipleFromGeoTIFF:

<script>
	
var map = L.map('map').setView([42.24,-8.75], 13);

var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
//var dark = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, example by <a href="http://www.digital-geography.com">digital-geography.com</a>'
}).addTo(map);

var freqs=["63 Hz","125 Hz","2 kHz","5 kHz"];
/* GeoTIFF with n bands */
d3.request("multiBand.tiff").responseType('arraybuffer').get(
	function (error, tiffData) {
		let scalarFields = L.ScalarField.multipleFromGeoTIFF(tiffData.response);
		let legend = {};
		let bounds = {};

		scalarFields.forEach(function (sf, index) {
			let layerSf = L.canvasLayer.scalarField(sf, {
				range: sf.range,
				color: chroma.scale(['000099','005500','FF0000']).domain(sf.range).classes(25),
				opacity: 0.85
			}).addTo(map);
		
			layerSf.on('click', function (e) {
			 if (e.value !== null) {
				 let v = e.value.toFixed(0);
				 let html = ('<span class="popupText">Pressure (dB): ' + v + '</span>');
				 L.popup()
				 .setLatLng(e.latlng)
				 .setContent(html)
				 .openOn(map);
			  }
			});
			legend[freqs[index]] = layerSf;
			bounds = layerSf.getBounds();
		 });
				
		// Layers control
		L.control.layers(legend, {}, {
			position: 'bottomleft',
			collapsed: false
			}).addTo(map);
		
		map.fitBounds(bounds);
		var bar = L.control.colorBar(chroma.scale(['000099','005500','FF0000']).domain([80,140]).classes(30), [80,140], {
			title: 'Pressure levels',
			units: 'dB',
			steps: 100,
			decimals: 1,
			width: 350,
			height: 20,
			position: 'bottomright',
			background: '#000',
			textColor: 'white',
			textLabels: ['80', '100', '140'],
			labels: [80, 100.0, 140.0],
			labelFontSize: 9
		}).addTo(map);
	
});
    </script>

that is my attempt to set a dynamic color for the data and a colorbar for each one of the bands of my multiBand geotiff, so everytime a new band is selected a new color and colorbar is set.
My attempt is not working, any clue on how to make this possible?

All the best

Loading geotiffs assumes they have tie points and model pixel scale.
But geotiffs can alternately use Model Transform.

Something like this in ScalarField.multipleFromGeoTIFF handles both cases:

`

    let fileDirectory = image.getFileDirectory();
    let xScale = 0, yScale = 0;
    let tiepoint = {i:1,j:1,k:1,x:0,y:0,z:0};
    if( image.hasOwnProperty('tiepoint'))
        tiepoint = image.getTiePoints()[0];
    if (fileDirectory.hasOwnProperty('ModelPixelScale'))
        [xScale, yScale] = fileDirectory.ModelPixelScale;
    else
        if(fileDirectory.hasOwnProperty('ModelTransformation')) {
            let transform = fileDirectory.ModelTransformation;
            xScale = transform[0];
            yScale = -transform[5];
        }

`

Can someone add an example of how to add a VectorField.fromGeoTIFF

When I include a layer of this type in Leaflet, I lose the default cursor (grab) and the grabbing one for panning. It seems the layer changes the cursor for the entire layer stack to a pointer.

How can I include your layer and still retain default cursor behavior when not specifically interacting with your layer (i.e. mouseover)?

Thanks

Hi, I see how the filter implementation https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/example_ScalarField_Filter.html to filter the field, the behavior for dynamic filter is great, but I don't quite well understand how this works if I want to fix a filter range or condition when adding the CanvasLayer to the map ? (before using the dynamic control)

Can you point me how is this done?

Also, I could not make the dynamic filter work with an interpolated Layer, is this the right behavior of the plugin ?

thanks for any guidance.

Anyone ever get this error when trying to overlay a .tif file?

leaflet.canvaslayer.field v1.4.1
leaflet.canvaslayer.field.js:1 Uncaught ReferenceError: GeoTIFF is not defined
at Function.value (leaflet.canvaslayer.field.js:1)
at Function.value (leaflet.canvaslayer.field.js:1)
at FileReader.reader.onload (index3.html:49)

The gdalinfo of my tiff looks like this:
Driver: GTiff/GeoTIFF
Files: NeuseWGS84.tif
Size is 19802, 10018
Coordinate System is:
GEOGCS["WGS 84",
DATUM["unknown",
SPHEROID["WGS84",6378137,298.257223563]],
PRIMEM["Greenwich",0],
UNIT["degree",0.0174532925199433]]
Origin = (-79.240908453719030,36.408321223716079)
Pixel Size = (0.000160053800274,-0.000160053800274)
Metadata:
AREA_OR_POINT=Area
DataType=Generic
Image Structure Metadata:
INTERLEAVE=BAND
Corner Coordinates:
Upper Left ( -79.2409085, 36.4083212) ( 79d14'27.27"W, 36d24'29.96"N)
Lower Left ( -79.2409085, 34.8049023) ( 79d14'27.27"W, 34d48'17.65"N)
Upper Right ( -76.0715231, 36.4083212) ( 76d 4'17.48"W, 36d24'29.96"N)
Lower Right ( -76.0715231, 34.8049023) ( 76d 4'17.48"W, 34d48'17.65"N)
Center ( -77.6562158, 35.6066117) ( 77d39'22.38"W, 35d36'23.80"N)
Band 1 Block=19802x1 Type=Float32, ColorInterp=Gray
NoData Value=-3.40282299999999995e+38

the snippet of my code looks like this:
function handleFile(file){
var reader = new FileReader();
reader.onload = function(e) {
let geo = L.ScalarField.fromGeoTIFF(e.target.result, bandIndex = 0);
let layerGeo = L.canvasLayer.scalarField(geo, {
color: chroma.scale('RdPu').domain(geo.range),
opacity: 0.5
}).addTo(map);
};
reader.onerror = function(e) {
console.log(e);
};
reader.readAsArrayBuffer(file);
}

When using an ASCII grid with different cell lengths in the x and y directions, I get this error:

Uncaught Error: Invalid LatLng object: (NaN, NaN)
    at new M (leaflet.js:5)
    at Object.C [as latLng] (leaflet.js:5)
    at e.value (Field.js:73)
    at e.value (VectorField.js:176)
    at new e (VectorField.js:83)
    at Function.value (VectorField.js:21)
    at leaflet_panes.js:111
    at d3.v4.min.js:2
    at Object.<anonymous> (d3.v4.min.js:2)
    at k.call (d3.v4.min.js:2)

Hi,

it's me again ! :)

in src/Field.js#L10 there is this new and fancy
syntax new.target, which is not polyfillable and survives into dist.

So, according to the MDN neither Safari nor IE (Edge is not explicilty mentioned) support it.

Any idea how to solve this. Differently phrased: do you plan to support IE.X and or Edge.

Same problem somewhere else: PeculiarVentures/ASN1.js#19

I'm reading a geotiff file using you library.
I follow the example showed in 'example_ScalarField_Geotiff.html', where the geotiff file has two bands and it works perfectly in my computer.

My tiff file have several bands too, but I don't know how many are until the file is downloaded from the server, so to make calls to L.ScalarField.fromGeoTIFF(tiffData.response, <bandIndex>); (one per band) I need to obtain the number of bands of the geotiff file before.

Do you know how can I obtain that value?

1、 执行L.CanvasLayer.ScalarField.js文件中的构造函数L.canvasLayer.scalarField，创建一个标量层，代码如下：
let globeScalarLayerVelocity = L.canvasLayer.scalarField(null, {
class: 'Globe',
opacity: 0.65
});
其中，class：‘Globe‘ 就是用来设置在跨360°绘制的。

2、 第二个关键函数是L.CanvasLayer.ScalarField.js文件中的 _prepareImageIn 函数，该函数用于构建绘制数据。
其中
let f = (this.options.interpolate ? 'interpolatedValueAt' : 'valueAt') + this.options.class;
是一行关键代码，设置了取数据的方式。

3、 第三个关键函数是 Field.js 文件中的 valueAtGlobe 函数，该函数用于按照“跨360°模式”取数据。
4、 valueAtGlobe(lon, lat) { //added by zxl
5、 let [i, j] = this._getDecimalGlobeIndexes(lon, lat); //根据经纬度获取网格行列号
6、 let ii = Math.floor(i);
7、 let jj = Math.floor(j);
8、
9、 const ci = this._clampColumnIndex(ii); // 判断行列号是否有效
10、 const cj = this._clampRowIndex(jj);
11、
12、 let value = this._valueAtIndexes(ci, cj); //根据行列号获取要素值
13、 if (this._inFilter) {
14、 if (!this._inFilter(value)) return null; //判断该值是否设置了不绘制
15、 }
16、 return value;
17、 }

4、 第四个关键函数是Field.js文件中的 _getDecimalGlabeIndexes(lon,lat)函数，用于将经纬度值转换为网格号
_getDecimalGlobeIndexes(lon, lat) { //added by zxl
if (lon < this.xllCorner) {
let n = Math.floor((this.xllCorner - lon) / 360) + 1;
lon = lon + 360 * n;
}
let offset_i = (lon - this.xllCorner) % 360;
let i = offset_i / this.cellXSize;
let j = (this.yurCorner - lat) / this.cellYSize;
return [i, j];
}

Hello,

I'm trying to display a TIFF file over leaflet.
The tz850.tiff file provided in data directory works perfectly.

I need to display a TIFF file obtained from http://centrodedescargas.cnig.es. I tried with several maps, the last one was 'mtn25_epsg25829_0001-2.tiff' (17.9 MB).

When the line image.readRasters(); is executed the brower console shows the following error:

ran off the end of the buffer before finding EOI_CODE (end on input code)

Do you have any idea of what could be causing this error?

Thanks.

Note: If I open the geotiff file with QGIS, it tells me that the file metadata is:

Controlador: 
   GDAL provider GTiff GeoTIFF
Descripción del conjunto de datos:
  <folder>/mtn25_epsg25829_0021-4.tif
    AREA_OR_POINT=Area
Banda 1
Banda 2
Banda 3
Dimensiones
    X: 13582 Y: 9373 Bandas: 3
Origen
    552284,4.80741e+06
Tamaño de píxel
    1,-1
Valor sin datos
    *No se ha establecido el valor sin datos (NoDataValue)* 
Tipo de datos
    Byte - Entero natural de 8 bits
Vistas generales de pirámides
Sistema de referencia espacial de la capa
    +proj=utm +zone=29 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs
Extensión de la capa (proyección de la fuente original de la capa)
    552283.8551724179415032,4798033.7175342505797744 : 
    565865.8551724179415032,4807406.7175342505797744
Banda 1
    Número de banda 1
    No hay estadísticas
Todavía no se han recogido estadísticas
Banda 2
    Número de banda 2
    No hay estadísticas
Banda 3
    Número de banda 3

I'm stuck with this. I have 2 GeoTIFF (one for the 'u' and one for the 'v' component) and each one has 96 rasters representing 1 hour each. I can't figure how can I make the 96 layers, would anyone help me out?

I'm not quite sure of what the vector field animation is representing so sorry in advance if my question is too silly:

Could I use these scripts to draw an animation of position time series like:
t1: lat1, lon1, speed1
t2: lat2, lon2, speed2
...
tn: latn, lonn, speedn
?

All the best

Uncaught (in promise) TypeError: Cannot read property 'addLayer' of null
at NewClass.addTo (leaflet.canvaslayer.field.js?3562:58)
Why?Is there something missing?

After adding a layer built on vector of two asc files based u,v fields, attempt is made to remove the layer from the map, but the d3.timer for animation remain looping over, complaining that latlon point refers to null.
L.CanvasLayer.VectorFieldAnim.js:122 Uncaught TypeError: Cannot read property 'latLngToContainerPoint' of null
at i._drawParticle (L.CanvasLayer.VectorFieldAnim.js:122)
at L.CanvasLayer.VectorFieldAnim.js:109
at Array.forEach ()
at n (L.CanvasLayer.VectorFieldAnim.js:108)
at L.CanvasLayer.VectorFieldAnim.js:52
at Mn (d3.v4.min.js:2)
at Tn (d3.v4.min.js:2)

Any pointers here?

thank you.

I wonder if it could be possible to integrate in your library the management of the longitude wrapping. Indeed, some input data grid are often specified in range [0, 360] and not [-180, 180]. One might think it is the responsability of the calling code to setup data according to your underlying model however it can be tricky because this means you have to switch all the values in the data array, which leads to performance issues.

As I've already managed something similar (look at https://github.com/weacast/weacast-core/blob/master/src/grid.js#L98) I can say this does not affect the logic behind the data grid (ie cell management, interpolation, etc.) so it is far more simple to manage this at low-level. However you will have to check the longitude range in each function taking a longitude as input. For example when creating the image in the ScalarLayer you should wrap the longitude according to the underlying bounds of the data grid (i.e. add 360 to negative longitudes if the grid bound is [0, 360] and not [-180, 180]). Leaflet may also have some utilities to do so (e.g. http://leafletjs.com/reference-1.1.0.html#latlng-wrap or http://leafletjs.com/reference-1.1.0.html#util-wrapnum). You will also have to take care to the reverse way, meaning if you create Leaflet LatLng objects from the grid in range [0,360] you will have to wrap longitudes in the range [-180,180].

Let me know what you think about it, I will try to help if required.

Very good work, thanks !

Do you know a workaround in order to avoid the hide/show effect when zooming an image in a Leaflet map ?

For example, with base Layer, Leaflet increase or decrease the current images and when it gets new images, the old ones are smoothly replaced by the new ones.

How can I use transparent color for 0 values?

Following the example example_ScalarField_Geotiff.html, to display bands of a geotiff file I need make a call with the number of the band to display to:

L.ScalarField.fromGeoTIFF(tiffData.response, <bandIndex>);

So, to show 3 bands I need to make 3 calls.

I was rewieving ScalarField.js, and I found that for each call to fromGeoTIFF the file is parsed by geotiff library, the image is read, and all rasters are read (this is an expensive operation, 5s in the browser with my file), but only the raster with the index received via bandIndex argument is used.

So... to display the 3 bands my browser works 15s when the job can be done in 5s.

// Block taken from ScalarField.js
static fromGeoTIFF(data, bandIndex = 0) {

	let tiff = GeoTIFF.parse(data); // geotiff.js
	let image = tiff.getImage();
	let rasters = image.readRasters();
	...
	let zs = rasters[bandIndex]; 
	...
	let p = { ..., zs: zs};
	
	return new ScalarField(p);

I think you should read the rasters once independently of how many calls to fromGeoTIFF are done.

Maybe moving the variable to another scope.
Or receiving more than one bandIndex per call (so the user can gets all the bands with one call).

Hello,I'm so sorry to bother you.I was use your plugin to show the globe current,i download the data from OSCAR,and i use arcpy tool to change file into arcgis ASCII format,but when i use the example to show the data,not all the map covered with currents,only one map layer(i don't know how to express it,if possible i will upload a picture to show you my puzzle) covered wih currents,is there someting wrong with me?

I think it should be cellSize/2

When I use it, console this error

Please correct me if I'm wrong, but as far as I can tell, this plugin must be included via a <script> tag and cannot be easily imported into a modern bundled JS application via standard import/require syntax (i.e. import ScalarField from 'leaflet-canvaslayer-field' or const ScalarField = require('leaflet-canvaslayer-field')). Are there any plans to add this feature? If not, I may be able to submit a PR for this

When unchecking a VectorFieldAnim layer from a layer control, the console shows the following error several hundred times:

Uncaught TypeError: Cannot read property 'latLngToContainerPoint' of null
    at e._drawParticle (L.CanvasLayer.VectorFieldAnim.js:122)
    at L.CanvasLayer.VectorFieldAnim.js:109
    at Array.forEach (<anonymous>)
    at n (L.CanvasLayer.VectorFieldAnim.js:108)
    at L.CanvasLayer.VectorFieldAnim.js:52
    at Mn (d3.v4.min.js:2)
    at Tn (d3.v4.min.js:2)

Is some asynchronous particle calculation not stopping after removing the map?

Hi,
I am developing a new controller for playing/pausing multi-layer geotiffs. The initial motivation is to display "animated" precipitation products, but it certainly can be used for other purposes. I would like to ask what you all think about including this controller to the main project repository - i.e.: does it fit the scope of the project? could it be useful?

It can be accessed here (takes a few seconds to load - probably I should use a smaller tiff file).

If you find it is considered useful and of general interest, I would be glad to PR it when I have it in a more stable and customizable state (and would also include a nice gif example for the main README.md).

PS: I am just starting to contribute to open source projects. I apologize if this (opening an issue) is not the appropriate way to suggest new features.