Making maps with Ultra | Mapping USA 2025

class: center, middle

# Making maps with Ultra
### Daniel Schep

---
### Introduction overpass-turbo.eu
<img style="vertical-align: middle" src="https://camo.githubusercontent.com/21bde99de8822cfb3badba8e8fdf5e62630d2d14a2195edf0d7d542c0c4754cf/68747470733a2f2f7261776769742e636f6d2f4c6561666c65742f4c6561666c65742f6d61696e2f7372632f696d616765732f6c6f676f2e737667" width="50%">
 + MapCSS

<img src="https://wiki.openstreetmap.org/w/images/a/a4/Turbo-mapcss-ex1.png" width="45%">
<img src="https://wiki.openstreetmap.org/w/images/8/85/Turbo-mapcss-ex2.png" width="45%">
---
### Introduction overpass-ultra.us
<img style="vertical-align: middle" src="https://raw.githubusercontent.com/maplibre/maplibre.github.io/refs/heads/main/public/img/maplibre-logos/maplibre-logo-dark-transparent-bg.png" width="50%">

<img src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/Screen%20Shot%202025-01-24%20at%2011.21.50.png?v=1737735717380" width="45%">
<img src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/Screen%20Shot%202025-01-24%20at%2011.21.51.png?v=1737735719774" width="45%">
---
### Performance overpass turbo

<video width="100%" controls>
 <source src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/turbo.webm?v=1737736316773"/>
</video>
---
### Performance Ultra

---
### Styling Overpass turbo - MapCSS

<img src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/5b4bef77-ebda-4feb-90fa-437d03fc8d15.image.png?v=1737735080296" width="100%">
---
### Styling Ultra - MapLibre

<img src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/d0d47262-9c76-4820-95f1-b27cfa590bd6.image.png?v=1737735155207" width="100%">
---
### Styling differences with MapLibre style spec

* No need to specify `source` when styling query result
* Extend existing `style.json`
 ```
 style:
 extends: https://tiles.openfreemap.org/styles/liberty
 layers:
 ...
 ```
* YAML, including support for anchors
 ```
 circle-color: &color red
 circle-stroke-color: *color
 ```
* `paint` & `layout` keys at layer root
 
 ```
 - type: circle
 paint:
 circle-color: red
 ```
 vs
 
 ```
 - type: circle
 circle-color: red
 ```
---
### Styling Vector style benefits

<img src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/e416dc26-0b5f-4b80-915c-f15d230706e1.image.png?v=1737750921222" width="100%">
---
### Beyond Overpass query providers

<div style="float:right">
<code>+</code> default provider.
 <code>*</code> detected by <code>auto</code> provider.
</div>
<ul>
<li><code>auto+</code></li>
<li><code>overpass*</code></li>
<li><code>ohsome</code></li>
<li><code>sparql</code></li>
<li><code>geojson*</code></li>
<li><code>kml*</code></li>
<li><code>gpx*</code></li>
<li><code>tcx*</code></li>
<li><code>osmxml*</code></li>
<li><code>osmjson*</code></li>
<li><code>esri*</code></li>
<li><code>raster*</code></li>
<li><code>vector*</code></li>
<li><code>raw*</code></li>
<li><code>osmWebsite*</code></li>
<li><code>osmWiki*</code></li>
<li><code>taginfo*</code></li>
</ul>

---
### Beyond Overpass planet-scale queries with QLever

<video width="100%" controls>
 <source src="https://cdn.glitch.global/74703433-589e-4cff-8b79-a57e6e0940df/qlever.webm?v=1737749750435"/>
</video>
---
### Beyond Overpass Esri MapServer/FeatureServer

---

### Comparison to other tools overpass turbo
 
| | Ultra | overpass turbo |
|-|-|-|
|OverpassQL/XML|🟢|🟢|
|Query wizard |🔴|🟢|
|Syntax highlighting |🔴|🟢|
|Short links|🔴|🟢|
|Geocoding support|🔴|🟢|
|Non-spatial results|🔴|🟢|
|Popup customization|🟢|🔴|
|Load queries from gists|🟢|🔴|
|Load queries from URLs|🟢|🔴|
|Styling|MapLibre|MapCSS|
---

### Comparison to other tools geojson.io
 
| | Ultra | geojson.io |
|-|-|-|
|Text-based editing|🟢|🟢|
|Graphical editing|🔴|🟢|
|Tabluar editing|🔴|🟢|
|Syntax highlighting |🔴|🟢|
|GeoJSON simple styling|🟢|🟢|
|MapLibre styling|🟢|🔴|
---

### Comparison to other tools Maputnik
 
| | Ultra | Maputnik |
|-|-|-|
|Graphical editing|🔴|🟢|
|Textual editing|🟢|🟠|
---
 
### What's next?

* Export options
 * `style.json`
 * HTML
* Turf.js integration
---
 
### That's all folks!

* Use it: [overpass-ultra.us](https://overpass-ultra.us)
* Documentation: [overpass-ultra.us/docs](https://overpass-ultra.us/docs)
* These slides: [ultra-mapping-usa-2025.glitch.me](https://ultra-mapping-usa-2025.glitch.me)
* Source code: [gitlab.com/trailstash/ultra](https://gitlab.com/trailstash/ultra)
* Contact me:
 * @Daniel Schep on OSM US Slack
 * @dschep@mastodon.social on Mastodon