Creating Dynamic Overlays with Overpass - IsraelHikingMap/Site GitHub Wiki

Israel Hiking Map allows defining custom layers with data provided by an Overpass query. The layer is defined using a URL to Maplibre Style JSON file.

Using Overpass-Turbo

  1. Create a query using Overpass Turbo and get a permanent link for it

image

  1. Copy the /s/... part of the produced link

image

Create a new gist for the style file

  1. Open GitHub Gist.
  2. Login or create a new account, if needed.
  3. Add a gist with the "+" button.
  4. Use .json as the file type.
  5. Define a Maplibre style using a geojson source.
  6. Use the shortcut in the geojson data attribute. For example: "data": "overpass://s/27rG".
  7. Add "metadata": {"IHM:overlay": true}, to all layers.
  8. Modify the layer style as you see fit. For example:
{
  "version": 8,
  "name": "Overpass-overlay-example",
  "sources": {
    "overpass-points": {
      "type": "geojson",
      "data": "overpass://s/27rG"
    }
  },
  "layers": [
    {
      "id": "overpass-point",
      "type": "circle",
      "metadata": {"IHM:overlay": true},
      "source": "overpass-points",
      "paint": {
        "circle-radius": 10,
        "circle-color": "#f22",
        "circle-stroke-width": 2,
        "circle-opacity": 0.3,
        "circle-stroke-color": "#d0f",
        "circle-stroke-opacity": 0.7
      }
    }
  ]
}
  1. Save the gist
  2. Open the raw view and copy its address

Create a new overlay in Israel Hiking Map

  1. Paste the address of the raw gist in the "Address" field.
  2. Save the new overlay.
  3. Create a new share for the map to save this layer in the cloud and potentially share with others.

Using textual query

For simple Overpass queries, it may be easier to type the query directly in the data field. For example:

"data": "overpass://nw[amenity=\"drinking_water\"](area:3606195356);"

Note the use of \" escaping. It is also possible to use UUencode. For example:

"data": "overpass://nw%0A%20%20%5Bamenity%3D%22drinking_water%22%5D%0A%20%20(area%3A3606195356)%3B"

Notes:

  • Do not use Overpass-Turbo shortcuts such as {{bbox}}.
  • There is a new "Raw" link for every version of the gist. Don't forget to update the link in the overlay definition and update the cloud share after any change to the gist.
  • The overpass query is run once every time the overlay becomes visible.