Overpass Ultra/Styling

Overpass API · Language reference · Language guide · Technical terms · Areas · Query examples · Sparse Editing · Permanent ID · FAQ · more · Web site
Servers status · Versions · Development · Technical design · Installation · XAPI compatibility layer · Public transport sketch lines · Applications · Source code and issues

Overpass turbo · Wizard · Overpass turbo shortcuts · MapCSS stylesheets · Export to GeoJSON · more · Development · Source code and issues · Web site

Overpass Ultra · Overpass Ultra extensions · MapLibre stylesheets ·more · Source code and issues · Web site

Overpass Ultra supports MapLibre Stylesheets for styling map-features. Below is a introduction on how to use MapLibre styles in Ultra, some examples and a specification of Ultra's styling support.

How to Use

The MapLibre styling can be attached to a query written in the Overpass-QL query language style: key of YAML front-matter.

---
style: ... your MapLibre style here ...
---
... your overpass query here ...

The value of the style: key can contain:

• a URL to a MapLibre style
• a full MapLibre style object
• a partial MapLibre style

Partial MapLibre styles

In order to simplify the use of MapLibre styles, Overpass Ultra allows you to define only the information for styling the Overpass API results. It does this by appending the layers you specify to those in the base map style. The base map style can be customized via the extends: key.

Additionally, in your layers you can omit the source: and id: keys and Overpass Ultra will populate them automatically.

In order to place your layers below existing style layers, you can use the beforeLayerId: key.

Examples

Line Styles

This example styles cycle infrastructure results overtop of the default map style.

---
style:
  layers:
    - type: line
      filter: [any, [==, [get, cycleway], track], [==, [get, 'cycleway:right'], track], [==, [get, 'cycleway:left'], track]]
      paint: &paint
        line-width:
          stops: [[13, 2.5], [16, 4]]
        line-color: blue
    - type: line
      filter: [any, [==, [get, cycleway], lane], [==, [get, 'cycleway:right'], lane], [==, [get, 'cycleway:left'], lane]]
      paint:
        <<: *paint
        line-dasharray: [4, 2]
    - type: line
      filter: [any, [==, [get, cycleway], shared_lane], [==, [get, 'cycleway:right'], shared_lane], [==, [get, 'cycleway:left'], shared_lane]]
      paint:
        <<: *paint
        line-dasharray: [1, 2]
---
[bbox:{{bbox}}];
(
way[cycleway][cycleway!=no];
way["cycleway:right"]["cycleway:right"!=no];
way["cycleway:left"]["cycleway:left"!=no];
);
out geom;

Load query in Overpass Ultra

PNG sprites via HTTPs

---
style:
  layers:
   - type: symbol
     layout:
       icon-overlap: always
       icon-size: 0.5
       icon-image: https://open.trailsta.sh/dist/icons/bike_repair_station.png
---
[bbox:{{bbox}}];
node[amenity=bicycle_repair_station];
out geom;

Load query in Overpass Ultra

Lines, Basemap, & Sprites

This example styles the basemap using Protomaps Black, POI using the spritesheet from mordor.bike, and line.

---
style:
  extends: https://styles.trailsta.sh/protomaps-black.json
  sprite: https://mordor.bike/sprites
  layers:
    - type: line
      filter: [==, [geometry-type], LineString]
      paint: {line-width: 6}
    - type: line
      filter: [==, [geometry-type], LineString]
      paint: {line-color: white, line-width: 2}
    - type: symbol
      filter: [==, [geometry-type], Point]
      layout:
        icon-overlap: always
        icon-image:
          - case
          - [==, [get, shop], convenience]
          - convenience
          - [==, [get, amenity], restaurant]
          - restaurant
          - [==, [get, bridge], "yes"]
          - bridge
          - [==, [get, name], Scuffletown Park]
          - start
          - [==, [get, name], Chickahominy Riverfront Park]
          - camp
          - park
        text-optional: true
        text-anchor: left
        text-field:
          - case
          - [==, [get, bridge], "yes"]
          - DFL Bridge
          - [get, name]
        text-font: [Noto Sans Regular]
        text-justify: left
        text-offset: [1, 0]
        text-size: 20
        text-max-width: 7
      paint:
        text-color: white
        text-halo-color: black
        text-halo-width: 2
---
(
nwr[leisure=park][name="Scuffletown Park"](37.5549,-77.4686,37.5567,-77.4657);
nwr[wikidata=Q49495628];
nwr[wikidata=Q49491008];
nwr["brand:wikidata"=Q259340][shop=convenience](37.4881,-77.4052,37.4902,-77.4011);
nwr[highway][bridge=yes][ref="VA 5"](37.3300,-77.1836,37.3308,-77.1820);
nwr[amenity=restaurant][name~"^Cul"](37.3396,-77.0769,37.3442,-77.0678);
nwr[leisure=park][name="Chickahominy Riverfront Park"](37.2585,-76.8855,37.2763,-76.8506);
); out center;
relation(8010285); out geom;

Load query in Overpass Ultra