Ultra/Styling
Servers status · Versions · Development · Technical design · Installation · XAPI compatibility layer · Public transport sketch lines · Applications · Source code and issuesOverpass turbo · Wizard · Overpass turbo shortcuts · MapCSS stylesheets · Export to GeoJSON · more · Development · Source code and issues · Web siteOverpass 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;
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;
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;