Viamap Styling

Viamap Styling

1. Overview

The beauty and power of Viamap lies in the fact that it allows you to perform styling in an easy and intuitive way. You can do it by either making changes in the JSON stylesheet directly or via Maputnik tool.

This guide shows how to style the Viamap with both these approaches.

2. Getting Started

On purchasing an account from Viamap, a reference stylesheet is provided that can be customized to perform different stylings on the Viamap.

To get started an access token is provided to access the Viamap resources, typically these resources are a vector layer, a hillshade layer and an ortho-photo layer.

3. Layers

Layers contain styling details like color or width. Layers refer to a source and give it a visual representation. This makes it possible to style the same source in different ways, like differentiating between types of roads in a highways layer. Following are the layers used in Viamap:

These layers can be inlined into the main stylesheet, but it is preferable to link to Viamap definitions. This makes it easier for us to fix minor errors and update the resources definitions in a seamless non-interruptive way.

4. Styling of Viamap

As discussed above we can either style the Viamap by editing the JSON file directly or use Maputnik tool. The following section describes both approaches:

1. Styling via JSON file

Viamap can be styled by editing the provided stylesheet style.json directly in any editor. Because JSON data is often output without line breaks to save space therefore it is difficult at times to read and edit it. Therefore, it is advised to format the JSON data first. As an example, the following JSON in stylesheet allows you to change the background color property of a layer:

{
    "paint": {
        "background-color": "#e6e7e1"
    },
    "type": "background",
    "id": "background"
}

2. Styling via Maputnik

Maputnik makes the task of customizing the map styling easy and much more manageable.

It’s a free editor available at https://maputnik.github.io/editor/

Getting started with the Tool

1. Click on Open to choose an open licensed stylesheet to get started. The images below briefly explain the steps to use Maputnik tool to customize and style the map. To learn more about the tool please refer to video tutorial

Open Style

2. Once a stylesheet is opened you can modify the different layers and values.

Maputnik Layout

3. Download the updated Viamap stylesheet once you’re done.

Maputnik Export

5. Useful Links

Here are some recommended links to dive more into Viamap styling and using Maputnik tool:

https://github.com/maputnik/editor/wiki

https://github.com/maputnik/editor/wiki/Maputnik-CLI

http://openmaptiles.org/docs/style/maputnik/

https://docs.mapbox.com/mapbox-gl-js/style-spec/