Icons & Patterns
Customizing Esri's Vector Basemaps: Part 5

This is the last of five Story Maps looking at methods of customizing Esri Vector Basemaps.
In this section I'm going to take a look at inserting or adjusting Sprites to create picture symbols/icons and pattern effects.
I'll be using the current version of the ArcGIS Vector Tile Style Editor ('Vector Style Editor') to make the adjustments. For all of these exercises I'm using the combined Light Gray Canvas layer as a starting point. It has a relatively small level of content, and the neutral palette makes it good for demonstrating changes.
For more information, and a fuller introduction, go to Part 1 .
What are Sprites?
Sprites (small graphic files) are used in Vector Tile Maps to create any point symbol, be it a city dot, the base for a road shield, a picture symbol or something else. They are also used for creating patterns – any fill or line that requires more than just a flat color.
This is one of two Sprite files (at 96 ppi and 192 ppi) generated for the Street Map:

Note how road shield backgrounds dominate this file, not surprisingly for the Street Map. The shield symbols need to accommodate multiple shapes and colors, and different lengths of text string, so there is more than one version of each. However, don't miss the city dots at the bottom, or the two transit symbols near the bottom left.
Point and Pattern symbols built in an ArcGIS Pro map are added to a sprite file automatically when a vector tile package is run (the json documents include information to locate the relevant graphics from this combined file). That is how sprites were generated for our vector basemaps. More on this workflow can be found here: Fonts and Sprites (and not Web Mercator...)
Now, with the Vector Style Editor, custom point symbols or patterns are easy to add to or substitute in our existing maps.
Building them requires a graphics application. It does not have to be anything sophisticated, but there are some specific requirements that I will cover here.
When the graphic is ready it can be added to a copy of one of our (or your) basemaps using the Vector Style Editor, and it will become part of that map document (although not part of the sprite file shown above, so it is not transferable).
Point Symbols
Point symbols (or icons, or markers) can be added as sprites to any point data included in our basemaps.
This is ' A Children's Map ', a vector tile map created by my colleague Wesley Jones. This example does not use our core data (Wes generated a complete set of new tiles in ArcGIS Pro), but it is a good example of how sprite markers can work.
All of the pictorial symbols were hand drawn, and imported as PNGs
The image must be a PNG. In part this is because of the transparency option. A non-rectangular JPG symbol would have a white box around it.
Transparent PNG (left) and JPG (right)
Resolutions can vary, but a good practice is to build the original at 96 ppi and at twice the size of the final symbol. Sprite files are generated at two sizes, 96 ppi and 192 ppi, so this will accommodate both circumstances.
I've created my own working version of the light gray canvas map, and I'm going to adjust it to feature Rail Stations by adding a custom symbol. This is it:
Step 1: In the Vector Style Editor, choose the 'Icons and Patterns' option in the sidebar. Add and name the symbol.
Step 2: In the Vector Style Editor, the 'Rail Station' layer is in 'Transportation'/ 'Transit', but I found it by clicking on a transit label in the map. Currently, the Canvas maps do not use a symbol for transit stops, so it shows up as 'None'. Click on 'image', choose the new symbol, then adjust the size if necessary.
If the symbol has labeling (as this one does), you may need to adjust the label around it. I've taken the opportunity to adjust the size of the label as well. Below is how it looks on the final map:
Pattern Effects
This is the ' Colored Pencil ' basemap created by my colleague Cindy Prostak. She used a series of textured tiles (sprites) to give the map a 'hand-drawn' finish..
But the structure of this map is misleading. The 'hand-drawn' nature gives the map a casual and informal feel, but a lot of preparation and planning was required to achieve this look successfully.
Zooming in, patterned lines and picture symbols are added to continue the effect at all scales.
The concept is simple. A version of it is used in ArcGIS Pro, and if you are a regular user of graphics packages such as Adobe Illustrator you'll be familiar with it – A patterned tile is repeated as many times as is required to fill a polygon (or to run along a line), and is masked by it.
The reality is a bit more complicated.
Let’s look at a simple hatched pattern. The tiles repeat the hatch across the whole shape. However the edges of the tile must join seamlessly:
In the bottom row I have deliberately cropped a fraction off the tile to demonstrate what can happen. Even this small of a difference from one side of the tile to the other will create an edge. More complicated patterns need to be built with the same concept in mind.
Textures or ‘random’ patterns like this tile from the 'Colored Pencil' map are sometimes more difficult to build. Any unevenness across the tile may be seen in the final result. Here, I darkened the bottom-left corner of the tile slightly. It's hardly noticeable on the individual tile, but when applied it can be seen clearly as a repeating pattern.
For my test map, I'm re-purposing some tiles I made for another exercise. The first applies a blue fabric effect. It has been added to all water fills.
The second adds a cartoon-style pattern to woodland and parks, and it is a good example of how pattern tiles work. Notice how the woodland pattern aligns and repeats. I spent some time adjusting the distribution of shapes across the tile to minimize the repeating effect.
Some shapes should overlap the edges of the tile in all directions to break down the tile shape. These need to be aligned carefully from left and right, top and bottom, so that they join seamlessly. It takes time, and some trial and error. Don't be surprised if you have to rebuild and reload tiles a number of times before you're satisfied with the result. Here is how they work together
The size of the tile is important. They may not render correctly if they are not square, and it is safest to build at a resolution that is a multiple of 2 (4, 8, 16, 32, 64, 128, 256, 512). In this case I exported the tiles to PNGs at 128 px. Smaller tiles may be more efficient, but the likelihood of the pattern repeating itself is greater. Keep the tile size down if you can though, and don't go above 512 px.
As with the train marker, the patterns were added to the 'Icons and Patterns' palette, then applied to the relevant layers.
Lines
Tiles/markers can be added to lines as well. Here, I've added a red version of a fairly traditional railroad symbol:
After the tile is added, my line looks like this:
I added some noise to the finished shape to provide a texture, and in the map it sits under a thin and transparent white line to define the detail.
The renderer does a good job of 'bending' the image to follow the line, but again, you may need three or four attempts to get to a result that you like.
Results
Here are the water and forest tiles in place in the test map.
Rather than add another pattern, I used a transparency setting to create a distinction between different levels of park/forest.
Here in San Diego you can see the Station markers and the railroad lines.
Note that this map is for demonstration purposes only. If these new markers and patterns were part of a functional map, more work would be needed to balance the rest of the symbolization.
Finally
What I've tried to do in this set of story maps is walk you through the basic instructions you need to start customizing a basemap for your own use.
What I haven't covered, and what you will have to apply your own skills to, is how to use these basics to create an attractive, functional and easily-understood basemap. For some ideas on that, have a look at Exploiting your Basemap
You can also look at Fonts and Sprites (and not Web Mercator...) which covers some of the same ground as this sequence, but is focused on starting a basemap in ArcGIS Pro with your own data.
More on Customizing Esri's Vector Basemaps
The earlier parts of this Story Map sequence are:
The Vector Tile Style Editor can be found here .