Maps & styles basics

Map design First steps

This collection of articles forms a suggested workflow to help you begin with your first steps in map design.

  1. Maps & styles basics
  2. Choose a map style
  3. Quick map editing
  4. How to publish a map

This article explains the general concepts of picking a map style and adjusting it to your needs in the MapTiler Customize tool. You will find a glossary of map-related Customize functions at the end.

To use MapTiler Customize, you need to set up a MapTiler Cloud account. If you don’t have one yet, don’t hesitate to sign up for free!

Choosing a map

After login to MapTiler Cloud you will be located in the Maps section. Click on the NEW MAP button to open the Map wizard with map styles categorized into groups. Read the description of each map if you are not sure which to pick.

basics-map-wizard.png

You can click on the CUSTOMIZE button to adjust the map or on USE THIS MAP and have the map ready as it is for your applications.

The same process can be done in the Maps section by clicking on any map in the list.

basics-maps.png

If you are not sure what map is suitable for your use case, check the article Choose a map style or contact us via email.

MapTiler Customize

MapTiler Customize is a new-generation online map editor. Focused on easy-to-understand UI, you don’t need to be proficient in cartographic principles or JSON syntax in order to create stunning visuals. Customize runs on MapLibre GL JS.

basics-customize.png

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

  1. Quick edits (Alt+Q) - for easy adjustments of map color palette and fonts
  2. Layers (Alt+L) - for complex styling of individual or multiple layers, filtering data or writing JSON
  3. Settings (Alt+S) - for setting global map options such as languages, borders or initial position
  4. Data sources (Alt+D) - for adding, removing, or replacing data or checking data details

Glossary

Map Style = a unique map, either one of MapTiler’s default styles or your own style

MapLibre style/style.json = a JSON document that defines the visual appearance of a map - colors, layer order, data sources, etc. (every map style is a style.json); this is what you get when you download a map style

Layer = an entity in a map containing specific map features that are styled together (Road network); takes the data from a data source layer, optionally filters features, and defines how those features are styled

Block = a group of layers

Verticality = order of the layers in the map; the first one is rendered on top

Style/Data = style panel serves for map design/data panel handles filters, geometry, or type of visualization

Filter = specifies conditions on source data; only features that match the filter are displayed in the map

  • Filter Logic: All = returns true if all the inputs are true
  • Filter Logic: Any = returnstrueif any of the inputs aretrue
  • Filter Logic: None = returns true if none of the inputs are true

Attributes = information linked to the data that describes features and is used for filtering: class, admin_level, rank, name etc.

Layout properties = define how data for a layer is passed to the GPU; icon or text size, font, offset, visibility, text-field etc.

Paint properties = are applied later in the rendering process and happen synchronously: color, opacity, halo, width, etc.

Icon = properties for styling small images (icons) representing point data

Text = properties for styling text labels such as font, size, or justification

Fill = properties for styling fill of polygons such as color, opacity, or pattern

Outline = properties for styling lines or borders of polygons; color, opacity, width, or style (dash array)

Layout = influences the placement of features: anchor, padding, overlap, etc.

Effects = includes blur of lines

Default View = defines the initial position of the map with the zoom level, map center (latitude, longitude), tilt, and rotation angle

Font Fallback = a font to which your default font switches in case of unsupported characters (Arabic, Cyrillic etc.)

Data source = source of map features (tiles or other data formats); every layer needs to have one

Data layer = an entity in a data source containing specific map features

Geometry = encoding of geographic data, related to data representation; Polygon, LineString, Point etc.

Visualization = specifies the styling options; Polygon, Line, Point, Symbol, Heatmap etc.

Save = saves a map or your changes in the MapTiler Cloud interface

Publish = publishes your changes into production across all your apps where the map is embedded

Next steps

Continue to Choose a map style to learn which map style is suitable for your use case.

MapTiler Customize
MapLibre GL JS style spec
Choose a map style
Quick map editing
Global map settings
Layer styling
Map icons & patterns (sprites)
Layer filters
Add a new style layer
Data sources
Editing JSON