Back to Basics: Design Your Own Custom Basemap
Learn how to create a custom basemap that looks just as stunning online as on paper! We’ll guide you through using Mapbox Studio, from styling with JSON to colour customisation, as we transform the Nantes map into web magic. Get ready to bring your maps to life!
Welcome to the world of custom basemaps! Whether you’re building an online application or simply want your map to pop, a basemap is the essential foundation that provides structure and context. In this tutorial, we’ll walk you through designing your very own basemap using Mapbox Studio. Ready to bring your map to life? Let’s get started!
In this tutorial, you’ll learn how to design and deploy an aesthetically appealing basemap for your online application, which aligns seamlessly with the look and feel of your printed map. We’ll use Mapbox Studio to craft a custom map style that you can publish and share across various platforms.
We’ve successfully transformed the beautiful colour palette of the latest Nantes paper map into a web map, and now we’re excited to share the magic with you. Use our map style as the starting point for your own web map application!
We’ll use the Mapbox Studio Style Editor as our interface for creating this new map style. A style is simply a JSON file—formatted as a JavaScript object—that controls the behaviour and appearance of different layers in our map, such as buildings, green spaces, and more. Besides Mapbox, there are other platforms that allow you to design your own basemap, such as MapTiler and Maputnik, which is also an open-source solution. Be sure to check them out!
First, download the exercise file from our GitHub repository -this is the Mapbox style file we used for our Nantes web map. In your Mapbox account, click on the “Create a map in Studio” button. On the Styles page, open the “New Style” dropdown and choose “Upload”. Drag and drop the JSON file, and voilà! You’ll immediately see the style preview. Click on “Customise”.
Within the Style Editor, we’ll focus on the white ribbon on the left side of the screen, which has two tabs. The first, “Layers”, lists the different entities on the map, allowing you to change their symbology and behaviour manually. Each row represents a single component, which contains one or more layers. You can also add or remove layers as you wish and create your own custom components! Read all about it in the Mapbox documentation.
On the Global tab, you can change the map configuration, select your preferred typography for different components, and of course – change the colours of each group. Let’s try changing the colour for the water group. You can use the colour picker or provide a pre-defined value. We’ll change it to Classic Blue, the Pantone Colour of the Year 2020. Select the hexadecimal option in the dropdown, and paste the value #0F4C81. This design choice might be unconventional, but we’re here for educational purposes!
When you’re happy with the new style, click “Publish” to review the changes. You can then choose to overwrite the existing style or create a new one. Finally, click the “Share” button to get the endpoints needed for integration with your application.
Check out our full case study on our website, and don’t forget to explore the rest of our tutorials to discover more tools and tricks for your digital adventure. Happy mapmaking!