How to create an "inner glow" effect in locator maps

⚠️ This article is archived. You can now create this glow effect directly in Datawrapper. Read our blog post about the vignette feature to learn how.


If you look at the following map, you will see an effect that doesn't come by default in our locator maps. It's an inner glow at the borders of the red area. In this article, we explain how to create this glow. You will need the free, open-source mapping tool QGIS to do so, so go ahead and download it.

1

Download the map and open it in QGIS

The first step is to download a shapefile of the area that the fire covered. You  can find several on the USGS server. For this map, we're interested in the one from November 8th, 2018. You can find a direct link here: 

👉  Download the ZIP file with the Shapefile.

Unzip it, then open it in QGIS. To do so, you can just drag and drop the files into the QGIS interface. It should look like this:

2

Create buffer shapes inside your map

Once you see the map in QGIS, use the "Fixed distance buffer" feature to create multiple smaller maps of your map shape. You can find the "Fixed distance buffer" feature hidden in the "Vector > Geoprocessing" menu. For this map, set the distance to approx. -0.005. (The minus sign makes sure that the second map is smaller, not bigger.)

You can repeat the process as often as you want and with different distances. Here, we chose to create three new maps, which all show up with the name "Buffer" in the Layer Panel in the bottom left corner:

3

Subtract the buffer shapes from the original shapes

You now have three "buffer" maps laying on top of the original map. If you were to use this as it is and adjust the opacity of all four maps to around 20%, the inner part of the shape would be the one with the highest opacity (because all four shapes overlap there) and the outer parts would be the ones with the least opacity (because only the original shape with 20% opacity appears there).  

For the inner glow effect, you want the opposite. The shape should become darker the closer you get to its border. 

To get this effect, "subtract" each of the buffer polygons you created from the original area using the " Vector > Geoprocessing > Difference" tool. Choose the original map as the Input layer and one buffer after the other as the Difference layer. After repeating that for all buffers, you'll see three new layers in the Layers Panel called "Difference."

4

Combine all "Difference" layers

Almost done! The final step in QGIS is to copy all of the new "Difference" shapes into one layer, so you can export them as a single GeoJSON file. To do so, right-click on the first "Difference" layer and click Cmd/Strg+C. Then paste it onto the third "Difference" layer. The layer needs to be in Edit mode. We can enable Edit mode by clicking on the little pencil symbol in the menu space. 

Then copy the second "Difference" layer onto the third "Difference" layer. Now all of the subtracted shapes are together on one layer. You're ready to export this map. Right-click on the third layer and choose " Save as..." and then "GeoJSON." Do the same with the original map. 

5

Import and style the GeoJSON in Datawrapper

Depending on the size of the two GeoJSON files, you might want to simplify them a bit in Mapshaper.org. To do so, import your GeoJSON, then click on "simplify" and move the slider until you start to see obvious simplifications in your map. 

After simplifying the GeoJSON files in https://mapshaper.org a little bit, it's time to import and style them in the Datawrapper locator map editor. To do so, go to datawrapper.de, then "Create a Map" and then click on "Locator Maps."

For your "Difference" shape, you want to make the outline invisible and just use a fill. For the original map, you can use both:

👉 To learn more about how to import area and line markers , visit the article "How to import area and line markers."
👉 To learn more about styling (e.g. fill and outline), visit the article "How to style area and line markers."

And that's it! You successfully created an "inner glow." 

Thanks for following this tutorial, and let us know what topic you'd like to see us cover next.