Some Overpass Ultra Updates

In January, I introduced Overpass Ultra v2. Today, I’m pleased to announce some updates to further improve Overpass Ultra’s customization capabilities, enabling you to make custom maps like this one:

Loading queries from URLs & Gists

In order to facilitate sharing updatable overpass queries&maps, Overpass Ultra is now able to load queries from a URL or Github Gist.

To use this feature, specify either query=url:... or query=gist:... in the hash parameters. For example to load a Gist:

https://overpass-ultra.us/#query=gist:02ab2139d146dd2ee0306a38d96a9c9d

or to load that same Gist with the more flexible (but more verbose when using Gists) url: option:

https://overpass-ultra.us/#query=url:https://gist.githubusercontent.com/dschep/02ab2139d146dd2ee0306a38d96a9c9d/raw/8d4b0d38eac64e8dbd772284d4cc094708cd3b26/gistfile1.txt

Improved configurability for the Overpass Ultra “interactive map” view

The YAML-frontmatter options key

When an Overpass Ultra query is run in “interactive map” mode, you can specify the MapOptions that are passed to the MapLibre constructor.

For example, you can use this to fit to bounds rather than relying on the z/x/y URL parameters, making for a more consistent experience across screen sizes. EG:

1
2
3
4
---
options:
  bounds: [-77.64656066894544,37.577235791111384,-76.92558288574232,38.13563674858875]
---

the YAML-frontmatter controls key

When an Overpass Ultra query is run in “interactive map” mode, you can specify controls to be added to the map with the controls key in the YAML-front matter. The key should contain a list of objects. Each object must specify a type key containing the name of a control present in MapLibre. It can optionally contain an options key who’s contents are passed to the control’s constructor and a position key that is passed to map.addControl.

For example, to add a NavigationControl to your map:

1
2
3
4
5
6
7
---
controls:
  - type: NavigationControl
    options:
      visualizePitch: true
    position: bottom-left
---

Bundled Icons

In order to make it as easy as possible to put nice icons on your map, Overpass Ultra now bundles the Maki and Temaki iconsets as SDFs. These can be loaded via a relative path, eg:

1
icon-image: /icons/maki/garden.png

You can browse all the available icons in Overpass Ultra’s source code: https://gitlab.com/trailstash/overpass-ultra/-/tree/main/static/icons

Putting it all together

The reason for all of these changes is to enable sharing easy-to-use Overpass-powered maps. The map of gardens at the top of this post is created using the following config&query:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
---
options:
  hash: m
  attributionControl:
    customAttribution: '<a href=".">Overpass Ultra</a>'
  bounds: [-77.49784362036736,37.50408772391166,-77.40437276428577,37.57742791260068]
  maxBounds: [-77.49784362036736,37.50408772391166,-77.40437276428577,37.57742791260068]
controls:
  - type: GeolocateControl
    options:
      positionOptions:
        enableHighAccuracy: true
      trackUserLocation: true
style:
  extends: https://styles.trailsta.sh/protomaps-light.json
  layers:
    - type: circle
      paint:
        circle-color: '#6dad6f'
        circle-stroke-color: white
        circle-stroke-width: 2
        circle-radius: 3
    - type: symbol
      paint:
        icon-color: '#6dad6f'
        icon-halo-color: white
        icon-halo-width: 2
        text-halo-color: white
        text-halo-width: 2
      layout:
        icon-padding: 0
        icon-image:
          - case
          - [==, [get, 'garden:type'], community]
          - /icons/maki/garden-centre.png
          - /icons/maki/garden.png
        text-field: '{name}'
        text-font: [Noto Sans Regular]
        text-variable-anchor: [left, right, top, bottom]
        text-optional: true
        text-justify: auto
        text-radial-offset: 1
---
[bbox:37.50408772391166,-77.49784362036736,37.57742791260068,-77.40437276428577];
nwr[leisure=garden];
out center;

Here is a link demonstrating loading that from a Gist in Overpass Ultra’s “interactive map” mode: https://overpass-ultra.us/#map&query=gist:8ecb8ba0a0136f4f0dbc36de82061de4

More

There is more documentation and examples available on the OSM Wiki.

For the historical mapping fans out there, a version of Overpass Ultra pre-configured for use with OpenHistoricalMap is available at ohm.overpass-ultra.us

Report bugs and feedback on GitLab or Mastodon.