Designing Icons
Time it takes: (30 min - 30 days. Estimate: 30 min per category)
What is an icon?
Each of the presets you create needs to be assigned an icon, and these all need to be saved as .svg files. You can assign the same icon to various presets, or they can each have their own individual one.
See example icons created for our default 'jungle' configuration.
Creating Icons
Design icons as 100x100 pixel graphics that are clear when viewing at 100%.
Using Adobe Illustrator
From Illustrator, File > Export
Select SVG
With the artboard box ticked
Additional settings as below. These are how Mapbox says to export icons for svgs to use on their maps too.
Troubleshooting
If you have trouble viewing your icons, check this troubleshooting guide created by Mapbox or ask us for support.
Naming icons
The icons need to read by MAPEO in two sizes: 100 and 24 pixels. For that reason there is a specific file naming convention:
name**-100px**.svg
name**-24px**.svg
Each icon can be duplicated and renamed so that there is one of each. They are opened and read by the .json files in the "preset" folder. Verify that "name" is correctly entered where needed (more on this in the next section). The build script will process the pixel size suffix.
Saving icons
Create a directory named icons and put all icons in there according to the above naming convention.
The directory should look like this:
Last updated
