This post will demonstrate how to add custom symbols and icons into a TileMill project. Adding customized icons and symbols gives the GI user more control over the cartographic visualization of the map.
Things to note
-Move the icon or symbol to be used to the TileMill project folder. The TileMill project folder is usually located at this location ..\..\Documents\Mapbox\Project\projectname\ in the windows environment.
-The icon and/or symbol must be of the proper width and height.
Download a sample icon here- https://www.dropbox.com/s/t2610jd6ytv3e18/sunsmile.svg?dl=0
(Kindly attribute this data to www.mapsnigeriainitiative.wordpress.com)
Launch TileMill and open a project. Our project is named AfricanCities and contains dataset on the most populous cities in Africa.
Observe on the screenshot that the layer is styled with default markers from TileMill.
Make sure that your custom icons and symbols you want to add are saved in the project folder . For the demo, Blackrace.svg and sunsmile.svg are our custom icons (both red boxed). In addition, take note of the directory path to the project folder (green boxed in the title bar).
Write this CartoCSS code and add it as a layer in the style.mss window. Note the line 2 – marker-file: url(Blackrace.svg); – is requesting to fetch the custom icon- Blackrace.svg. line 3 allocates a scale or size to the marker. Line 4 allocates a color to the marker. On the screenshot the default markers are now replaced by the blue icons (red circled).
We hope you enjoyed the tutorial. Please feel free to send your comments.