By: Jonni Walker
The “glow effect” is a cartographic technique, pioneered by John M. Nelson, and is often referred to as the firefly technique. Studio makes it easy to create this technique, so I wanted to show off a few tricks and tips for making your data glow.
The glow effect can be applied to any data type. I recently applied the glowing effect to depict Brown Pelican flight paths on the south coast of the US.
I also used this effect to map all major under water communication cables, you may notice that the line thicknesses are data driven! And of course you can have data driven circle sizes too.
Here is a step by step of how I use Studio to make this data glow
I am absolutely fascinated by bioluminescence in nature and had wanted to create a data visualisation for a long time (here it is below using Mapbox Studio). I found some appropriate data sets and had a sudden flash of inspiration. What better cartographic technique to use than the firefly effect!
The principal behind this technique is a really simple one but can be more effective when applied in the correct context. In this example I am using three point layers, increasing in size, blur and opacity, below are the steps on how I did this in Studio:
Step 1
I have uploaded my data to Studio and styled the data as a circle. Here you can see all those white circles in the South East of Australia.
Step 2
I have called this layer “Glowy things 1”. This will help to show how the layering works (explained below). I am going to style this layer by giving them a size of 10 pixels, a lovely bright, neon green for the colour, a blur of 3 and an opacity level of 0.4.
Step 3
Here comes my favourite trick! and where the magic happens. Duplicate the layer again and name it, “Glowy things 3”. Give the circle a radius of 1, a colour of white, zero blur and opacity 1. This will now give our circles a very bright, vivid white centre point.
You can also duplicate more layers to really emphasise the glow, with further layers of size, greater blur and a lower opacity. Give it a try and experiment with how glowy you can make something look using this technique.
Line Styling
Exactly the same technique can be used for styling your lines. Create varying line thicknesses, at low opacities and give them some blur, and then create a thin white with no blur and opacity 1. Always remember to bring the thin, white line to the top in the layer hierarchy as explained above.
I would love to see how you might use these techniques, share your glow. #BuiltWithMapbox
Jonni Walker is a Cartographer at Mapbox based in the UK. He’s doing a series of posts this summer on his cartography called “Painting with Mapbox Studio”. He’ll share the principles used in his stunning designs and some tips for using the techniques within your projects.
Maps feature data from Mapbox and OpenStreetMap and their data partners.
Glow Effect: the firefly technique was originally published in maps for developers on Medium, where people are continuing the conversation by highlighting and responding to this story.