How to Recreate a Map Style

Vanessa Knoppke-Wetzel
GreenInfo Network
Published in
6 min readMar 30, 2022

--

OpenHistoricalMap woodblock style

Style: a distinctive, formal, or characteristic manner of expression or taste
Aesthetic: a set of principles governing the idea of beauty at a given time and place
Aesthetic style: a distinctive or characteristic manner of expressing beauty; the expression or application of human creative skill and imagination
Aesthetic elements: the result of breaking down an overarching style into smaller identifiable aesthetic “building blocks” (elements). Examples: inconsistent linework and texture in the roads on a map; imperfectly shaped circles that are the symbols used to represent cities on a map
Definitions taken from How Technological Changes Defined Pre-1900s Maps

It can feel very overwhelming to try and bring a particular style into a map we are making. Usually, the style and aesthetic are so different than what we are used to building in modern spatial technologies, and so it is not immediately obvious how we can go from one to another.

Recreating a historic style in new technologies, such as the work I did for the OpenHistoricalMap woodblock style, does not require bringing in every aesthetic element of the old style into the new style. While this is a way to completely recreate a style, the reality is that all that is needed to evoke the historic style is to bring in just enough aesthetic elements from the old style. Typically 5–10 distinct aesthetic elements from a style will provide the aesthetic feeling needed to make viewers feel like the “new’ style is similar to the historic style (p 35, 36; or PDF p 39, 40).

But how do we deconstruct a style into its unique aesthetic elements?

Step 1: Break a Style Down into Aesthetic Elements

How do we get the left to look something like the right?

When I break down a style, I first categorize information on the map into general categories such as point, line, and polygon map elements. I also define other categories such as patterns, typography, color, texture, marginalia, and other definable characteristics. I then ask myself “what are distinct characteristics within all those elements?” and find examples of them.

For example, the below highlights inconsistently shaped circles in point and circle features that are meant to be circles or rounded elements:

Stippling in woodblock maps:

Inconsistent line spacing in woodblock maps:

Many more examples can be found on page 44 (PDF p 48) and onward. I pulled the aesthetic elements I used for the OpenHistoricalMap woodblock style from this analysis.

While I scour the map style, I document the distinct characteristics of the aesthetic element by creating both verbal and visual definitions.

Verbal Documentation of Aesthetic Elements

Drafting verbal descriptions of Tim Burton’s aesthetic in order to make a Burtonesque style

When verbally defining an aesthetic element, I choose a word/reference that makes sense to me. What really matters is using words that mean something to you for that particular aesthetic element.

For example, if I notice a lot of stippling happening in a particular map style, I can define the aesthetic element as “stippling”, and define what that means for myself for future reference. Then I don’t need to try and remember what I meant, and recreating that aesthetic element is easier, since it is documented for reference. I also make sure to provide a very specific description for that style alongside the defined aesthetic element, so for stippling in woodblock maps: “dotty or quick linear repetitive lines, usually in an area.”

Visual Documentation of Aesthetic Elements

Screen captures as visual documentation of curvy and minimal lines in woodblock maps

It is also important to document the visual representation of the aesthetic element. I personally take screen captures to save alongside the verbal documentation (OpenHistoricalMap woodblock style example), but this also can be done by creating a physical pin board, storing the same elements in a folder, or any other mannerism of collecting visual representations of the aesthetic element.

As long as you create a system that associates the verbal and visual together, then you’ve created some good documentation for when you try to recreate that aesthetic element in the future.

Step 2: Determine What Technologies Will Be Used

Recreating a Tim Burton-inspired swirly pattern to use in an online map

After defining the aesthetic elements that I want to bring into modern mapping technologies to recreate the style, I start to figure out how I will go about doing so. The first question I ask myself is: what technologies am I using?

Modern Mapping Technologies

Recreating woodblock style in present day technologies

The limiting factor in design in mapping — today and historically — has always been the technological capabilities of any of the given technologies.

For example, in ESRI and QGIS, there are many options for the design of a map, but creating the very specific textures of rough and imperfect paint strokes is just not an option for creating a brand new line- or fill-pattern.

Vector-based technologies create perfect lines, and so creating imperfect textures is extra work that must be done elsewhere. Even in technologies that are made for design, such as Adobe Photoshop and Illustrator, there are multiple steps required in order to tweak their perfectly created brush stroke patterns in order to have more imperfect and textured linework and patterns.

The “technological limits” for the OpenHistoricalMap woodblock style included understanding SVG vs PNG requirements, file size limits, data layer infrastructure, as well as learning how to use Maputnik or Fresco to build the style.

Design Technologies

This map monster’s SVG file size was too large for the mapping technology I was using, so I had to edit it quite a bit to make it smaller to work in the constraints of the mapping technology

Once there is an understanding of where I will create the map, I then try and determine the variety of technologies I can use to recreate the aesthetic elements. I also take note of the limiting factors that the final mapping technology may have for bringing in new symbols, patterns, etc. As noted above, there may be file format requirements, or file size limits, and various other factors. This directly affects any design work I am doing.

Step 3: Recreate the Aesthetic Elements and Make the Map

Aesthetic element visual examples shown above the chosen font for the OpenHistoricalMap woodblock style

With the above two considered, now begins the fun and creative part of determining how to recreate the aesthetic elements. Some may be easier, like choosing the right map colors to finding a typeface that is approximate to the style you are trying to recreate, while others may be a more involved process, like emulating imperfect line textures and needing to build the line pattern meticulously in Adobe Illustrator before exporting for use in the mapping technology.

For an example, read more about how I chose to recreate the aesthetic elements for the OpenHistoricalMap woodblock style.

Want to learn more?

This particular post is tool agnostic in order to help get your creative juices flowing for any map style in any technology, but if you want to learn how to recreate a style in Mapbox Studio and in Maputnik for OpenHistoricalMap, read Part 2: How to Make a Historic Style.

--

--

Associate Director at Greeninfo Network, NACIS Board, Pull for Pride Director, #creativeCarto. previously: URhere podcast, @mapboxunion, GWU, NFWF, OFDA