In this post I will show you how to create some effects that let your maps appeal more interesting/fancy/weird.

These effects are just proof of concepts, but they could help you to attract more attention to your maps.

The examples are created with Leaflet but they should work with other libraries too.

Fill Color Transitions

When we create maps, we often create colored areas to visualize some data. Sometimes we have buttons or sliders to change these colors. If that's the case, we can improve the appearance of our map with a little transition between these colors.

Example with transitions

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

Color scale taken from colorbrewer

You can easily create this transitions with the following CSS rule:

.leaflet-container path { transition : fill 0.75 s ; }

This is a CSS3 transition on the fill property of the paths inside the leaflet container. I think it's a great way to let the user know that some changes are happening in your application.

In comparison an example without transitions

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

Color scale taken from colorbrewer

Loading Tiles

When we load tiles with Leaflet they get a new class called tile-loaded when the tile is loaded. We can use this class to show some nice effects like the following ones. Don't take this too serious. I am not sure if I would use them in an application ;)

Blurring

You have to zoom or drag the map quickly to see the effect

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

CSS Rules:

.leaflet-tile { filter : blur ( 10 px ) ; } .leaflet-tile.leaflet-tile-loaded { filter : blur ( 0 ) ; transition : 0.6 s all ease-in ; }

Scaling

You have to zoom or drag the map quickly to see the effect

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

CSS Rules:

.leaflet-tile { transform : scale ( 0 ) ; } .leaflet-tile.leaflet-tile-loaded { transform : scale ( 1 ) ; transition : 0.6 s transform ease-in ; }

3D Rotating

You have to zoom or drag the map quickly to see the effect

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

CSS Rules:

.leaflet-tile { filter : blur ( 10 px ) ; } .leaflet-tile.leaflet-tile-loaded { filter : blur ( 0 ) ; transform : rotateX ( 360 deg ) ; transition : 1 s all ease-in ; }

Ok this goes too far

You have to zoom or drag the map quickly to see the effect

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

CSS Rules:

.leaflet-tile { filter : blur ( 10 px ) ; opacity : 0 ; transform : rotate ( 0 deg ) scale ( 0 ) ; } .leaflet-tile.leaflet-tile-loaded { filter : blur ( 0 ) ; opacity : 1 ; transform : rotate ( 360 deg ) scale ( 1 ) ; transition : 0.8 s all ease-in ; }

Au revoir!

All this is great fun but keep in mind that these transitions may affect the performance of your application so think twice before using them in production.