wip: add quick help for overpass importer expressions syntax

umap/static/umap/js/modules/help.js

@@ -144,6 +144,22 @@ const ENTRIES = {
     </ul>
   </div>
   `,
+
+  overpassImporter: `
+  <div>
+    <h4>${translate('Overpass supported expressions')}</h4>
+    <ul>
+      <li>${translate('key (eg. building)')}</li>
+      <li>${translate('!key (eg. !name)')}</li>
+      <li>${translate('key=value (eg. building=yes')}</li>
+      <li>${translate('key!=value (eg. building!=yes')}</li>
+      <li>${translate('key~value (eg. name~Grisy')}</li>
+      <li>${translate('key="value|value2" (eg. name="Paris|Berlin")')}</li>
+    </ul>
+    <div>${translate('More info about Overpass syntax')}: <a href="https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide">https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide</a></div>
+    <div>${translate('For more complex needs, see')} <a href="https://overpass-turbo.eu/">https://overpass-turbo.eu/</a></div>
+  </div>
+  `,
 }
 
 export default class Help {

umap/static/umap/js/modules/importers/overpass.js

@@ -5,7 +5,7 @@ import { translate } from '../i18n.js'
 const TEMPLATE = `
   <h3>Overpass</h3>
   <label>
-    ${translate('Selector')}
+    <span data-help="overpassImporter">${translate('Expression')}</span>
     <input type="text" placeholder="amenity=drinking_water" name="tags" />
   </label>
   <label>
@@ -34,6 +34,7 @@ class Autocomplete extends SingleMixin(BaseAjax) {
 
 export class Importer {
   constructor(map, options) {
+    this.map = map
     this.name = 'Overpass'
     this.baseUrl = options?.url || 'https://overpass-api.de/api/interpreter'
   }
@@ -53,6 +54,7 @@ export class Importer {
         boundaryName = choice.item.label
       },
     })
+    this.map.help.parse(container)
 
     const confirm = () => {
       const outMode = container.querySelector('[name=out-mode]').value