Design a Map with mapbox,leaflet and sketch

Jun 4, 2015 · 3 min read

Before, I didn’t know how Mapbox and leaflet works,and I didn’t know how to work with our developers,I spent lots of time on doing the mockup,it’s waste of time and useless,this is how I do it.

The layers

I always used sketch to do the mockup,I download a worldmap from wiki,it has more than 300layers,I grouped the layers into 4 groups in order to make the choropleth colors.

Everytime I want to change the color,I need to choose all the layers inside the group,because if I flat the layers,sketch will crash.

Then I found a way instead,I use sketch’s share style to link the same style to the groups,and made some rectangles to be the controller.

Then,when I want to change one color,I only need to change the rectangle,don’t need to select the map layers.

The colors

The develops use mapbox as a base background and use leaflet to make choropleth shapes

the choropleth shapes is on top of mapbox text,that means, you need to add opacity on the choropleth shapes in order to make the text visible.

This is how it works,there are two layers except water, area layer is choropleth shape layer , opacity 50%,blending on the base map layer.

I need to give developer the color code of the choropleth,can I pick the color on the first image directly?no,it’s the color you see,it’s the result of cutting 50% opacity.

It means,I use the before color in the sketch mockup,in order to let people see the after color,I need to make a color burn blending layer,to get the middle color,then give developer the middle color,add opacity and blending with the base map color,to get the after color.

and the result is SHIT.

Then I realized,I really need to learn how to do a real map by myself.

Mapbox studio

First I use mapbox studio to make a css style controller,using the simplest map,delete every style I don’t need,only use font family,land color,water color,line color and text color.


Second,I use leaflet to define the choropleth shape fill color,border color,data range value,circle color,and opacity.

Now,I can use sketch to design a quick mockup,and test it with mapbox and leaflet,to make sure my mockup is as same as the final product.


Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade