How to create simple effects for map applications with CSS

Moritz Klack

@moklick

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

Color scale taken from colorbrewer

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

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

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

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

CSS Rules:

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

Scaling

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

CSS Rules:

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

3D Rotating

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

CSS Rules:

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

Ok this goes too far

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

CSS Rules:

.leaflet-tile {
  filter: blur(10px);
  opacity: 0;
  transform: rotate(0deg) scale(0);
}
.leaflet-tile.leaflet-tile-loaded {
  filter: blur(0);
  opacity: 1;
  transform: rotate(360deg) scale(1);
  transition: 0.8s 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.

If you have any questions just leave a comment or contact me via twitter.