A bit more than a year ago I built the first version of Overpass Ultra. It was an experiment in making an Overpass client similar to overpass turbo but powered by MapLibre GL JS in order take advantage of its excellent support for large GeoJSON sources and vector styling capabilities.

Today, I’m excited to announce version 2 of Overpass Ultra which features a number of improvements over the first version, including the following:

• A new URL: overpass-ultra.us
• Configuration of the style & Overpass API server via YAML Frontmatter
• Simplified styling of the results with a partial MapLibre style
• Customization of the detail popups
• lz-string compressed queries in share URLs
• The ability to share the result as an interactive map without the “IDE” UI (not just hidden like in v1)
• A handy menu with MapLibre styles that work with Overpass Ultra

Here’s a screenshot demonstrating a styled query:

YAML frontmatter

Version 2 of Overpass Ultra forgoes the Setting modal from v1 for configuration of all settings via YAML frontmatter before the Overpass query. For example, to specify the Kumi Systems Overpass server and the Protomaps Light style, prepend this to your query:

---
server: https://overpass.kumi.systems/api/
style: https://styles.trailsta.sh/protomaps-light.json
---

Styling

The style key in the frontmatter can be set to:

• the URL to a style.json
• an entire MapLibre style object (detected by the presence of a version key in the object)
• a partial MapLibre style object
  • extends the default style, or a specific style via the extends key (must be an URL to a style JSON)
  • layers can be added
    • layers specified in the layers key are appended to the existing style’s layers
    • layers can specify a spot in the style’s existing layers using the beforeLayerId key, similar to map.addLayer
    • the source & id keys are optional, and will default to OverpassAPI and overpass-ultra-{i} respectively
• sources are merged with the style’s sources

In all these cases, if there doesn’t exist a source named OverpassAPI, it is added. And if there exist no layers using it, the default layers are added.

Example styled query

This query for sidewalks styles the result as red lines rather than the default:

---
style:
  layers:
    - type: line
      paint:
        line-width: 4
        line-color: red
---
way[highway=footway][footway=sidewalk]({{bbox}});
out geom;

Load query in Overpass Ultra

Customized popups

You can customize the contents of the details popup with the popupTemplate key in the frontmatter using LiquidJS. You can also disable the popup by setting the key to false.

This example provided by Minh Nguyễn, shows photos of sirens by model from Wikidata and hub.toolforge.org:

---
popupTemplate: >
  <h2>
    {{ type }}
    <a href="https://openhistoricalmap.org/{{ type }}/{{ id }}" target="_blank">{{ id }}</a>
    <a href="https://openhistoricalmap.org/edit?{{ type }}={{ id }}" target="_blank">✏️</a>
  </h2>
  {% assign wikidata = tags["siren:model:wikidata"] ?? tags["model:wikidata"] %}
  {%- if wikidata %}
  <img src="https://hub.toolforge.org/{{ wikidata }}?p=image&w=200&h=150">
  <hr>
  {%- endif%}
  {%- for tag in tags %}
    <code>{{ tag[0] }} = {{ tag[1] }}</code>
    <br>
  {%- endfor%}
---
[bbox:{{bbox}}];
node["emergency"="siren"][~"^(siren:)?model:wikidata$"~".*"];
out geom;

Load query in Overpass Ultra

More info

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

The “live” feature from v1 is not available in v2, but if you like it or any other feature of Overpass Ultra v1, it will always be available at overpass-ultra.trailsta.sh

Report bugs and feedback on GitLab or Mastodon.