Incorporate upstream changes related to styler plus translations.

OpenHistoricalMap · Nov 4, 2024 · 6311c14 · 6311c14
2 parents 0810fc7 + 0ff477e
commit 6311c14
Show file tree

Hide file tree

Showing 56 changed files with 2,683 additions and 2,353 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,16 +1,18 @@
-## Latest changes live on https://tyrasd.github.io/overpass-turbo/
+<!--## undeployed-->
 
-- Implement nwr shorthand
+## 2024-11-03
+
+- Implement `nwr` shorthand in query wizard
 - Display Git commit date in help/about
 - Use modern build tools: vite, vitest
 - Show shortcuts in tooltip
 - Wizard: checkbox to include/exclude query comments
-- Migrate to @openstreetmap/id-tagging-schema
-- Migrate source code to TypeScript (#606)
-- Retain query in URL when loading overpass-turbo (#563)
-- Store query in URL when running it (#585)
-- Trim `w=` URL parameter (#609)
-- Support many [MapCSS label properties](https://wiki.openstreetmap.org/wiki/MapCSS/0.2#Label_properties) (#627)
+- Migrate to `@openstreetmap/id-tagging-schema`
+- Migrate source code to TypeScript ([#606](https://github.com/tyrasd/overpass-turbo/pull/606))
+- Retain query in URL when loading overpass-turbo ([#563](https://github.com/tyrasd/overpass-turbo/issues/563))
+- Store query in URL when running it ([#585](https://github.com/tyrasd/overpass-turbo/issues/585))
+- Trim `w=` URL parameter ([#609](https://github.com/tyrasd/overpass-turbo/issues/609))
+- Support many [MapCSS label properties](https://wiki.openstreetmap.org/wiki/MapCSS/0.2#Label_properties) ([#627](https://github.com/tyrasd/overpass-turbo/pull/627))
   - `font-family`
   - `font-size`
   - `font-style`
@@ -26,6 +28,9 @@
   - `text-halo-radius`
   - `text-opacity`
   - `text-transform`
+- Implement support for wildcard `*` type selector (to match any map feature)
+- Make rendering of "small" features (i.e. the collapsing of feature geometries to a point marker if they would otherwise have very tiny dimensions at the current zoom level) customizable via a custom new mapcss statement `render: auto/native/point` ([#30](https://github.com/tyrasd/overpass-turbo/issues/30))
+- (beta) Add a wizard-style dialog to auto-generate simple mapcss to style features based on one of two palettes (a qualitative and a sequential one), according to the values of a selectable OSM tag of the current result set
 
 ## 2022-01-09
 

diff --git a/css/default.css b/css/default.css
@@ -364,3 +364,35 @@ kbd {
     0 0 0 2px #fff inset;
   white-space: nowrap;
 }
+
+.modal-card-title .icon {
+  margin-right: 4px;
+}
+
+.palette {
+  width: 22px;
+  display: inline-block;
+  height: 12px;
+  margin-right: 120px;
+}
+.palette.sequential {
+  background: #ffffb2;
+  box-shadow:
+    #fed976 22px 0px 0px 0px,
+    #feb24c 44px 0px 0px 0px,
+    #fd8d3c 66px 0px 0px 0px,
+    #f03b20 88px 0px 0px 0px,
+    #bd0026 110px 0px 0px 0px;
+}
+.palette.qualitative {
+  background: #e41a1c;
+  box-shadow:
+    #377eb8 22px 0px 0px 0px,
+    #4daf4a 44px 0px 0px 0px,
+    #984ea3 66px 0px 0px 0px,
+    #ff7f00 88px 0px 0px 0px,
+    #ffff33 110px 0px 0px 0px;
+}
+#styler-button {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -81,13 +81,27 @@
               data-ide-handler="click:onFfsClick"
               title=""
               data-t="[title]nav.wizard_tt"
-              data-shortcut="Ctrl+Shift+F"
+              data-shortcut="Ctrl+I"
             >
               <span class="icon">
                 <span class="fas fa-magic"></span>
               </span>
               <span class="t" data-t="nav.wizard">Wizard</span>
             </button>
+            <button
+              class="t button"
+              accesskey=""
+              data-ide-handler="click:onStylerClick"
+              title=""
+              id="styler-button"
+              data-t="[title]nav.styler_tt"
+              data-shortcut="Ctrl+K"
+            >
+              <span class="icon">
+                <span class="fas fa-palette"></span>
+              </span>
+              <span class="t" data-t="nav.styler">Style</span>
+            </button>
           </div>
         </div>
         <div class="navbar-item">
@@ -1095,6 +1109,90 @@ <h3 class="t subtitle" data-t="share.options"></h3>
       </div>
     </div>
 
+    <!--styling wizard -->
+    <div class="modal" id="styler-dialog">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">
+            <span class="icon">
+              <span class="fas fa-palette"></span>
+            </span>
+            <span class="t" data-t="[html]styler.title"></span
+            ><span> (beta)</span>
+          </p>
+          <button
+            class="delete"
+            aria-label="close"
+            data-ide-handler="click:onStylerClose"
+          ></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="content">
+            <span class="t" data-t="[html]styler.expl"></span>
+          </div>
+          <div class="field">
+            <div class="control">
+              <input
+                name="attribute"
+                type="text"
+                autofocus="autofocus"
+                placeholder=""
+                value=""
+                id="ffs-input"
+                class="t input monospace"
+                data-t="[placeholder]styler.placeholder"
+                required
+              />
+            </div>
+          </div>
+          <div class="field">
+            <div class="control">
+              <span class="t" data-t="styler.palette"></span>
+              <input type="radio" name="palette" value="qualitative" checked />
+              <label
+                for="qualitative"
+                data-t="[title]styler.palette.qualitative"
+                class="palette qualitative"
+              ></label>
+              <input
+                type="radio"
+                name="palette"
+                value="sequential"
+                id="sequential"
+              />
+              <label
+                for="sequential"
+                data-t="[title]styler.palette.sequential"
+                class="palette sequential"
+              ></label>
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <div class="level">
+            <div class="level-right">
+              <div class="level-item">
+                <button
+                  class="button is-success"
+                  data-ide-handler="click:onStylerRun"
+                  disabled
+                >
+                  <span class="icon">
+                    <span class="fas fa-play"></span>
+                  </span>
+                  <span class="t" data-t="dialog.styler_run"></span>
+                </button>
+                <button class="button" data-ide-handler="click:onStylerClose">
+                  <span class="t" data-t="dialog.cancel">Cancel</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+
     <!-- Unsupported browser warning -->
     <div class="modal" id="warning-unsupported-browser">
       <div class="modal-background"></div>

diff --git a/js/i18n.ts b/js/i18n.ts
@@ -46,19 +46,21 @@ const languages = {
   it: "Italian",
   ja: "Japanese",
   ko: "Korean",
-  lv: "Latvian",
+  // lv: "Latvian",
   mr: "Marathi",
   nl: "Dutch",
   no: "Norwegian",
+  // oc: "Occitan",
   pl: "Polish",
   pt: "Portuguese",
   "pt-BR": "Portuguese (Brazil)",
   ru: "Russian",
   sl: "Slovenian",
+  // th: "Thai",
   tr: "Turkish",
   uk: "Ukrainian",
   vi: "Vietnamese",
-  "zh-CN": "Chinese (Simplified)",
+  // "zh-CN": "Chinese (Simplified)",
   "zh-TW": "Chinese (Taiwan)"
 };
 27;

diff --git a/js/ide.ts b/js/ide.ts
@@ -6,8 +6,11 @@ import html2canvas from "html2canvas";
 import {Canvg} from "canvg";
 import "leaflet";
 import "codemirror/lib/codemirror.js";
+import colormap from "colormap";
 import tokml from "tokml";
 import togpx from "togpx";
+import {default as colorbrewer} from "colorbrewer";
+//import { schemegroups as colorbrewer } from "colorbrewer";
 import configs from "./configs";
 import Query from "./query";
 import {
@@ -763,7 +766,7 @@ class IDE {
                 error() {
                   // todo: better error handling
                   console.error(
-                    "An error occured while contacting the search server osmnames.org :("
+                    "An error occurred while contacting the search server osmnames.org :("
                   );
                 }
               }
@@ -1030,6 +1033,8 @@ class IDE {
       if (typeof ide.run_query_on_startup === "function") {
         ide.run_query_on_startup();
       }
+      // enable auto-styler
+      $("#styler-button").show();
       // display stats
       if (settings.show_data_stats) {
         const stats = overpass.stats;
@@ -1206,7 +1211,7 @@ class IDE {
       return "xml";
     else return "OverpassQL";
   }
-  /* this is for repairig obvious mistakes in the query, such as missing recurse statements */
+  /* this is for repairing obvious mistakes in the query, such as missing recurse statements */
   repairQuery(repair) {
     // - preparations -
     const q = this.getRawQuery(), // get original query
@@ -1842,7 +1847,7 @@ class IDE {
           })
           .fail((jqXHR) => {
             alert(
-              `an error occured during the creation of the overpass gist:\n${JSON.stringify(
+              `an error occurred during the creation of the overpass gist:\n${JSON.stringify(
                 jqXHR
               )}`
             );
@@ -2352,6 +2357,102 @@ class IDE {
       }
     });
   }
+  onStylerClick() {
+    if (!overpass.geojson || overpass.geojson.features.length === 0) return;
+    $("#styler-dialog").addClass("is-active");
+    let allTags = {};
+    overpass.geojson.features.forEach(
+      (feature) => (allTags = {...allTags, ...feature.properties.tags})
+    );
+    make_combobox(
+      $("#styler-dialog input[name=attribute]"),
+      Object.keys(allTags)
+    );
+    function checkTag(key?) {
+      key = key || $("#styler-dialog input[type=text]").first().val();
+      if (allTags[key] !== undefined) {
+        $("#styler-dialog button.is-success").removeAttr("disabled");
+        return true;
+      } else {
+        $("#styler-dialog button.is-success").attr("disabled", "disabled");
+        return false;
+      }
+    }
+    $("#styler-dialog input[type=text]")
+      .first()
+      .unbind("keypress")
+      .bind("keypress", (e) => {
+        if (e.key === "Enter") {
+          if (checkTag()) {
+            this.onStylerRun();
+            e.preventDefault();
+          }
+        }
+      })
+      .unbind("input")
+      .bind("input", checkTag)
+      .unbind("autocompleteselect")
+      .bind("autocompleteselect", (_, ui) => checkTag(ui.item.value))
+      .focus();
+  }
+  onStylerRun() {
+    if (!overpass.geojson || overpass.geojson.features.length === 0) return;
+    const key = $("#styler-dialog input[name=attribute]").val();
+    const values = [
+      ...new Set(
+        overpass.geojson.features
+          .map((f) => f.properties.tags[key])
+          .filter(Boolean)
+      )
+    ].sort((a, b) =>
+      isFinite(a) && isFinite(b) ? a - b : a < b ? -1 : a > b ? 1 : 0
+    );
+
+    let colors: string[];
+    if (
+      $("#styler-dialog input[name=palette]:checked").val() === "qualitative"
+    ) {
+      colors = colorbrewer["Set1"][Math.min(Math.max(values.length, 3), 9)];
+    } else if (values.length <= 9) {
+      colors = colorbrewer["YlOrRd"][Math.max(values.length, 3)];
+    } else {
+      colors = colormap({
+        colormap: "inferno",
+        nshades: values.length,
+        format: "hex",
+        alpha: 1
+      }).reverse();
+    }
+
+    const mapCssColors = {};
+    values.forEach((value, i) => {
+      const color = colors[i % colors.length];
+      if (!mapCssColors[color]) mapCssColors[color] = [];
+      mapCssColors[color].push(`*[${key}=${value}]`);
+    });
+    const mapcss = Object.keys(mapCssColors)
+      .map(
+        (color) =>
+          `${mapCssColors[color].join(",\n")}\n{ color: ${color}; fill-color:${color}; }`
+      )
+      .join("\n");
+
+    let query = ide.getRawQuery();
+    // drop previous auto-styler mapcss
+    query = query.replace(
+      /(\n\n)?{{style: \/\* added by auto-styler \*\/[\s\S]*?}}/,
+      ""
+    );
+    ide.setQuery(
+      `${query}\n\n{{style: /* added by auto-styler */\n${mapcss}\n}}`
+    );
+
+    this.rerender_map();
+    this.onStylerClose();
+  }
+  onStylerClose() {
+    $("#styler-dialog").removeClass("is-active");
+  }
   onSettingsClick() {
     $("#settings-dialog input[name=ui_language]")[0].value =
       settings.ui_language;
@@ -2573,16 +2674,28 @@ class IDE {
       (event.key == "i" &&
         (event.ctrlKey || event.metaKey) &&
         !event.shiftKey &&
-        !event.altKey) || // Ctrl+I
-      (event.key == "f" &&
+        !event.altKey) ||
+      (event.key == "F" &&
         (event.ctrlKey || event.metaKey) &&
         event.shiftKey &&
         !event.altKey)
     ) {
-      // Ctrl+Shift+F
+      // Ctrl+I or Ctrl+Shift+F
       this.onFfsClick();
       event.preventDefault();
     }
+    if (
+      event.key == "k" &&
+      (event.ctrlKey || event.metaKey) &&
+      !event.shiftKey &&
+      !event.altKey
+    ) {
+      // Ctrl+K
+      if (overpass.geojson) {
+        this.onStylerClick();
+      }
+      event.preventDefault();
+    }
 
     if (event.key === "Escape") {
       // Escape