Easily build your own custom map to use 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

Default US map by states

In our case, we just started from a generic US map we found on Wikipedia.

2. Add shape layers to represent cities

Map with major US 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

SVG to JSON converter tool for HighMaps

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.

--

--

--

Pushing the boundaries of user experience.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raffaele Gesulfo

Raffaele Gesulfo

Pushing the boundaries of user experience.

More from Medium

Recharts: zoomable line chart with custom clickable legend

Create Dynamic HTML Tables

Server-side CRUD implementation using Koa

Alpha Advantage data with Chart.js

Visual Chart of the year for the SPY ticker with Chart.js and Alpha Advantage data