Join us online - 19th of November
Save your spot
For AI agents: a documentation index is available at /llms.txt. Markdown versions of all pages are available by appending .md to any URL.

Get started with Map Designer

Our Map Designer is a no-code map design editor. It enables you to customize every visual detail of a map: colors, icons, fonts, transparency, shading, highlighting, language of labels, and much more.

Tip

Before you start, it’s helpful to know some basics, especially the difference between a map, map style, and map data.

Design your custom map

The easiest way to get started is to customize one of MapTiler maps. They’re professionally crafted to fit their purpose, be aesthetically pleasing, and work well at all zoom levels. This makes them an ideal starting point to get your custom map in high quality and short time.

Open Map Designer

After opening, Map Designer loads a default general-purpose map, but you can select any other map to start with.

How to open Map Designer with another map
  1. Open your MapTiler account, page Maps.

  2. Click NEW MAP to open the map selection wizard, and pick the map style that's visually closest to what you need. The maps are grouped into categories and each has a description explaining what it's best suited for. Many of our maps come in color variants. In the wizard, they're listed as thumbnails at the bottom of each map for yout to check out too:

    • Dark modes are beneficial for navigation at night or for highlighted data visualizations.
    • Light and pastel modes are monochromatic grey or soft-colored base maps that let your data stand out.

      Map selection wizard

  3. Click Customize button to open the selected map in Map Designer, ready to be modified.

Alternatively, pick a map directly on the Maps page and click Customize in its detailed view.

There are four panels on the left, each specific to map styling:

  • Quick edits (Alt + Q) to adjust the map color palette and fonts.
  • Layers (Alt + L) for complex styling of individual or multiple layers, filtering data or writing JSON.
  • Settings (Alt + S) for setting global map options such as language, borders, or initial position.
  • Data sources (Alt + D) for adding, removing, or replacing map data sources or checking data details.

Map Designer main panel

Terminology

Style JSON: a JSON document (style.json) that defines the visual appearance of a map: colors, layer order, data sources, and more. Every map style is a style JSON file. This is what you get when you download a map style.

Block: a group of layers.

Verticality: the order of the layers in the map. The first layer is rendered on top.

Data layer: a part of a data source that contains specific map features, such as roads or buildings. Each style layer takes its features from a data layer.

Attributes: information linked to the data that describes features, such as class, admin_level, rank, or name. Attributes are used for filtering.

Filter: conditions on the source data. Only features that match the filter are displayed in the map.

Geometry: the way geographic data is encoded, such as Polygon, LineString, or Point.

Visualization: the way a layer displays its features, such as Polygon, Line, Point, Symbol, or Heatmap.

Layout properties: define how data for a layer is passed to the GPU, such as icon or text size, font, offset, or visibility.

Paint properties: applied later in the rendering process, such as color, opacity, halo, or width.

Font fallback: the font your map switches to when the default font doesn’t support some characters, such as Arabic or Cyrillic.

Was this helpful?