Skip to main content
Geographic Information Systems

Return to Question

title case; naming; English usage
Source Link
Vince
Vince
  • 20.3k
  • 16
  • 48
  • 65

Approach To Smoothly Transitioning A Large Amountto smoothly transitioning a large amount of GeoJSON Features Stylefeatures' style

I'm working on an interactive leafletLeaflet map with about 1000 geoJSONGeoJSON features. When I click on a one of the menu items on right, iI use a function to style the feature according the values of the active property:

           let toChangeTo = getColor(layer.feature.properties[propName], activeKey, subdivisionDefaultStyle);
           layer.setStyle(toChangeTo);

This is the CSS I use so that the features transition:

  .leaflet-interactive{
    transition: fill .75s;
   }

I've made sure my geoJSONGeoJSON files are as small as possible. I'm wondering if there's a way to change the styles of the features successively, rather than all at once, so there isn't so much lag. Can anyone recommend an approach to make this animation run at a faster fpsFPS?

Below is a demonstration:

enter image description here

Approach To Smoothly Transitioning A Large Amount of GeoJSON Features Style

I'm working on an interactive leaflet map with about 1000 geoJSON features. When I click on a one of the menu items on right, i use a function to style the feature according the values of the active property:

           let toChangeTo = getColor(layer.feature.properties[propName], activeKey, subdivisionDefaultStyle);
           layer.setStyle(toChangeTo);

This is the CSS I use so that the features transition:

  .leaflet-interactive{
    transition: fill .75s;
   }

I've made sure my geoJSON files are as small as possible. I'm wondering if there's a way to change the styles of the features successively, rather than all at once, so there isn't so much lag. Can anyone recommend an approach to make this animation run at a faster fps?

Below is a demonstration:

enter image description here

Approach to smoothly transitioning a large amount of GeoJSON features' style

I'm working on an interactive Leaflet map with about 1000 GeoJSON features. When I click on a one of the menu items on right, I use a function to style the feature according the values of the active property:

           let toChangeTo = getColor(layer.feature.properties[propName], activeKey, subdivisionDefaultStyle);
           layer.setStyle(toChangeTo);

This is the CSS I use so that the features transition:

  .leaflet-interactive{
    transition: fill .75s;
   }

I've made sure my GeoJSON files are as small as possible. I'm wondering if there's a way to change the styles of the features successively, rather than all at once, so there isn't so much lag. Can anyone recommend an approach to make this animation run at a faster FPS?

Below is a demonstration:

enter image description here

Source Link
ANimator120
ANimator120
  • 170
  • 1
  • 8

Approach To Smoothly Transitioning A Large Amount of GeoJSON Features Style

I'm working on an interactive leaflet map with about 1000 geoJSON features. When I click on a one of the menu items on right, i use a function to style the feature according the values of the active property:

           let toChangeTo = getColor(layer.feature.properties[propName], activeKey, subdivisionDefaultStyle);
           layer.setStyle(toChangeTo);

This is the CSS I use so that the features transition:

  .leaflet-interactive{
    transition: fill .75s;
   }

I've made sure my geoJSON files are as small as possible. I'm wondering if there's a way to change the styles of the features successively, rather than all at once, so there isn't so much lag. Can anyone recommend an approach to make this animation run at a faster fps?

Below is a demonstration:

enter image description here