Cartographer's Toolkit

Map Making Tips, Tricks, and Inspiration

Open Discussion Concerning the Best Way to Manage Complex Layer Styling

February 16th, 2019

I was ranting earlier this week about project organization. It’s the same old same old. Even in the days where you used ArcView 3.2 (right, because everyone is as old as I am) there were project organization issues. Where do you put data that is shared between projects and where do you put the data that you computed specifically as an intermediate to some final dataset in just one project? We also had the more cartographically centered project tidying but not as much. We didn’t have as many datasets or features to work with, as a general rule, as we do now so an ArcView project would have at most maybe 20 layers and those were easy enough to sort out.

Now I work with OpenStreetMap data with innumerable features and feature combinations in a tiled environment using Fresco or Maputnik and the layer list can get very very very long. There are ways to lessen the length of the layer list, using Mapbox GL expressions to combine things, or using variable names in the icon properties, for example. However, sometimes it is easier to keep them separate so you can see, at a glance, that this is where you’ve put the styling for the pagoda icon so this is where you would need to make it bigger or smaller. Speaking of pagodas, this is where I show off the pagoda icon I just styled up in Inkscape:

pagoda

I mean, this is what life is about. (But honestly I love styling things like this.)

If we talk just about hydro lines you can really see what I’m talking about. Within the general class of features referred to in my data as “hydro lines.” I’ve got to style rivers, streams, damns, and dikes in different ways. So far so easy. But I just added in a new class that I had forgotten about earlier: canals. Then there came the realization that canals can be on the surface or underground. Guess what? They can also be intermittent or perennial. Canals are usually portrayed with a casing just like roads so that adds yet another layer of complexity. Remember your 5th grade combinations in math? Once we multiply all these potential outcomes together we get roughly 200 ways to style a canal. Or something like that. (Ok, 6.) But that’s just for canals. Now you add in those variables for the rivers and streams and you get a lot of styling layers that go under the main heading “hydro lines.”

Now try tweaking the size of one of those hydro lines layers. And then try to figure out how it fits into the overall hydro line picture so that you know what else needs to be tweaked. If I increase the width of the intermittent canal I should also increase the width of the perennial canal and so on and so forth.

One way to keep track of all of this is with a spec sheet. These are brilliant and have been used by Mapbox and others in their work. Graser and I discuss these a bit in QGIS Map Design. Here’s our example of a portion of one:

labeling_hierarchy_spec_old

However, they are best to create at the end of a project to illustrate components rather than during the design phase, where one would need an automated process for creating it to keep it always up to date.

On twitter this week, when I was espousing the idea of a Toyota Production System type of process for maps (merely musing, mind you, there isn’t any that I know of at this time), @danrademacher mentioned that he’s used an auto png renderer to spit out test places at many zooms and locations so that things can be examined as you go. @mojodna mentioned that github.com/stamen/vignette was used for this. This doesn’t help organize layers in a project but it does help quality control by dint of providing easy to view comparisons between places and iterations.

@emacgillavry brought up an oldie but goodie: the ScaleMaster spreadsheets by @ColorBrewer. This is more what I had in mind, and I’ve used them successfully for a previous project that used less data. However, I have yet to figure out a way to adequately spreadsheet a list of layers, sublayers, subcategories (underground/overground, intermittent/perennial), zoom levels, casings vs. overlays, and widths. This is what should all be kept track of. At this point I kind of throw my hands in the air and say, hey what about creating a super-complex radial diagram? Something akin to Nadieh Bremer’s work here: https://www.visualcinnamon.com/portfolio/olympic-feathers. Anyone up for the challenge? 😀 (All automatically generated of course.)

Edited to add:

What about a button in the software that “links” certain datasets together programmatically? When one width is increased, they are all increased commensurately. When one width is decreased, they are all decreased commensurately. When you want to change the width of one without changing the others, you unlink them first.

Using Seamless Images in Cartography

January 2nd, 2019

 

Occasionally the cartographer comes across a need for a seamless image, seamless pattern, or seamless texture. A seamless image is one that, when duplicated and set side-to-side with the original, creates a larger image that does not have any visible boundary between the two smaller images. They are also called repeating patterns.

Here are three examples of this in action.

 

New Year’s Map Balloons Image

Vector seamless pattern of colorful

I searched for the above image on istockphoto with the keywords “seamless balloons.” Try searching for seamless images yourself. Notice that the balloons on the sides of the image are not whole. They don’t become whole balloons until the image is pieced together like so:

SeamlessBalloons

Here’s a demonstration of how this kind of image is useful in a map. This demo is in QGIS. I start by showing you what happens when you use a non-seamless image file and then finish with the seamless image from above so you can see the massive difference in visual quality that results:

 

 

 

A Seamless Orchard Pattern, and Others

Repeating white space is fine in some patterns. Here we have a very simple pattern piece made with just one image element surrounded by white space. For this demonstration the image is enlarged and the white space rectangle and the floret image are grouped together. It creates a uniform pattern when tiled:

OrchardPattern

This was used in a vector tile implementation of a complex map style. Implemented on the map, this seamless pattern appears like this:

image10

 

If a pattern with an offset is desired instead, a somewhat more complicated pattern must be created. If you are adept at graphic software like Inkscape, you can create these yourself with special attention to pixel size ratios, x and y coordinate locations, and clipping to ensure the separate components are formatted with the exact spacing required. Here I demo a different Inkscape tool than the demos above where I just copied and pasted: the Edit-Clone-Create Tiled Clones tool. It is the same concept, we are repeating the original image, but it is a lot faster.

 

bluedots2

 

 

Note that you can also create linear patterns for things like hedgerows or power lines. Here is a hedgerow symbol:

 

hedgerowpattern

 

Remember, the image file you give to your map software will be just that initial piece of the pattern. The software will take care of the tiling for you. Here we see the hedgerow pattern in use as part of a Mapbox GL JS style. 

 

hedgerow

 

Hatch Textures

Last, we have hatching textures. These are used frequently in cartographic design and so should be part of our toolkit. Creating a seamless hatch fill is a decidedly more difficult task than the others because of the line angles. It will look something like this which may be counter intuitive. This is zoomed in for demo purposes. The original hatch png is only 6px x 6px.

redhatch

 

Here you see how it fits together:

 

hatch

 

It pays to have one of these in SVG format because it is likely that you’ll want to make changes to the colors and transparencies. For example, let’s say you’re wanting to use a diagonal hatch fill to denote natural areas in an interactive world-wide map. Many natural areas span both land and water features so it can be useful to create a semi-transparent hatch fill or a hatch fill with no background color at all to cover these areas. In this way the reader can see where the natural area is covering water and where it is covering land. In other cases you may want a non-transparent background fill, especially for smaller area features.

Here is that same hatch fill pattern shown above, except in different colors to identify military areas in a vector tile implementation of the Humanitarian OpenStreetMap style. This military area is covering some water but the hatch is non-transparent:

hatch2

 

Here, that same little sprite (a png file created with the svg and made into a sprite) was changed to white diagonal hatches with no background color in order to allow the land/water boundaries to show through. This is in our camo style vector tile demo:

camohatch

 

While it is true that GIS software comes with pre-rendered seamless image patterns for your use, there may indeed come a time when you need to create your own. What a good tool to have in your toolkit!

 

 

Happy New Year!

January 1st, 2019
Happy New Year

Happy New Year!

Psst: Want to know how the above map was made? It’s done in QGIS with Natural Earth land data styled with a seamless raster fill of balloons from an istockphoto jpeg added to a Natural Earth ocean raster (OB_50M to be specific) that is colorized with a blue hue. All in the Robinson projection.

 

 

2018 was the craziest, busiest year around here! PetersonGIS did a lot over the course of 2018 including publishing the updated version of QGIS Map Design, creating lots of vector tile map designs, writing a few blog posts, working with salmon field databases, creating map designs that are almost identical in both QGIS and ArcMap, creating ever-dreaded GeoServer SLDs, and from time to time tweeting some very inspired map puns.

 

To wrap up the year, I decided to create a twitter recap with some of my favorite and most favorited tweets from 2018 plus a sprinkling of bad puns and song mangling.

 

PetersonGIS 2018 Twitter Recap!

 

Announcing the Preview Version of QGIS Map Design Second Edition

September 10th, 2018

QGIS Map Design Second Edition

Graser and I are pouring our hearts and souls into the newest edition of QGIS Map Design to make sure it is ready for the upcoming release of QGIS 3.4. You can already buy it in preview form (ack!) for a discounted price as long as you realize that some things may change as we go into feature-freeze for the release and get feedback on the book’s “recipes.”

In case you aren’t familiar with the format of this book, we feature real-world map designs with the latest styling advances along with how-to instructionals for each. We call these recipes.

This edition features a lot of new maps. I tried to count them but the question became “what constitutes a map”? Before y’all get existential on me, what I mean is, we have three recipes that build on one another to make a parks map, for example, so is that one new map or 3 new maps? In the interest of marketing I added those up as 3 new maps. :) So with that explanation in mind, we have approximately 14 updated designs and 23 completely new maps in this book. Obviously all the text and screenshots have been updated to the the 3.4 release.

I’m biased but at $22 this thing really is a bargain. The first edition of this book was LocatePress’s best seller, so there are obviously plenty of people using QGIS and probably a lot more now that release 3.4 is about to come out. But even if you don’t use QGIS this book showcases some great map design techniques that you can implement in other software.

You get the digital copy now and all edits as they come (sometimes daily) if you want them. And of course the finished digital copy. The hard-copy will be available through the usual online outlets in early November 2018.

The preview is only available at LocatePress. Click Here.

A few of the maps from the book:

bookpages

—————————–

QGIS 3 Beginner’s Basics Tutorial

July 24th, 2018

Unicorn Map

New to QGIS? Want to learn a few basic techniques? Follow along in the making of this Lisa Frank-esque map to see how it’s done.

Download QGIS if you don’t have it already. Right now we’re on version 3.2, which is what I recommend to download. If you see anything different between that and what I’m showing here let me know, I’ve got 3.3 running for this (via the osgeo network installer, where you can get the very latest development version). If you have an older version of QGIS already running you can probably use it but never fear, you can install multiple versions on the same machine and they’ll run just fine.

Use Natural Earth data for this project. I’ll provide the links to the appropriate datasets as we go. Unfamiliar with Natural Earth? This is the dataset to use when designing maps from world-scale to admin 1 (state)-scale. Note that depending on where you reside and your world-view country and state boundaries could be argued differently. It doesn’t matter what dataset you use, always scrutinize it for accuracy and usefulness for your purpose.

Add the GRAY_LR_SR_OB raster dataset from Natural Earth to an empty QGIS project. Look for the one titled “Gray Earth with shaded relief, hypsography, and ocean bottom, medium-sized.” When you download the data file you’ll see it is made up of several files. Just drag and drop the large TIF file onto the QGIS project to add it.

 

Drag and drop this TIF file

After adding it you see it’s a basic gray hillshade, which is pretty nice as-is. Change the projection to something more suitable for the continental U.S. such as EPSG: 102003. Find the button to do this at the bottom right corner of the QGIS window. Click it and the CRS tab from Project Properties appears, where you can type the code into the filter, select the projection, and click OK.

 

Change the Projection

 

Now the map will look like this:

 

Unmodified hillshade

 

But for this project we want it to be purple with some other modifications. Open the Layer Styling Panel by right-clicking in the toolbar area at the top of the QGIS project and selecting Layer Styling Panel. It will appear on the right side of the project window. This is where you do most of the styling for each layer you add to the project. It auto-updates as you go and keeps a history of edits so that you can return to a previous design state if you desire. In this panel, make the following changes to the hillshade layer:

 

Styling settings

 

The purple color used here is #e19aeb, which you put in the HTML Notation box after clicking on the color drop-down and clicking Choose Color. This kind of color code is also called HEX. You also need to change the opacity of this hillshade so it is even lighter. We don’t want it to overwhelm the unicorns, after all. :) Use the Transparency tab in the Layer Styling Panel for that, like this:

 

gray_transparency

 

The map should now look like this:

 

Modified hillshade

 

Now add ne_10m_admin_0_countries_lakes to the project.

(If you’d prefer adding in this vector layer and the next 3 as a single geopackage that contains all the Natural Earth data, which is recommended if you’ll be doing some experimenting as this way you’ll have more data, use the Natural Earth Starter Kit geopackage, which you also drag-drop onto the QGIS project window and select data from the dialog that pops up.)

This countries layer will mask the U.S. so the unicorns will show up better. Use the Query Builder to filter the data by right-clicking the countries layer, going to the Source tab, and clicking the Query Builder button, entering in the filter “NAME” = ‘United States of America’, which will then appear as shown:

 

U.S. Query

 

Using the Layer Styling panel with the countries layer active in the Layers list, change the fill color to white and the opacity to 70%. The map will now look like this:

 

Countries Mask

 

Now we do much the same thing with the ne_10m_ocean layer, except that we use a dark gray border line and only a 60% opacity, with no filter. The project will then look like this:

 

Ocean Styling Settings

 

Next, add the ne_10m_admin_1_states_provinces_lakes file to the project and change the Fill style to No Brush and set the Stroke color to #6f4486. Now we’ve got:

 

States Styling

 

We can’t forget to put in some color for the Great Lakes. To do this, add the ne_10m_admin_1_states_provinces_lakes layer and style it with a blue fill color so that it looks something like this:

 

Lakes Styling

 

Duplicate the ne_10m_admin_1_states_provinces_lakes file via right-click as shown:

 

Right Click Options

 

Rename the new duplicated layer to something like “states” (right-click, Rename Layer) and move it to the top of the layer list (drag). Right-click this layer again and choose Open Attribute Table. Click the Toggle editing mode button, which looks like a pencil, then click the New Field button and add a new integer field called rainbow. These buttons and the new field settings are shown here:

 

Add a New Field

 

Click OK and now you have a new field added to the data table. We’ll use this field in a bit. Click the edit button again to save the changes.

The unicorn icon is from The Noun Project, where I paid a couple of bucks for a royalty-free version. When you get an SVG icon for use in QGIS from somewhere other than QGIS’s built-in set of icons, you’ll notice that you can’t change their color. But for this map we definitely want to have unicorns of different colors. So we have to modify the SVG file. If you want to skip this step, simply choose an icon from the set that comes with QGIS. Otherwise, download an icon that you want and then open up the SVG file in a text editor and add the following bit of code at the beginning of the path tag (note that if there are multiple paths in the file you need this code in every path tag).

fill=”param(fill) #FFF” stroke=”param(outline) #000″

The file will look something like this:

Parameter Snippet

This is just a snippet, of course, the file is much longer.

Now that the SVG file has parameters for the fill and stroke in it, save it. To add it to the project, first what we’ll do is simply add it in the same style for all the states by using a centroid fill, SVG marker in the styling settings. Make sure the drop-down in Layer Styling is set to Single symbol, click on the Simple fill box (yours will have a different color as it just chooses a color at random):

simple fill

Once you’ve clicked Simple fill you’ll see that there is a drop-down next to Symbol layer type. You can change this drop-down to Centroid fill. Notice the map now has a centroid dot for every state. We want to use our icon instead of these dots so now click where it says Simple marker and change the new drop-down that says Symbol layer type to SVG marker. The dot turns into a question mark. It’ll look like this:

SVG Marker not set

Load your icon by using the ellipsis button at the bottom of the Layer Styling panel and browsing for it.

Browse for SVG File

Right now the map has a whole lot of symbols.

Unicorns

Select the Centroid fill part of the symbol and un-check the box next to Draw point on every part of multi-part features. That should de-clutter the map.

Turn off Multi-part

 

Zoom in to the western continental U.S. and use the selection tool to select some of the western state icons.

 

The Select Tool

 

Right-click to open the attribute table for this layer again and, again, click the edit pencil button to toggle editing to on. In the drop-down field menu that appears, select the new field called rainbow and put a “1” in the box. Then click Update Selected. This assigns a “1” in the rainbow field for the points that we just selected. Go ahead and check the data to see that it happened.

 

Updating Selected Records

 

Go back to the map, select some more icons, and update the rainbow field to “2.” Continue like this until you have some icons set to 1, 2, 3, 4, and 5. Each of these numbers represents a different color.  Toggle the editing button again to save the edits.

When that’s done, go back to the Layer Styling panel for the layer and change the renderer from Simple fill to Rule-based. It should have one rule already:

 

Double click this rule

 

… if you double-click it you’ll see that the rule has a Centroid fill and SVG marker setting with the custom icon.

 

Rule settings

 

Put “1” for the Label, put “rainbow” = 1 for the Filter, and change the color to red. Then use the back arrow to go back to where the rules are listed (we only have this one at the moment).

 

The First Rule

 

Now we simply copy and paste this rule until there are five rules. On windows just use ctrl-c and ctrl-v or right-click the rule. Change their colors, labels, and filters so that it looks like this:

 

All the Rules

 

Here’s how the project looks now that this is done:

 

Completed Icon Styling

 

Et voilà!

This map was just for fun. Please note that the finished map at the top of the page was further modified in Inkscape, where I created an ellipse and used it as a clipping object, then created a new ellipse of the same size as an outline object set with a drop-shadow filter.

While this was a fairly meaningless map in the sense that it has no real-world thematic meaning, I hope it served the purpose of adding some fun to a beginning learning experience.

If you’d like to learn more advanced map techniques with real-world examples, please keep an eye out for QGIS 3 Map Design, written by Anita Graser and myself, due on bookshelves in November 2018. In the meantime, you can explore more QGIS “recipes” in the 1st edition of the book, QGIS Map Design. (Below is an affiliate link that helps support me. Feel free to look at other bookstores like Barnes and Noble, or, as always, ask your local library if they have it or will get it for you.)

————

 

 

 

Cartonotes, random

June 12th, 2018

I’ve been up to my eyeballs in map styling lately. There’s the project for GeoServer that is currently at 18 SLD styles and then there’s the project involving 50+ layers in a mapbox gl js style. Stuff I’m dealing with on a daily basis:

  • Knowing the data inside-and-out. For the two styles mentioned above, there’s a, shall we say, intimacy one must have with the data in order to get anywhere fast. For example, how are the roads broken down by type? Depending on the dataset it will be different. OpenStreetMap data can vary depending on how you’ve downloaded it but in most cases you’ll have motorways, trunks, primaries, secondaries, tertiaries, tracks, cycleways, links and tunnels and bridges. Do not forget to use the tunnel and bridge codes! If you’re styling in a rural area and get those roads looking just fine you may not have even thought that as soon as you zoom over to a place with tunnels and bridges–Manhattan is a great test-place for this–that it doesn’t look the way you want it too. There are differing strategies for those tunnels and bridges. You might use a bolder casing for the bridges and a dotted casing for the tunnels. This is just one example and you should know that I just deleted another couple of paragraphs that went on and on about road tunnels and bridges so you can only imagine all the things one might need to know for all the other data out there. Give yourself a break, it takes back-and-forth exploration to discover all the nuances. Be someone who enjoys delving into things. Also, the term “test-place” is something I would like to propose a clever phrase akin to test-case but specifically used by cartographers. A list of classic test-places and what to look for when you are styling them would be very nice indeed.
  • Knowing the software inside-and-out. I have made many an SLD in GeoServer in my day. By the way, do you know if nausea induced by continous xml scrolling is treatable? Anyway, it only just dawned on me recently that you can combine filters with “in” like this. Previously I would have split these into separate functions with OR between them. Basically the point here is that there always seems to be something to learn that can make code more readable or a style looking better.

 <ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:Function name=”in”>
<ogc:PropertyName>highway</ogc:PropertyName>
<ogc:Literal>residential</ogc:Literal>
<ogc:Literal>service</ogc:Literal>
<ogc:Literal>unclassified</ogc:Literal>
<ogc:Literal>road</ogc:Literal>
<ogc:Literal>tertiary</ogc:Literal>
</ogc:Function>
<ogc:Literal>true</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>

  • You can go in and change the json code for an AGOL database by adding “admin” between the rest and services part of the url. 

There was zero rhyme or reason for this post really, except to keep in touch. And know that whatever you’re struggling with, you probably aren’t alone. And that there are zillions of ways to make maps these days and as a cartographer, the more of them you know, and the more data you know, the better your ability to find the right tool for the right map. And that it is worth it in any case. I see the making of a map as putting together a puzzle. It is difficult, time consuming and at times tedious, but you can’t stop and each time a new piece is found and fit you feel a little bit more whole.

Cartographer's Toolkit

Map Making Tips, Tricks, and Inspiration