Fonts and Sprites (and not Web Mercator...)

Vector Tile Layers are used to create multi-scale maps that are efficient, high-resolution and customizable. This is particularly the case with basemaps.

The Living Atlas Team has been adding to the collection of Esri vector basemaps since we introduced them in 2016. We have a series of  core maps  that are available in numerous languages, and an increasing number that are built around Open Street Map. Beyond that we have the opportunity to play with them too! We continue to create  creative versions  that exploit various graphic effects.

You can change our maps as well, and the  Vector Tile Style Editor  is making this work increasingly easy, as described  here . But there are some limitations. Principal among these is that you are constrained to the projection and the fonts that are established in the vector tile package.

If this is a problem, or if you want to introduce your own data to the process, it may make more sense to build your own vector tile package from scratch using ArcGIS Pro. This Story map is going to look at this process from the creative angle.

A published Vector Tile Map works best as a foundation. You can’t link to data from a Vector Tile Layer, so most likely you will set it below any interactive information that you’re building. Let’s call it a ‘basemap’ (which is what we build for ArcGIS Online), but it doesn’t have to be just that.

The simplest way of exploiting it is to work online with copies of our basemaps. But the focus here is on taking the customization to another level, and that requires you to build your own map from original data. 

A graphics/drawing program. This doesn’t need to be anything fancy. If you use Creative Suite, Corel or similar you’re in great shape, but there are plenty of simpler apps available that will do the job. Anything that will give you a PNG file will work.

An editing App. You can set your map design in your ArcGIS pro document, or you can style it afresh after publishing. Regardless, you may want to 'tweak' the final map. The  ArcGIS Vector Tile Style Editor   leads you through most of the changes you can make to the style. As of 2021, it includes a JSON code editor.   'Basemap Basics'  and the linked story maps go into using this in detail.

Most of all you need a good dose of...

Even if you are building a map to support an earnest, worthwhile and impactful point, you can still try to do something a bit different with it, and you may be able to have some fun!

So let's get started ...

The projection that you establish in your ArcGIS Pro map will carry through into the vector tile package, and it cannot be changed after it is published. This may be the most pressing reason for creating your own vector tile package.

All of our basemaps are available in Web Mercator. Most have a WGS84 alternative, but we had to establish that as a separate map package and publish it separately. Adding even more projections would be a major commitment for us. If you feel that neither of these are appropriate (and Web Mercator discussions can get heated) you're stuck!

A global/all scale vector tile package will be a big undertaking, and we don't recommend that you try. Collecting the data may be a challenge, particularly at larger scales. Creating the package could take a while, and it might be sizeable (the ones we create are around 35-40gb at the moment).

Here are some options:

Any font that is included in your ArcGIS Pro document will be carried over into the Resources Folder, whether you are using it or not. This means that some discipline is required.

If you are building a one-off map then you can add any licensed or open source font that works for you. 

But don’t get carried away - Unless it's to get a specific graphic effect you don't want the map to be too ornate or fussy! A rule-of-thumb is to limit yourself to two faces (Arial, Times, etc.), but as many fonts (Bold, Italic, etc.) as necessary.

In my UK map I used Noto Sans and Noto Serif - two faces designed to work together.

If you are planning more than one map, try to include the fonts that you’ll need across the whole set, by adding the additions to non-critical/non-printing layers...

… but take a good look through your layers before publishing. Make sure you don’t leave any unused fonts behind by mistake. It won’t break the vector tile service if you leave them in, but you want to be as efficient as possible.

These are built into the vector tile package using Sprites. They are small graphic files that can be used 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.

These days it's possible to introduce or substitute sprite symbols into a map style using the Vector Tile Style Editor, but they are not transferable there (they are part of the document), so it makes sense to include them in the map package if you have the opportunity. (See  here  for more information on the Style Editor. It covers some of the same information as this, but from a different angle).

This is one of two Sprite files (at 96 ppi and 192 ppi) generated for the Street Map:

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). 

Any marker symbol that you create in your ArcGIS Pro document will be converted to sprites automatically. Custom or pictorial symbols are easy to build with a graphics package.

For my map of Great Britain, I've created a series of icons to be used at large scales. I added a shadow to make them stand out more clearly against other features, and a white, partially transparent, 'halo' on the Rail Station dot to break it out from the rail line:

I exported them as PNGs and added them to the map in ArcGIS Pro as picture markers. The 'Reset Size' button will set the symbol to the optimal size for viewing, but you will probably want to make adjustments up or down.

Creating patterns or textures requires a little bit more thought:

The concept is simple, 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 from the Topographic Basemap (Note that the 'line fill' tool in ArcGIS Pro does not translate to vector tiles, and that means that hatched patterns must be prepared graphically). 

The tiles repeat the hatch across the whole shape. However the edges of the tile must join perfectly.

In the bottom row I have deliberately cropped the tile to demonstrate what can happen. Even a fractional 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.

‘Random’ patterns like the colored pencil tile are sometimes more complicated to build. Any unevenness across the tile may be seen in the final result.

Here, I removed a few pixels from the bottom-left of the water texture. It's hardly noticeable on the tile, but when applied it can be seen clearly as a repeating pattern.

For my map of Great Britain, I've created two tiles.

One applies a fabric effect across the map, with a separate version in blue for water. I set colored fills over the top of both, and applied a high degree of transparency to merge them into the background.

The second adds a cartoon-style pattern to woodland. Notice how the woodland pattern aligns and repeats. I spent some time adjusting it 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).Smaller tiles may be more efficient, but the likelihood of the pattern repeating itself is greater. Keep the tile size down if you can, and don't go above 512 px.

The tiles are added as a Picture Fills in ArcGIS Pro. Once established they can be reduced or enlarged, but keeping them at the optimal size (use the 'reset Size' option) will make the final effect more predictable. 

So you’ve created your perfect map. It’s as tight as it needs to be at all scales, and all components, including fonts and sprites, are in place...

Publishing the map is simple.

EITHER: In 'Share', go to Web Layer/Publish Web Layer

'Cache online' will create the package in your organizational account and publish a map service. My map, which includes data for the whole of Great Britain at multiple scales, took about an hour to run. 'Cache locally' will create a temporary vector tile package on your computer, before publishing it online.

OR: Use the 'Create Vector Tile Package' tool to build and hold the package locally.

The package can be loaded back into ArcGIS Pro for checking (using 'Add Data'). This is useful if you are working with Sprites – You can check how they translate to the Vector Tiles before you commit to final publication (although ArcGIS Pro doesn't render them in precisely the same way). The package for this map takes about 45 minutes to an hour to run.

Once you're happy with it, you can move the package online. Click on it in your ArcGIS Online Contents folder, and it will give you the option to publish the service.

Note: A 'Vector Tile Index' added in the 'Index Polygons' field above, is an optional process you can use to improve the efficiency of a Vector Tile Service, and it is recommended. However, because I was building this map in a projection other than Web Mercator or WGS84, this was not available to me. You can find more about Vector Tile Indexes  here .