Mark your map with new Maki icons

Mapbox
maps for developers
3 min readNov 14, 2013

--

By Nicki Dlugash

We’ve rolled out over a dozen new highly-requested Maki icons — our open source point-of-interest icons — in the last month, with several more in the pipeline. Our goal is to make Maki as easy as possible for anyone to use and help evolve.

The making of Maki icons

We manage the development of Maki in a GitHub repository, where anyone can request or contribute new icons. Once we’ve determined which new icon concept to bring into the Maki family, the next step is to research how best to illustrate the concept. New icons need to be uniquely identifiable, yet consistent with the rest of the system. Where appropriate, we base them on internationally-recognized symbols.

We often create our initial sketches on paper before translating the design into Inkscape, an open source vector graphics editor.

All Maki icons come in three sizes — 24px, 18px, and 12px, and we redraw them at each size to make them pixel-perfect.

When the three designs are finalized, we update our Maki .json file, and then run a shell script to generate the necessary sprites, CSS and individual .png files. All that’s left now in the workflow is to submit a GitHub pull request for the new branch that includes our newly-designed icon. A Maki-savvy team member will review it before merging the updates into the live branch.

Instant gratification

Once a pull request has been merged, the new icon is immediately available for use on our mapbox.com editor to style markers. Try out our new icons on your next map!

All Maki files are also available for use on your own app, including the CSS for using Maki on a webpage and the JSON endpoint with metadata, tags, and more. Everything you need is in our repository, making it simple to incorporate Maki into your own project.

Contributing to Maki

If you’re interested in contributing or suggesting new Maki icons, check out our documentation on GitHub. We always welcome new collaborators!

--

--

mapping tools for developers + precise location data to change the way we explore the world