Help
- Adding a shapefile layer
- Adding color to Maki icons
- Adding MapBox Geodata
- Advanced Label Placement
- Advanced legends
- Advanced map design
- Compositing Operations
- Designing heat maps
- Encoding images for tooltips
- Google charts in tooltips
- Joining data to shapefiles
- Optimizing shapefiles
- OSM Bright Mac OS X quickstart
- OSM Bright Ubuntu quickstart
- Preparing data with Google Docs
- Recommended data sources
- Running as an Ubuntu service
- Selectors
- Setting up GDAL
- Styling Labels
- Styling Lines
- Styling Polygons
- Symbol Drawing Order
- Tips for using color in maps
- Understanding Metatiles
- Using Maki Icons
- Working with GeoTIFFs
- Working with PostGIS
- Working with SQLite
- Working with terrain data
Adding color to Maki icons
If you've found yourself on this page, we're assuming you'veReviewed using Maki icons.
If you have read, Using Maki Icons you know that Maki is a point of interest (POI) icon set designed to be used on maps. This section demonstrates a recommend approach of adding color to them.
1. Download Maki and open the source file
Download Maki, unzip it, and check out the file labeled maki-icons.svg. The .svg extension stands for, “Scalable Vector Graphics” - a file format all common vector graphic applications support. For a solid application we recommend Inkscape, a free to install, open source graphics editor. Ths tutorial walks through manipulating color using Inkscape although the steps are easily translatable to other applications.
2. Create a new icon fill
Let’s first set a couple things up in Inkscape:
- Open up the Layers window by pressing ctrl+shift+l
- Open up the Fill and Stroke window by pressing ctrl+shift+f
Your screen should now look something like this:
Each icon set is grouped together by a unique id. Because of this its important to use the Edit paths by node tool to select the icon to change its fill color. This tool is located just below the selection tool on the left hand pane or by selecting F2:
With the icons you want selected, You can change the color by adjusting the fills from the Fill and Stroke window or by selecting a pre existing swatch from the fill options below. In this example I have selected each of the three icons in the park set and given these icons a green color:
Selecting all icons at once
Using the Find tool (ctrl+f) you can select all of the icons at once. By default the icon fills are set to #444444 add this value into the Style: input and press Find.3. Batch export the icons
- On the icons layer select all by pressing ctrl+a
- Go to File -> Export Bitmap and check off ‘hide all’ and ‘batch export’. These options are located at the bottom of the dialog page just before export.
- Press Export
The icons will batch render themselves as .png’s in the same directory the .svg is located in.