Choropleth Transitions in Leaflet

Fancy effects for your map applications with CSS is a series of CSS tricks which you can apply to Leaflet maps. Most of the CSS effects in the series are applied to the map when the user pans or zooms the map and (in my opinion) don't really add much to the user experience.

However I do really like the first example, which uses Fill Color Transitions, to create a nice transition effect between two different choropleth layers.

See the Pen emqoOX by moklick (@moklick) on CodePen.

As you can see in the embedded map above the CSS fill transition creates a nice fading effect to the choropleth polygons when the user switches from one choropleth layer to another. It is a rather nice looking effect and well worth the effort of adding only one line to your style sheet.