Overpass Ultra/Styling

From OpenStreetMap Wiki
Jump to navigation Jump to search
Overpass API logo.svg
edit
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 · Examples · Overpass Ultra extensions · MapLibre stylesheets · URL Params · 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 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 Load query in Overpass Ultra


Lines, Basemap, & Sprites

This example styles the basemap using Protomaps Black, POI using bundled sprites, and line.

---
style:
  extends: https://styles.trailsta.sh/protomaps-black.json
  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]
          - /icons/maki/commercial.png
          - [==, [get, amenity], restaurant]
          - /icons/maki/restaurant.png
          - [==, [get, bridge], "yes"]
          - /icons/maki/bridge.png
          - [==, [get, name], Scuffletown Park]
          - /icons/maki/embassy.png
          - [==, [get, name], Chickahominy Riverfront Park]
          - /icons/maki/campsite.png
          - /icons/maki/park.png
        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:
        icon-color: white
        icon-halo-color: black
        icon-halo-width: 4
        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 Load query in Overpass Ultra