@trailstash/ultra/docs/open-with-ultra.md

A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc

# Open with Ultra

**Open with Ultra** is a [bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet) for making it
easier to use Ultra.

## Install

Install it by dragging the **Open with Ultra** link below to your bookmarks bar.

<center><a id="bookmarklet">**Open with Ultra**</a></center>

<style>
#bookmarklet {
  display: inline-block;
  background: #526cfe;
  color: white;
  box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
  padding: 10px;
}
</style>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.7.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/dschep/jQuery-Bookmarklet@master/jquery.bookmarklet.js"></script>
<script>
const b = document.querySelector("#bookmarklet")
b.onclick = e => { e.preventDefault(); return false; };
$(b).bookmarkletHelperArrow();
const code = () => {
  const origin = "https://overpass-ultra.us";
  if (window.location.host === "overpass-turbo.eu") {
    const search = new URLSearchParams();
    search.set(
      "query",
      JSON.parse(localStorage.getItem("overpass-ide_code")).overpass,
    );
    if (localStorage.getItem("overpass-ide_coords_zoom")) {
      search.set(
        "m",
        [
          parseInt(localStorage.getItem("overpass-ide_coords_zoom")) - 1,
          localStorage.getItem("overpass-ide_coords_lat"),
          localStorage.getItem("overpass-ide_coords_lon"),
        ].join("/"),
      );
    }
    window.location = `${origin}/#${search.toString()}`;
  } else if (window.location.host === "qlever.cs.uni-freiburg.de" || window.location.host === "qlever.dev") {
    const search = new URLSearchParams();
    search.set("query", `---\ntype: qlever\nserver: ${document.querySelector("#backend-slug").textContent}\n---\n${document.querySelector(".CodeMirror").CodeMirror.getValue()}`);
    window.location = `${origin}/#${search.toString()}`;
  } else if (window.location.host === "sophox.org") {
    const search = new URLSearchParams();
    search.set("query", `---\ntype: sophox\n---\n${localStorage.getItem("wikibase.queryService.ui.Editor")}`);
    window.location = `${origin}/#${search.toString()}`;
  } else if (window.location.host === "gist.github.com") {
    window.location = `${origin}/#query=gist:${window.location.pathname.split("/").slice(-1)[0]}`;
  } else if (window.location.host === "github.com") {
    window.location = `${origin}/#query=url:https://raw.githubusercontent.com${window.location.pathname.replace("/blob", "")}`;
  } else if (window.location.host === "geojson.io") {
    window.location = `${origin}/#query=${encodeURIComponent(JSON.stringify(window.api.data.all().map))}`;
  } else {
    window.location = `${origin}/#query=${encodeURIComponent(window.location)}`;
  }
}
b.href = `javascript:(${code.toString()})();`
</script>

## Behavior

It features special support for:

- [overpass-turbo.eu](https://overpass-turbo.eu) - Loads query & viewport from overpass turbo in
  Ultra
- [QLever](https://qlever.cs.uni-freiburg.de/) - Loads query & server from the QLever in Ultra
- [Sophox](https://sopox.org/) - Loads query & server from the Sophox in Ultra
- [geojson.io](https://geojson.io) - loads the GeoJSON from geojson.io as the query in Ultra
- [Gists](https://gist.github.com) - loads the current gist as the query in Ultra
- [Github](https://github.com) - loads the `githubusercontent.com` URL for a file loaded in the web
  UI

For all other sites, it loads the URL as the query.

Ultra features some query providers which work well with this:

- `osmWebsite` - detects `https://openstreetmap.org/[node|way|relation]/:id` URLs and loads that
  object via the Overpass API
- `osmWiki` - detects `https://wiki.openstreetmap.org/wiki/Key:` and
  `https://wiki.openstreetmap.org/wiki/Tag:` URLs and loads that object with that tag or key via
  the Overpass API
- `taginfo` - detects `https://taginfo.openstreetmap.org/key/` and
  `https://taginfo.openstreetmap.org/tags/` URLs and loads that object with that tag or key via the
  Overpass API
- `kml` - detects `https://www.google.com/maps/d` (Google My Maps) URLs and loads that map via the
  KML export.