Easily build your own custom map to use in HighMaps
Quick tutorial to convert any Sketch custom map to be usable in HighMaps.
I recently had to work on some map charts. And one of them was about showing some key metrics for major cities in the US. After a quick search, the team couldn’t find one that fit our needs. So we looked for a way to design our own in sketch and export it as an SVG to be used in HighMaps.
All the files used in this tutorial are in this Dropbox folder.
If you want to know more about HighMaps, check the introduction for Designers post I wrote.
Here is how we did it:
1. Get a SVG / Sketch version of map to start from
In our case, we just started from a generic US map we found on Wikipedia.
2. Add shape layers to represent cities
For this step, we added over 40 rectangle shapes for major US cities. We positioned them at the right place and gave them a unique name that developers could reuse later on.
Disclaimer: make sure to use rectangle shapes, as circles didn’t work for the next steps. If you know why or find a way to make it work, please let us know :)
An normal Designer would stop there and handoff the SVG to a developer. But you are not ordinary. So let’s continue. Shall We?
3. Export your artboard as SVG
Easy step. Feel free to use any SVG compressor tool. It shouldn’t affect the end result.
4. Convert the SVG into a JSON blurb
By the way, a JSON Blurb is just a very convenient way for developers to store, share, map, and edit data.
This converter tool is very handy and totally free. You should now have a JSON blurb that you can send over to your dev team. If they use HighMaps, they can directly plugin the JSON, and use the layer names you gave as identifiers.
Hope this short “how-to” will be useful for you. Feel free to share your own findings in the comments.
If you enjoyed this article, please help out your friends with a 👏 or a share.
Raffaele Gesulfo is a Product Designer at Narvar. Narvar helps retailers champion their customers at every step of the journey. Connect with us on LinkedIn or say hi on Twitter. By the way — We’re hiring, check out our careers page.
