Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

disable animation #116

Open
shinnobi opened this issue Dec 16, 2022 · 6 comments
Open

disable animation #116

shinnobi opened this issue Dec 16, 2022 · 6 comments

Comments

@shinnobi
Copy link

shinnobi commented Dec 16, 2022

Hi !

i need to load multiple file tiff (24 file) then i play it (with interval 2s then next to next tiff )
my approach is:

  1. try pre-loading 24 tiff file to GeoRasterLayer
  2. then add/remove layers to the map when event interval

it's work so good but there is some animation when add new layer, how can stop it,

///add to georasterlayer
var layer = new GeoRasterLayer({
        pane: isRadar ? "pane460" : "pane450",
        georaster: georaster,
        opacity: 1,
        pixelValuesToColorFn: function (pixelValues) {
          var pixelValue = pixelValues[0]; // there's just one band in this raster
          if (pixelValue === 0 || pixelValue === -999.0) return null;
          var color = isRadar
            ? radar(pixelValue).hex()
            : satellite(pixelValue).hex();
          return color;
        },
        resolution: 256,
      });
      return { filename: filename, layer: layer };
    }


////add to layer group
    this.sateLayer.clearLayers();
    this.radarLayerGroup.clearLayers();
 if (satelliteLayer.layer) {
      satelliteLayer.layer.addTo(this.sateLayer);
      satelliteLayer.layer.setZIndex(1);   
    }

2022-12-26-11-28-44

@DanielJDufour
Copy link
Member

hi, @shinnobi . unfortunately, I'm not sure I can be of much help, but I'll do my best! Have you tried using a custom pane and then hiding/showing the map pane? It might help avoid some of the animation you are referencing. I'm not sure though. Here's some information about custom panes:
https://leafletjs.com/examples/map-panes/

@shinnobi
Copy link
Author

@DanielJDufour Thank you for your answer i just provide example gif. When i click to layer control i want this layer only show when fully load ( disable animation)

@DanielJDufour
Copy link
Member

Hi, @shinnobi . Thank you for the extra details. I think I understand your problem now. Unfortunately, I don't have a clear solution to this issue. GeoRasterLayer is built on top of Leaflet's GridLayer and thus the mental model is about creating and displaying tiles as they are available. However, I love hacky workarounds, so let's try!

You might be able to pass in a really large tile size when creating GeoRasterLayer. This will essentially represent one view of the map with one tile. For example:

new GeoRasterLayer({ georaster, tileSize: 256 * 4 })

Does that work for your use case?

@DanielJDufour
Copy link
Member

Here's link to the Leaflet Documentation on tileSize: https://leafletjs.com/reference.html#gridlayer-tilesize

@shinnobi
Copy link
Author

shinnobi commented Jan 4, 2023

@DanielJDufour thanks you for your solution, setting larger title size makes animation not showing but it makes my layer so terrible :(

@HairyFotr
Copy link

Increasing the resolution works to remove the blockiness that appears with larger tiles, but then rendering may become slow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants