Map Tiling Issue (or perhaps feature request)

[Craytor]

I'm not sure if this is a bug, or just an overlooked possibility, but is it possible to have the map continuously tile data. For example, on the image attached, GFS data is loaded in but the map only displays the "tile" once.

In general usage, I believe everyone would agree that it should continuously tile side to side. Additionally, if you try to zoom in on a specific part within the US, the tile disappears from the screen.

An example of how I am displaying this is here:

const grid_tmp = new apgl.PlateCarreeGrid(1440, 721, 0, 90, 360, -90);

const resp = await fetch('tmp.dat');
const blob = await resp.blob();
let data = new Float32Array(await blob.arrayBuffer());
data = data.map(el => { return (el - 273.15) * (9 / 5) + 32; });
console.log('tmp grid data: ', data);

const tmp_field = new apgl.RawScalarField(grid_tmp, data);

const filled = new apgl.ContourFill(tmp_field, { 'cmap': apgl.colormaps.pw_t2m });
const raster_layer = new apgl.PlotLayer('tmp', filled);

const svg = apgl.makeColorBar(apgl.colormaps.pw_t2m, {
    label: "Temperatures", fontface: 'Trebuchet MS',
    ticks: [-40, -50, -30, -20, -10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
    orientation: 'horizontal', tick_direction: 'bottom'
})

return { layers: [raster_layer], colorbar: svg };

Is this expected behavior or is this a "bug"? Any possible work arounds?

Additionally, I noted that in this example, the bottom of the GFS output doesn't reach the bottom of the map. I'm not sure if that's a problem on my end or a problem with map tiling.

Overall, this package is amazing! Great work so far. The speed and features of this package are incredible, can't wait to see where it goes.

[tsupinie]

Yeah, this is something I knew would be a problem, but I figured I'd wait until I or someone else had a need for it to fix it. Looks like that time has come. For repeating the plot around the different copies of the globe, I have some ideas, but I'll need to play with them. Not sure why the plot doesn't go all the way to bottom of the map, though.

As a workaround in the meantime, you could basically create three separate layers, each with a copy like so:

const grid1 = new apgl.PlateCarreeGrid(1440, 721, -360, 90, 0, -90); // Left copy
const grid2 = new apgl.PlateCarreeGrid(1440, 721, 0, 90, 360, -90); // Center copy
const grid3 = new apgl.PlateCarreeGrid(1440, 721, 360, 90, 720, -90); // Right copy

const tmp_field1 = new apgl.RawScalarField(grid1, data);
const tmp_field2 = new apgl.RawScalarField(grid2, data);
const tmp_field3 = new apgl.RawScalarField(grid3, data);

const filled1 = new apgl.ContourFill(tmp_field1, { 'cmap': apgl.colormaps.pw_t2m });
const filled2 = new apgl.ContourFill(tmp_field2, { 'cmap': apgl.colormaps.pw_t2m });
const filled3 = new apgl.ContourFill(tmp_field3, { 'cmap': apgl.colormaps.pw_t2m });

const raster_layer1 = new apgl.PlotLayer('tmp1', filled1);
const raster_layer2 = new apgl.PlotLayer('tmp2', filled2);
const raster_layer3 = new apgl.PlotLayer('tmp3', filled3);

But that's obviously far from ideal, as it means putting three copies of the data on VRAM, and that's non-trivial for a 0.25-degree GFS grid.

[tsupinie]

Okay, it was a combination of easier than I thought and I had some break from family time. I have some modifications in a branch that should fix the tiling. When you get a chance, give it a try to see if it works for you.

[Craytor]

Sorry for the delay, just got back to working on this. It does work much better. However, if fully zoomed out, the user may see a missing map tile on the far-far left. Again, you have to be fully zoomed out and I don't think this would be a typical scenario. Regardless, nice work on this. Please let me know if you need anything else tested, I really like this project and am excited to see where it goes.

[tsupinie]

Okay, I added another call to draw the data again to the west, and I figured out the poles. This should be fixed in the develop branch now.