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

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 & open it in QGIS

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

👉  Download the ZIP file with the Shapefile.

We unzip it, then open it in QGIS. To do so, we can just drag & drop the files into the QGIS interface. It should look like this:

2

Create buffer shapes inside your map

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

We can repeat the process as often as we want and with different distances. We chose to create three new maps, that all display in the Layer Panel in the bottom-left with the name "Buffer":

3

Subtract the buffer shapes from the original shapes

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

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

To do so, we "subtract" each of the buffer polygons we created from the original area using the " Vector > Geoprocessing > Difference" tool. We choose our original map as the Input layer and one buffer after the other as the Difference layer. After repeating that for all buffers, we see three new layers in our Layers Panel called "Difference". 

4

Combine all "Difference" layers

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

We also copy the second "Difference" layer on this third "Difference" layer, to now have all of the subtracted shapes together on one layer. Let's import this map. We right-click on this layer and choose " Save as..." and then "GeoJSON". We do the same with the original map. 

5

Import & style the GeoJSON in Datawrapper

Depending on the size of our two GeoJSON files, we might want to simplify it a bit in  Mapshaper.org. To do so, we import our GeoJSON, then click on "simplify" and move the slider until we 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 our "Difference" shape, we want to make the outline invisible and just use a fill. For the original map, we can use both:

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

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

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

Still need help? Contact Us Contact Us