Using custom symbols and icons in TileMill

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.

Capture-1

 

Observe on the screenshot that the layer is styled with default markers from TileMill.

Capture-2

 

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).

Capture-6

 

image 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).

Capture-20

 

image Write this code to bring in symbol- sunsmile.svg. Notice that there is no marker-fill code here as the symbols already have their own colour.

Capture-19

 

We hope you enjoyed the tutorial. Please feel free to send your comments.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s