The Making of OpenHistoricalMap’s Japanese Scroll Map Style

Inspiration

Japanese scroll map depicting the Tōkaidō Highroad between the cities of Edo (Tokyo) and Kyoto

I was initially drawn to create the OpenHistoricalMap Japanese Scroll Map style because I was inspired by Japanese scroll maps from the history of cartography. They are not only beautiful, but also different from what so many of us are used to seeing in Eurocentric/western spaces, i.e. a physical rectangular map on a table, or viewing a large poster-type map on a wall.

The way in which we use maps also affects how we see the world because we are used to perceiving maps and therefore the world through that one particular lens. For me at least, seeing the Japanese scroll map above would feel a lot like walking along that very road itself because when the entire scroll is open (this one is 20 feet long!). To properly experience the map, you would need to experience movement and walk alongside it to see all of the map’s contents. That is such a different experience than viewing a rectangular map on a table or on a wall!

Additionally, experiencing a Japanese scroll map feels like it is somehow similar to viewing a map online, where we now are so used to moving our mouse and “tugging” the map in order to view the parts off screen. It would be a similar tactile experience when unrolling a Japanese scroll map to view more.

Recreating the Style

AESTHETIC INSPIRATION

A lot of Japanese art and maps have really beautiful watercolor texture and brushstrokes that bring a lot of movement to the piece, such as the below examples:

The painted trees and mountains bring a lot of movement to the Kuon-ji Temple, Edo period woodblock map

The waves feel like they are moving in this piece that featuring (traditional Japanese painting style) elements

Beyond the above, I was also drawn to Japanese maps and artwork historically because they often feature a lot of landscape features such as mountains, water, trees, clouds, and more, in a very beautiful way:

Ukiyo-e prints from the 17th-19th centuries often depicted “pictures of the floating world”

Pictorial Map of Zenkô-ji Temple in Shinano Province, Edo period woodblock map

All of the above provides so much visual inspiration in terms of deciding what to bring into a Japanese scroll map style, so the next step was defining what aesthetic elements would work for emulating a Japanese historical style. For mapmaking, as I discussed in How to Recreate the OHM Woodblock Style, we have to make sure the aesthetic elements can be reproduced for the specific technologies that the final product uses/requires. For this map, I used the same technologies as the Woodblock Style: Adobe Illustrator, Mapbox, Maputnik, and Github.

AESTHETIC ELEMENT BREAKDOWNS

Background

Many historical Japanese maps have a beige-ish toned paper texture that is a distinctive visual texture, so I re-used the Woodblock map’s paper pattern for the Japanese Scroll Map style, and lightened it slightly to work with the water pattern (discussed below):

Linework

Many Japanese historic maps also include a lot of inconsistent linework, due to hand drawn or woodblock creation methods. Given that this is an aesthetic element that the Woodblock style also has, I used the same linework from the Woodblock style. I made some minor adjustments in the way the linework tapered to simulate ink-line tapering more, and adjusted the line colors to match better with the Japanese Scroll Map style background color.

Labels

Color

Across various maps I researched, many areas had rectangular labels that had red or yellow backgrounds with black font, such as the above examples. Naturally, it made sense to pull this into the map style as a distinctive label styling. For final styling in Maputnik, it is not immediately easy to have a rectangle symbol/shape behind a label and have it match labels’ varying lengths and heights. I decided what would work best to emulate this aesthetic would be to utilize a colored halo on the labels to create these rectangular blocks, such as the below:

Typeface

I initially knew that the typeface had to look somewhat handwritten or like a stamped aesthetic, such as these examples:

I ran into some issues with my “halo as rectangle block” plan. While some fonts looked great with Japanese characters, those same typefaces looked terrible in other languages — such as those using the Roman alphabet. The Roman alphabet has a lot of variance in letter height or width ratios. The variance often occurred for both lowercase and capitalized letters, and many fonts also looked terrible when using all CAPS. The below shows both the all CAPS issue, as well as the height variance issue (t, g, p):

Eventually, I realized that I needed to find a font that was consistent in its height and width ratios. This helped me find a handwritten-esque font that worked well for a variety of languages globally. Stylistically, I also chose to only use CAPS for labels to help avoid any major height/width issues as well. Because of this choice, I also then had to make sure to use the background “block” colors to help provide the visual hierarchy distinctions between country labels (brighter red), state labels (desaturated red), and cities (yellow):

With this font, the “block colors” aren’t always perfectly rectangular (see the above in lower left), but the variance is minimal and close enough to the aesthetic element inspiration that it works well to emulate the rectangular color block labels from the historic maps.

Natural

These final pieces really tie the entire style together, not only due to being visually prominent in both size and visual texture, but also because, as noted in the introduction, landscape and natural elements are often seen in historic Japanese art and maps so it felt very important to include some of these elements to create the Japanese Scroll Map style.

Water

Given that the ocean takes up so much space on a map, it made sense to try to find an aesthetic element that could be made into a pattern for water. Stephanie Ding and I originally tried to create some water patterns that captured the brush stroke textures similar to the below water areas:

Discovery

We discovered that it was fairly difficult to recreate brush stroke patterns that worked well for use in Maputnik. The issues were either 1) the pattern, weight, and texture of brush stroke patterns made it difficult to make a tessellation that did not look too obviously repetitive, or 2) a decent pattern ended up being too large of a file to be used on the web (size limitations in the final infrastructure).

Testing and discovery is an important part of recreating styles, and sometimes you run into things that don’t work, but they are helpful in understanding what may work better.

I realized it was important to use an aesthetic element that seemed like it would 1) work well as a repeating tessellation and 2) not end up being a large file after creation (to not run into size limitations in the final infrastructure).

Finding the right type of pattern

Waves like the above occurred a few times in some of the historical Japanese maps I researched, and I knew if this kind of pattern was designed correctly, it would work well as a tessellating pattern in the final map. While some are not consistently perfect repeating patterns (left and middle examples), visually as a whole it is clearly a pattern.

I also could tell from my long experience in making patterns that the final pattern wouldn’t be a large file size. This is because “under a microscope”, these patterns are actually just a repetition of simple linework, and simple linework typically rarely results in larger file size.

So with this in mind, I opened Adobe Illustrator and started experimenting with the Pattern Maker to create a tessellating pattern. After some iterative work, the below is what the pattern looked like:

I made sure the colors I chose worked well with the beige tones of the background “paper”. The below is what water looks like in the final map:

Mountains

With Japan being ~70% mountainous, it is no surprise that mountains are often featured in historical Japanese maps, and therefore, needed to be on this map. Many mountains on maps are very illustrative, beautiful, and painterly, such as the above. I would have loved to incorporate this type of illustration into the map style, but the data itself did not support doing this very well, since mountain data (“mountain peak”) came as point data only.

A single dot on the map meant that a mountain symbol was the best type of mountain visualization for style (since it is a single point). I looked for examples in Japanese historic map visualizations that were more “symbol”-like, and found the below:

These are all great symbols of mountains, but the right mountain seemed to align the best in terms of matching the level of illustrative mountain detail I was hoping to try to emulate from the painterly mountains, while also matching the water pattern detail as well, in terms of “level of complexity”.

After making this decision, I started working in Adobe Illustrator using the techniques described in this NACIS 2019 talk I gave, and the final result was the below:

I wanted a mountain symbol that felt like it had varied peaks, while also maintaining it as a point symbol (not too wide), and also having the mountain feel somewhat illustrative.

Final Map

All of the above combined helped to create the final Japanese Scroll Map style!