Not beautiful yet - detailed css is missing, and with lot's of ideas to extend further, but working, and basically solving the issue #8.

As a side node I changed the view buttons (Map, Data) functionality to easily support more than two tabs (I added a third one for the table), and slightly generalized the css code.

For example,

(
  relation(3791784);
  >;
);
out;

used to show all relation members, but it currently shows just one dot for the relation.

The same disappearance happens with out geom:

relation(3791784);
out geom;

Reason for this PR

At the moment the UI seems to be outdated with the gradients in the menu bar, the small buttons with color shadows, and half-transparent modals with small buttons and no border.

There is heavy use of jQuery UI, which is also old, and better alternatives exist.

Some options of lightweight frameworks would be Bulma, Bootstrap or Spectre. They can usually used without Javascript.

Attached is a PR which rewrites the main UI of the application. I am wondering if such a thing would be accepted. This is just a start, there may be more to be improved (accordion in modals, usage of icons, etc.).

Changes in this PR

• Addition of Bulma CSS (https://bulma.io/)
• Removal of much custom CSS
• Addition of Font Awesome icons (used in menu bar, custom leaflet controls, dialogs) (https://fontawesome.com/icons?d=gallery)
• Usage of Bulma modals for presenting dialogs to the user. Replaces all usages of jQuery modals/dialogs.
• Usage of Bulma box and form styles for improving content of many modals. Replaces all occurrences of jQuery accordeon.
• The breakpoint of 'mobile' devices has been changed to 1024px width (in line with Bulma breakpoints).
• Improve readability of Help and Settings dialogs by using semantic HTML.

Other things (future)

• It would be great if JavaScript ES6 could be used (classes, template litersals, etc.).
• It seems that Travis does not report PR test results on PRs.

Screenshots of this PR

(Improved main application interface)

(Improved modals (here the query wizard))

(Improved loading modal with indeterminate loading bar)

The other day, I added a wiki template* to the OSM wiki to automatically render Overpass QL source code in a <div> section along with the well known steering wheel icon pointing to overpass turbo. Once you click on the icon, the exact same source code is opened up in overpass turbo (Example). So, there's no more fiddling with shortlinks in the wiki and trying to keep everything in sync - the Overpass query in the wiki is the single source of truth now. :sunglasses:

To motivate people to add more examples to the wiki, I thought about some new "Export to Wiki" feature in overpass turbo. Manually adding examples is of course also possible. However, it involves some insane escaping, which easily gets into the way of adding something useful to the wiki:

Conversion wise, I could identify at least the following two issues, which would have to be covered by an Overpass QL -> Wiki text conversion:

• overpass turbo extensions need escaping: {{bbox}} turns into {{((}}bbox{{))}}
• | needs to be escaped as {{!}}, basically everywhere, in particular in regular expressions.

Example output for "Export for Wiki":

{{OverpassTurboExample|query=
[out:json][timeout:800];
// Get all schools in current bounding box
( way[amenity=school]({{((}}bbox{{))}});
  node[amenity=school]({{((}}bbox{{))}});
  rel[amenity=school]({{((}}bbox{{))}});
)->.schools;
// find highway=* around schools with radius 50m, ignoring
// footway and paths. In addition, highways are relevant if they 
way(around.schools:50)[highway][highway!~"^(footway{{!}}path)$"]
   (if: (is_number(t[maxspeed]) && t[maxspeed] > 30) {{!}}{{!}} 
        !is_tag(maxspeed) )->.streets;
}}

//edit: *template documentation on the osm wiki: https://wiki.openstreetmap.org/wiki/Template:OverpassTurboExample

You may want to add the instance at https://overpass.kumi.systems/api/ to the list of suggested servers. It runs on quite strong hardware (see wiki) and keeps attic data, so it should be able to take some load off the instance at overpass-api.de.

continuation of #282 (moving onto a branch on the main github repo for easier collaboration @simon04).

• [x] install packages from npm via
• [x] use ES6 module export/import
• [x] use webpack for bundling the ide (index.html)
• [x] use webpack for bundling the interactive map (map.html)
• [x] make the tests run again
• [x] get rid of *_packaged.html files
• [x] switch to different publishing mechanism: use gh-pages branch to contain only bundled stuff (like this maybe)?

The interactive map (map.html) export has fallen behind the regular overpass turbo functionality quite a lot (e.g. mapcss, data statement, etc.). Bring it up to date.

• [x] MapCSS
• [x] Data Statement
• [ ] other Parameters
• [x] small features rendering
• [ ] …?

Currently, nodes are shown as a blue circle. It would be great to be able to set a custom image for a marker. Probably, it's out of scope of overpass api, but still good to have for embed map service.

I have previously saved my often used, or customized queries, and never had problems loading them. Today, I just discovered that I lost all my saved queries. :sob:

Any suggestions how to recover these?

With current overpass and JOSM Version 8243, JOSM gives:

Cannot open URL 'http://overpass-api.de/api/interpreter?fixme=JOSM-ticket-8566&data=%2F*%0AThis%20has....' The following download tasks accept the URL patterns shown:

Due to the fixme=JOSM-ticket-8566 string.

• fountain in Besançon display an error message, but fountain in Besancon work fine
• "bus stop" around Béziers don't work, the "good" query is "bus stop" around Beziers

1. After running the following query, the document title will be "amenity=drinking_water | overpass turbo"

// @name amenity=drinking_water
node[amenity=drinking_water]({{bbox}});

2. After loading the example "Mountains in Area", the query will contain @name and after running the document title will be "Mountains in Area | overpass turbo"

// @name Mountains in Area
...

The syntax is inspired from https://sass-lang.com/documentation/syntax/comments#documentation-comments

Bumps ansi-regex from 5.0.0 to 5.0.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

// introduces a one-line comment. So no matter what stupid stuff is written afterwards, it should not interest the compiler/interpreter.

In the following code, however, there is an error message with subsequent abort of the processing, which, from my point of view, is not correct:

// {{geocodeArea: "Darmstadt:Darmstadt-Dummes Zeug"}}->.searchArea;
{{geocodeArea:"Darmstadt:Darmstadt-Nord"}}->.searchArea;

(
  nw[fixme]   (area.searchArea);
);

out meta;
>;
out meta qt;

Possibly needs to be forwarded to https://github.com/drolbr/Overpass-API but I'm not sure:

When doing an export of the borders of France I got invalid GPX code as one coordinate was so close to latitude 0 that it was exported in scientific notation:

<trkpt lat="49.3267136" lon="0.0005797"/>
<trkpt lat="49.3264086" lon="-2e-7"/>
<trkpt lat="49.3261744" lon="-0.0005312"/>

My query:

[out:json];

area["name"="France"]->.country;
rel["name"="France"]["type"="boundary"]["admin_level"="2"];
(
way(r)["maritime" != "yes"]({{bbox}});
way(area.country)["natural"="coastline"]({{bbox}});
);

out body;
>;
out skel qt;

Edit for context: I was trying to import the file into Maperitive v2.4.3