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.
Learn more about:
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.
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.
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.
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.
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.
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.
By default, the vector icons are uploaded in black color.
For complex icons like highway shields, you need to adjust the settings to see the icons properly.
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.
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.
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.
Useful links
Maps & styles basics
Layer styling
MapLibre style spec | Sprite
How to Add Custom Landmarks to Your Map
Comments
0 comments
Please sign in to leave a comment.