Skip to content

Instantly share code, notes, and snippets.

@wknowles
Last active December 31, 2017 17:27
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wknowles/6bbdf040a2dd5231798a7ffffe9e0e77 to your computer and use it in GitHub Desktop.
Save wknowles/6bbdf040a2dd5231798a7ffffe9e0e77 to your computer and use it in GitHub Desktop.
a guide to creating coastal vignettes for use in web maps. Using Natural Earth data, GDAL and QGIS.

Creating coastal vignettes for web mapping.

Summary

To start with I downloaded Natural Earth 1:50m land shapefile. This was then reprojected to Web Mercator / EPSG:3857. I ran a series of buffers on the reprojected shapefile within QGIS. These were then combined, exported to Mapbox and styled. The final map turned out like this:

coastal vignetts

View the full web map on Mapbox.

Required Tools

  1. GDAL - I'm on a mac, using homebrew and so ran brew install gdal.
  2. QGIS
  3. A MapBox account - only required if you want to display the map on the web.

Prepare Natural Earth Data

Natural Earth data comes projected as WGS 84 / EPSG:4326, but I want it in Web Mercator / EPSG:3857. To get to this I need to do two things, clip the data to cut off some of the area around the North and South Poles. This is because the Mercator projection theoretically extends nortwards and southwards to infinity. We need to cut off the poles to allow the map to render properly. The clipped file needs to then be reprojected.

To make things a little easier and to avoid the file system becomeing to clogged with files, I wrote a quick shell script to clip the shapefile, reproject, and then delete un-needed files. The script should be placed in the expanded zip folder containing the shapefiles downloaded from Natural Earth.

#!/bin/bash

base_file='ne_50m_land' # change this to the filename of your shapefile

echo "clipping shapefile ${base_file}.shp"
ogr2ogr -f "ESRI Shapefile" ${base_file}_clipped.shp $base_file.shp -clipsrc -180 -85.06 180 85.06

echo "setting ${base_file} to web mercator projection"
ogr2ogr -t_srs EPSG:3857 ${base_file}_clipped_3857.shp ${base_file}_clipped.shp

echo "cleaning up redundant files"
rm ${base_file}.*
rm ${base_file}_clipped.*

We now have a directory containing shapefiles of natural earth 1:50m land features, reprojected to web mercator.

Creating buffers in QGIS

Open the clipped and reprojected shapefile in QGIS. The buffers can be done manually but there is a wonderful plugin that has been created for creating multiple buffers, allowing the distance between them to be set. Go to the plugins menu and click Manage and Install Plugins. Search for and install the "Multi-distance Buffer" plugin.

The Multi-distance Buffer plugin is now avaliable in the Vector Menu. Click it and you will be presented with a number of options. In the buffer distance box enter the distance you want your first buffer to be. The measurement units of web mercator are in meter so for a 100km buffer, enter 100,000. Click Add and repeat for each buffer you want to create. Give a title for the output layer or just use the default "buffer". Click OK to start. This will probably take awhile depending on the speed of your computer. Once complete click "Close".

The buffer will now be shown above your original layer. You could now further style this within QGIS but I chose to export to Mapbox and style it there.

Next Steps

I would like to find a way to get the buffers to expand and contract as the map zoom increases and decreases. I have a feeling that is not possible with the above method. I imagine it would have to be done programmatically and on demand. I have been looking into D3 and wondering whether it could be possible using that. If you have any ideas or could point me in the right direction I would be eternally grateful and shower you with heart emoji 💖 💗!

Contact

If you have any questions or would like some help please get in touch. I have been really encouraged and learnt some great things from the truly brilliant mapping community (you people - yes you reading right now!) and I am keen to give something back.

Tweet me @_williamknowles or email me - will AT hollyandwill DOT com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment