Working with Icons

Map design Icons & Patterns

This collection of articles forms a suggested workflow to understanding the fundamentals of map design icons & patterns.

  1. Working with Icons
  2. Working with Patterns
  3. Using Sprites
  4. How to Add Custom Landmarks to Your Map
  5. Add custom watermark to your map

Every map can use its own set of icons for displaying points of interest, highway shields, peaks, etc. In special cases, maps can also include patterns, helping users distinguish between similar polygon features. A set of icons and patterns and a file defining which icon should be used for what purpose is called a sprite.

Icons in MapTiler maps

MapTiler map styles have their own icon set prepared by our cartographers. The Customize tool makes it easy to change these icons’ fill color, outline, or size.

icons-customize.png

Apart from colors, you can also adjust the layout of icons. Use Anchor or Translate properties to improve the icon’s position on the map; in the example below we moved the star icon under the label of London, instead of it being next to it.

icons-layout.png

If you want to change the icon image, click on the symbol next to the icon image name and pick your favorite from a selection box.

icons-search.png

If you are wondering which maps use customizable icons by default, here is a list:

How to upload custom icons

If you want to use your icons instead of the prepared sets, there are three options for uploading your own.

When you upload a new set of icons, you automatically lose the previous one. Customize does not currently support multiple icon sets.

If you need to combine your icons with the MapTiler icon set, please contact support@maptiler.com. We can supply the individual SVG files for you to combine with your icons.

To upload icons in Customize, go to the Quick Edits Map Icons section or to Upload Icons in the top-right corner.

upload-icons.png

You will see a dialogue window asking you to choose Vector or Raster icons, or Raster sprites. We recommend using Vector icons for full customization. 

vector-icons.png

1. Vector icons

You will be asked to upload your SVG icons either zipped or as individual files. This will create a new sprite for your map. The icons need to be monochrome.

If you have multicolored icons, you should use raster icons instead. In this case, you can toggle off the option to Convert to customizable icons (SDF sprite). This will convert your icons into raster icons, which cannot be fully customizable.

options.png

By default, the vector icons are uploaded in black color.

icons-default.png

For complex icons like highway shields, you need to adjust the settings to see the icons properly.

icons-adjusted.png

2. Raster icons (or mixed format)

Raster icons are static images that cannot be changed, as the colors are already encoded in the files. You need to style the icons in graphics software or using HTML before uploading the files. The Raster icons can be used to include photos or landmarks in your maps.

This upload option allows for either individual PNG files or a zipped format. You can also mix in individual SVG files or upload a mix of raster and vector icons zipped.Once again, this option creates a new sprite from all the uploaded icons for your map.

Note that if you choose to upload mixed formats, only the SVG icons can be styled in the interface.

raster-icons.png

3. Raster sprites

The Customize tool also gives you the option of uploading the raster sprite directly, generated by command line tools such as Spreet. You can learn more about sprites here.

How to create icons

Icons can be created in any graphic software such as Inkscape. For regular-size icons, we recommend a size around 15 x 15 px. If possible, use an even amount of pixels for better downscaling of the icon.

create-icons.png

If you don’t want to create the icons yourself, you can use icons from available libraries (make sure you follow the licensing conditions). Here are a few examples:

You can also create SVGs using HTML.

Vector vs. Raster icons

Vector icons allow users to fully customize the colors, outlines, and sizes. This is possible because of the Signed Distance Field (SDF) sprite generated by MapTiler Cloud during the upload. SDFs are a way of rendering images designed to maintain sharp outlines from a pixel image even during resizing. Converting the SVG files to SDFs enables having scalable, recolorable icons in your map.

But when is the time to switch to rasters?

One of the examples is the use of patterns in the map. If you want to have your own patterns or use Aquarelle, Toner or OpenStreetMap map styles, we recommend keeping raster sprite.

Multicolored icons cannot be achieved with SDF. Your SVG icons have to be designed in one monochrome color (we recommend black) to work properly.

Raster sprites also have a slightly better performance. If you have a map style with hundreds of layers and icons and you are concerned about rendering speed, consider switching to a raster sprite.

What about the custom fonts?

MapTiler Cloud does not currently support working with custom fonts. You can use MapTiler Server to host maps with custom fonts. In MapTiler Server, you can add your own data and work with the styles converted for self-hosting. Another possibility is to use an HTTP server to host your custom fonts and map style.

Next steps

Continue to Working with Patterns to learn how to use patterns to help users distinguish between similar polygon features.

Maps & styles basics
Layer styling
MapLibre style spec | Sprite
How to Add Custom Landmarks to Your Map