Every map can use its own set of icons for displaying points of interest, highway shields, peaks etc. A set of icons and patterns and a file defining which icon should be used for what purpose are called sprites. All the icons are combined in a single large image.
Icons in MapTiler maps
MapTiler map styles have their own sprites prepared by our cartographers. You can change the fill color, outline or size of the icons easily in the Customize tool.
Apart from colors, you can also adjust the layout of icons. Use Anchor or Translate properties to improve the icon 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.
If you want to change the icon image, click on the symbol next to the icon image name and pick your favourite from a selection box.
If you wonder what maps use icons by default, here is a list:
Besides icons, we also use patterns in some of the maps. Patterns can be used only for Polygon or Line features. Using any icon you can create a pattern.
Patterns currently don't support change of colors! Patterns are saved as rasters - their color is encoded in them and cannot be changed on runtime.
If you want to use your own icons instead of the prepared icon sets there are two options. The easier one is to create icons as SVG files and upload them to your map. If you prefer to work with rasters, you can create raster sprites from the SVG files and then upload them to your map.
How to upload custom icons into your map
1. Vector icons
To upload icons in Customize, go to the Quick Edits Icons section or to Upload icons in the top-right corner.
You will see a dialogue window asking you to choose Vector or Raster icons. We recommend using Vector icons for full customization.
Then you need 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 multicoloured icons, you should use raster icons instead.
By default, the icons are uploaded in black color.
Particularly for highway shields or other more complex icons you need to carefully adjust the settings to see the icon properly.
2. Raster icons
Raster icons are static images that cannot be styled as the colors are already encoded in the files. You need to style the icons in any graphic software or with HTML before the creation of the sprite.
Customize enables the creation of a raster sprite by uploading the SVGs or by uploading the sprite generated by command line tools such as Spreet.
The first option can be triggered by unselecting the "Convert to customizable icons (SDF sprite)" option in the Vector icons upload.
To upload an already generated sprite, choose the Raster sprites upload. Sprite typically consists of 4 files:
sprite.png- the image with all the icons, for example:
sprite.json- file describing the names and positions of the icons in the image (the names are later important when modifying the style in the Customize)
email@example.com- the same as above, but in higher resolution (HiDPI/retina)
You can upload these either zipped or as individual files.
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. You can also create SVGs using HTML.
How to create raster sprites using command-line tools
For creating a raster sprite, you can use command-line tools like Spreet.
sprite.json from SVG icons. You need to put all your icons into one folder and run Spreet with one command which is pointing to this folder. We are running it twice because of the retina version (twice magnified sprite).
spreet [input directory] sprite
spreet --retina [input directory] sprite@2x
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 Toner or OpenStreetMap map styles, we recommend keeping raster sprite.
Multicoloured icons cannot be achieved with SDF. Your SVG icons need to be designed in one monochrome color (we recommend black) to work properly.
Raster sprites have also slightly better performance. If you have a map style with hundreds of layers and icons and you are concerned about rendering speed, you should switch to a raster sprite.
What about the custom fonts?
MapTiler Cloud currently does not support working with custom fonts. At the moment, you can use MapTiler Server for hosting your maps with custom fonts. In MapTiler Server you can add your own data and work with the styles converted for self-hosting. Another way is to use any HTTP server to host your custom fonts and map style.
If you want to work with your custom fonts in your MapTiler Cloud maps soon, please vote for this new feature on the MapTiler Cloud Idea Page.