How to Make a Historic Style

Welcome back! If you haven’t already, make sure to read Part 1: How to Recreate a Map Style before diving in here. This post will focus on how to go about bringing in a historic style’s basic aesthetic elements (from Part 1) into Mapbox Studio to draft a historic style. Then, if you want to create an open source style similar to OpenHistoricalMap’s woodblock style, continue reading on to learn how to bring the historic style’s design into Maputnik or Fresco. This blog is capturing the work down for OpenHistoricalMap, so will focus on building a custom open source historical style.

Drafting in Mapbox Studio

It is not required to draft your style in Mapbox Studio (proprietary, initially free to use): you can go straight to Maputnik (open source, free to use) or Fresco (open source, free to use) if that is your preference.

It is, however, much easier to draft your historic style in Mapbox Studio because the user interface is easier to use, as it has a lot of knobs and levers to quickly make adjustments as you test different design choices in your style. In Maputnik or Fresco, you will have to do a lot more clicks and cntrl-Zs to iterate on your map style. Additionally, in Mapbox Studio, you can save multiple iterations of a style as you iterate and test, which you cannot do in Maputnik and Fresco. Given all of this, it makes a lot of sense to begin playing around with a style in Mapbox Studio.

Start with a template

In Mapbox Studio, there are a few different initial templates you can start with before customizing your style. Each template has a different use case, so depending on what your historical style is, consider picking one that aligns well with your end goal. For example, if you are planning on making a vintage road map style, you may want to start with the Streets template.

For the OpenHistoricalMap woodblock style I created, I knew I didn’t need extra data details such as those in Streets or Outdoors, so I chose the Basic template to start with.

Start customizing

Every style will have different design requirements about what needs to stay on the map and what needs to be removed. For the OpenHistoricalMap woodblock style, I knew I needed to remove a fair amount of information. Woodblock maps typically are not data dense, although they are visually dense, texture-wise.

For example, the above 1584 Ortelius Africae tabula noua is incredibly rich in detail — which is what makes it so beautiful — but the reality is, data-wise the map is mainly comprised of country polygons, major rivers, populated areas, graticule, and water labels. Everything else is intricate marginalia and illustrative design elements — like the cartouche framing the map title, map monsters, stippling pattern for water, city and mountain symbols, border halos, paint color choices, and different textures and transparencies across the map.

For the woodblock style, I utilized Mapbox Style Components to quickly remove groupings of data layers that I knew I didn’t need (removing some detail) for the map by deleting those respecting Components.

I also began removing components from the Colors palette, as I didn’t want them to be colored any differently than the base map.

All of these adjustments are to help me visually get the draft style as close as possible to what I want the final woodblock style to look like. It is worth noting at this iterative stage, it is okay to forget to remove or add some data layers, because this is a draft space meant for playing around with the design because Mapbox Studio allows for quick iterative design. The perfecting of the final open source style will occur in Maputnik or Fresco, which has a slightly different data schema.

Once satisfied with removing the data I didn’t need, I began adding in color and typeface options that made sense for the woodblock style. I pulled these design requirements from the aesthetic element definition work that I did (see How to Recreate a Map Style). For the woodblock style, I knew I wanted the basemap to be shades of beige/brown to match a manuscript-type paper feel, and also wanted to find a typeface that imitated typefaces seen in many woodblock maps.

The Eadui font was similar to typefaces seen in woodblock styles

I also began pulling more advanced aesthetic elements (paper texture, imperfect lines, building symbology, map monsters) that required some extra design steps, which I will not go over in this post:

1) the creation of patterns and symbols in Adobe Illustrator 2) maintaining appropriate file size 3) exporting of SVGs 4) SVGs exported in appropriate manner (Read How to Recreate a Map Style for a reminder of why understanding technological limitations is important for recreating styles).

If there is interest in these processes, please comment on this blog post to let me know!

Note: If you have a more advanced style with custom symbology, patterns, or custom fonts and you intend to build an open source style, do make sure to tune in next time to Part 3: The Complicated Stuff, as these advanced elements are more complicated to incorporate into Maputnik/Fresco.

I removed data detail and added beige color, new font, paper texture pattern, imperfect line patterns to road, custom-made “watercolor” symbols, and more

For a woodblock map style, the aesthetic elements are a large reason why the style began to look like a woodblock style within Mapbox Studio. As mentioned above, woodblock styles are so distinct looking because of their visual design more than the data on the map.

If you are fine with using your style with Mapbox’ free or payment tier you can stop here. If you want to bring your style into an open source infrastructure, then read on!

Bring Design into Maputnik or Fresco

Now that the draft work is done in Mapbox Studio, we have to bring the design work into Maputnik or Fresco (both open source, free to use). This is required because OpenHistoricalMap uses a different data schema than what Mapbox Studio currently has (Streets v8), and Maputnik or Fresco both provide a space to edit and design the data schema that OpenHistoricalMap uses. While the data schemas do not match, the data schemas are similar enough in content that design work can be carried over.

For example, road data layers exist in both data schema, place labels exist in both, etc: we just have to bring the design choices into the same category of data (ie, road design to roads, place label design to place labels) into the OpenHistoricalMap data schema/data layers.

While we have to port over the design, we still saved time in drafting the design in Mapbox Studio, because it is a lot faster to add, remove, test, and iterate data and design in the Mapbox Studio user interface.

Start with an OpenHistoricalMap Template

Similar to beginning with a template in Mapbox Studio to make work easier and just add and remove data layers as needed, using an OpenHistoricalMap style as a template is a good place to start, as the style is already out in the world, and you therefore know the data layers are all correct and you don’t need to do extra work in searching for some of the basic data layers (like administrative boundaries, labels, and other basemap data).

First, copy and save this OHM style.json and bring it into Maputnik or Fresco:

Now you will remove any data layers that are not relevant to your style, like what you did in Mapbox Studio. This time, you know exactly what you want or don’t want in your style, since all those choices were made in the Mapbox Studio interface. This will make deleting go much faster in Maputnik or Fresco.

When going through and deleting, I also mix design work in between because I personally am a very visual person so I like to also quickly change the colors of the map so it is closer to what I want it to be. The above shows the land color getting changed to the beige color I want. I went into the land data layer in Mapbox Studio, grabbed the HEX code, and pasted the HEX code into Maputnik. This is faster than matching Mapbox’ HSL numbers to Maputnik’s RGB numbers.

The goal in this step is to match all the design choices to the corresponding data layers in the OpenHistoricalMap style template. The more you edit, the more it is your custom style, rather than the original template.

If you do not have any custom symbology, patterns, or custom fonts to add to your style, you are done at this stage! If you do, tune in next time for Part 3: The Complicated Stuff in order to learn how to add them to your custom, open source historic style.

Save the Style

In order to export/save your style in Maputnik, click the “Export” button in the upper left to save the style locally on your computer.

Stay Tuned for Part 3: The Complicated Stuff

In order to use the style, you will have to host it somewhere, such as Github Pages. We will go over this in Part 3, as well as the extra steps that are required to use custom symbology, patterns, or fonts in your historic style. Stay tuned to learn more!