Tuesday, June 24, 2014

Neon Lights on the Map


I've recently become enamored with the 'neon' map style that is being used in a lot of mapped visualizations of large data sets. I decided this morning to see if I could create a neon route on a map which actually flickers like a real neon light.

It turns out it is possible by using setTimeout to continuously loop through different colored polylines on the map. Here is my Neon Polyline map (obviously the still screenshot above doesn't show the flickering effect).

In reality the effect is quite annoying so I don't think I would ever use this to highlight a route on a map. However if you set the setTimeout value to one or two seconds you get a slow flashing effect rather than the flickering line. I think that the flashing line is quite effective and could be used to highlight a route on a map.

The neon flickering effect is less annoying when you zoom out on the map. I therefore think it could be used to create a neon flickering marker on a map. Here is a Neon Marker example, which uses a flickering neon style marker to show London on a map of the world.

No comments: