How to make a Vintage City style for Esri Vector Basemaps – Part 1

Prologue

I have been lately obsessed with the Nuova pianta topografica della città e del porto di Genova made in 1910. I accidentally fell on it while I was searching the internet for classic maps to complete my blog post How to fold a Map with CSS. While I was digitally folding the map, I realized how outstanding it actually is.

Even though it was made a century ago, I find its design, more that stunning. The color scheme is so simple but attractive and in combination with the minimal symbology and lettering, the result is pure art.

It was impossible to just stare. I spent the following days brainstorming on what I could do with this avalanche of inspiration that this map provoked. I came up with producing a style for the Esri Vector Basemaps, which mimics as close as possible this vintage old map. I also named the style Nuova Pianta Topografica (Google translates it to New Topographic Map) to honor the original map and its creator.

So, here is part one of the story on how I did it and how I can further use it in my projects and applications.

Reading the Vintage Map

The first step I took was to download the original map and to georeference it in ArcGIS Pro. More on the tools and techniques of georeferencing can be found in the Overview of georeferencing topic. A brief demonstration can be found in the How to Align Vintage Hillshade with Current-ish Imagery blog post by John Nelson.

Georeferencing was not necessary for the production of the style itslef, but the process of doing it allowed me to better read the map and identify the specific cartographic elements that compose its realm.

And since this is a map coming from 100 years ago, it was impossible to use the coastline or other physical features as georeferencing control points. For this, I navigated throught the whole map to find human-made constructions, mainly buildings, still preserved today. These buildings were used to position, as accurately as possible, the classic vintage map on the contemporary basemap (Picture 1).

Time for color! At the Insert contextual tab, at the Layer Templates group, I clicked on Polygon Map Notes. This added an empty polygon feature layer in the default geodatabase of the project, which was also automatically added in the Contents pane. I then used that layer to sample the colors from the original map, with the help of the Eyedropper tool (Picture 2).

Every time I picked a color from the map with the Eyedropper tool, that color was used to style the polygon map notes layer. I then saved that color to a style file in Pro. Thoroughly repeating this process about ten times resulted with a representative color palette (Picture 2).

The color palette is presented in Figure 1, where you may also see the feature that each color represents, as well as the associated HEX value.

Besides sampling color, I also had to write down certain other observations related to the symbology and typography of the original vintage map. Briefly I mention here the most important ones:

• The buildings are minimal with a short number of corners and details;
• The buildings have a shadow effect, achieved with differentiating the stroke width of their outline (thinner stroke at northern/western orientation and thicker stroke at southern/eastern orientation);
• In the scale of the map, the residential streets have not a distinctive symbol, but their presence is implied by their names or by the space among buildings and building blocks;
• Some primary streets or railways are presented with thin lines, some of them in red color;
• There are no streets symbolized with casing;
• Letters on map are of serif or slab typeface. They all have the same color and there is no halo, casing or shadow beneath them;

Having such observations in mind and a well sampled color palette, producing the Esri Vector Basemap style was a pleasant, creative process.

Producing the Esri Vector Basemap style

I remember the day when Esri firstly announced their configurable vector basemaps, available in ArcGIS Online. I was excited. I was also overwhelmed, because back then the only way to change their style was to hardcode in JSON. I had no problem in changing the code, but it was cumbersome to identify and locate the unmeasurable different features of a single style, not to mention their associated labels.

The online editors that followed were an effective advance in facilitating the editing of the vector basemaps. Nowadays, the present ArcGIS Vector Tile Style Editor makes the whole process a piece of cake.

So, with my ArcGIS Online credentials I opened the Style Editor and I chose the World Topographic Map as the style to start editing (Picture 3).

I firstly worked in city scale (zoom level 16) for the reason that the buildings are visible from that scale and above. Hovering the mouse over the map, turns it to an identifier tool, thus clicking on a feature opens the styling parameters pane of that specific feature (super handy).

Therefore, with the aid of the identifier tool, I found the different layers of the map and I applied their correspondent color, according to the palette I had sampled from the original vintage map (see Figure 1).

In zoom level 16 I could also see the shadows of the buildings, a feature available in the World Topographic Map. The shadow effect here is achieved by replicating the polygon layer of the buildings, rendering it with a darker color and offseting it from its original position. So, at the Position parameters of the Building/1 and Building/2 layers I changed the Translate values for the X and Y axes. The visual effect is similar to the shadows of the buildings of the original map (Picture 4).

The streets and other transportation layers were harder for the reason that the default basemap comes with cased styles. I had to separately style each one street category and to hide the layers that are used for casing.

The original map is highly monotonous and so had the streets to be. So, I gave to all street categories exactly the same color and I only allowed for width variations. I also had to do it for every single zoom level (Picture 5).

Exception from that rule were the residential streets in large scales. I wanted these streets to match with the shadows of the buildings, so I gave them the same color as the shadows and I also made them as thin as possible (see Picture 4, above).

I also had to honor the red lines that are illustrated in the original map, but I didn’t want to break the monotony of the uniform color of the streets. So, I selected red for the railways. In addition, I used the same red hue for the administrative boundaries in medium scales.

When finished with colors, offsets, widths and scale dependencies, I had to cope with labels. The World Topographic Map style comes with two of my most favourites typefaces, the Josefin Sans and the Josefin Slab and it supports specific fonts, such as the Josefin Slab Bold Italic for example. Thankfully, the glyphs of these two families are very close to the letters of the original map (Picture 6).

So I chose the Sans family for the cultural features and for a vast part of the physical features, while I assigned the Slab family for some of the physical features, like rivers, canals, lakes etc.

I gave the same color to the labels of ALL features on the map and I hid any halos. I also hid all shield icons related with street codes, as well as some other icons like the summits. I wanted these features to remain labeled but with no associated icon, since the original map does not have any point symbols.

The whole process lasted about a week, with three to four hours of work per day.

Consuming the Esri Vector Basemap style

As said before, I named my style Nuova Pianta Topografica, to honor the original map and its creator, and I saved it in my ArcGIS Online account. You may find it here Nuova Pianta Topografica Esri Vector Basemap and use it under a CC BY-NC-SA 4.0 license.

One way to consume the basemap is directly in ArcGIS Online by adding it in a Map or a Scene. I have carefully rendered it to work properly to all scales, so even though its primary scope is for large scales, it can be also useful in smaller ones.

Another, and more appropriate, way to consume it is in ArcGIS Pro, where I can also add a paper texture overlay, to honor the fact that the original map had been actually produced on paper.

So, in ArcGIS Pro I loaded the vector basemap from my Portal content and on top of it I added the Global Background feature layer by John Nelson. Alternatively, you may use the Graticule Bounding Box from Natural Earth.

Then, I gave a Picture fill at the Global Background and for picture I chose a seamless kraft paper texture image, I found on Pinterest. Finally, I changed the Transparency of the Global Background to 50% and for Layer Blend mode I chose Multiply. The result was stunning. I had the whole World in Pro in a vintage, papery, old-school style (Picture 7).

And I was so excited to travel in both space and time, that I wanted to share it with others. So, I also wrote a custom WebMap with the ArcGIS API for JavaScript v4, which shows the Nuova Pianta Topografica vector basemap with a paper texture (Picture 8).

You may directly access the WebMap here Nuova Pianta Topografica. In Part 2 of this blog post series I will narrate the process I followed to produce this WebMap (only for CSS/JavaScript nerds)!

Epilogue

Thank you for reading so far. Here Nuova Pianta Topografica Esri Vector Basemap is the vector basemap living on my ArcGIS Online account. Feel free to use it (license CC BY-NC-SA 4.0) and don’t hesitate to provide any suggestions for improvement. And stay tune for part two!

Kindest regards from Crete, Greece,

Spiros