X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/0cd18eb02f853bfa93673f046b793bd53ac5aa68..ce52ba1e6ae4e5ae5fb03e64bde9c7df1dcae4ff:/app/assets/javascripts/index/layers/data.js

diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js
index e1246ca6c..6c8bdc025 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -1,21 +1,6 @@
 OSM.initializeDataLayer = function (map) {
-  var loadedBounds;
-  var dataLayer = map.dataLayer;
-
-  dataLayer.setStyle({
-    way: {
-      weight: 3,
-      color: "#000000",
-      opacity: 0.4
-    },
-    area: {
-      weight: 3,
-      color: "#ff0000"
-    },
-    node: {
-      color: "#00ff00"
-    }
-  });
+  let dataLoader, loadedBounds;
+  const dataLayer = map.dataLayer;
 
   dataLayer.isWayArea = function () {
     return false;
@@ -32,13 +17,15 @@ OSM.initializeDataLayer = function (map) {
   });
 
   dataLayer.on("remove", function () {
+    if (dataLoader) dataLoader.abort();
+    dataLoader = null;
     map.off("moveend", updateData);
     $("#browse_status").empty();
     map.fire("overlayremove", { layer: this });
   });
 
   function updateData() {
-    var bounds = map.getBounds();
+    const bounds = map.getBounds();
     if (!loadedBounds || !loadedBounds.contains(bounds)) {
       getData();
     }
@@ -49,15 +36,15 @@ OSM.initializeDataLayer = function (map) {
       $("<div class='p-3'>").append(
         $("<div class='d-flex'>").append(
           $("<h2 class='flex-grow-1 text-break'>")
-            .text(I18n.t("browse.start_rjs.load_data")),
+            .text(OSM.i18n.t("browse.start_rjs.load_data")),
           $("<div>").append(
             $("<button type='button' class='btn-close'>")
-              .attr("aria-label", I18n.t("javascripts.close"))
+              .attr("aria-label", OSM.i18n.t("javascripts.close"))
               .click(cancel))),
         $("<p class='alert alert-warning'>")
-          .text(I18n.t("browse.start_rjs.feature_warning", { num_features })),
+          .text(OSM.i18n.t("browse.start_rjs.feature_warning", { num_features })),
         $("<input type='submit' class='btn btn-primary d-block mx-auto'>")
-          .val(I18n.t("browse.start_rjs.load_data"))
+          .val(OSM.i18n.t("browse.start_rjs.load_data"))
           .click(add)));
   }
 
@@ -66,38 +53,50 @@ OSM.initializeDataLayer = function (map) {
       $("<div class='p-3'>").append(
         $("<div class='d-flex'>").append(
           $("<h2 class='flex-grow-1 text-break'>")
-            .text(I18n.t("browse.start_rjs.load_data")),
+            .text(OSM.i18n.t("browse.start_rjs.load_data")),
           $("<div>").append(
             $("<button type='button' class='btn-close'>")
-              .attr("aria-label", I18n.t("javascripts.close"))
+              .attr("aria-label", OSM.i18n.t("javascripts.close"))
               .click(close))),
-        $("<div>").append(
-          $("<div class='d-flex'>").append(
-            $("<p class='alert alert-warning'>")
-              .text(I18n.t("browse.start_rjs.feature_error", { message: message }))))));
+        $("<p class='alert alert-warning'>")
+          .text(OSM.i18n.t("browse.start_rjs.feature_error", { message: message }))));
   }
 
-  var dataLoader;
-
   function getData() {
-    var bounds = map.getBounds();
-    var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
+    const bounds = map.getBounds();
+    const url = "/api/" + OSM.API_VERSION + "/map.json?bbox=" + bounds.toBBoxString();
 
     /*
      * Modern browsers are quite happy showing far more than 100 features in
-     * the data browser, so increase the limit to 4000 by default.
+     * the data browser, so increase the limit to 4000.
      */
     const maxFeatures = 4000;
 
     if (dataLoader) dataLoader.abort();
 
-    dataLoader = $.ajax({
-      url: url,
-      dataType: "json",
-      success: function (data) {
+    $("#layers-data-loading").remove();
+
+    const spanLoading = $("<span>")
+      .attr("id", "layers-data-loading")
+      .attr("class", "spinner-border spinner-border-sm ms-1")
+      .attr("role", "status")
+      .html("<span class='visually-hidden'>" + OSM.i18n.t("browse.start_rjs.loading") + "</span>")
+      .appendTo($("#label-layers-data"));
+
+    dataLoader = new AbortController();
+    fetch(url, { signal: dataLoader.signal })
+      .then(response => {
+        if (response.ok) return response.json();
+        const status = response.statusText || response.status;
+        if (response.status !== 400) throw new Error(status);
+        return response.text().then(text => {
+          throw new Error(text || status);
+        });
+      })
+      .then(function (data) {
         dataLayer.clearLayers();
 
-        var features = dataLayer.buildFeatures(data);
+        const features = dataLayer.buildFeatures(data);
 
         function addFeatures() {
           $("#browse_status").empty();
@@ -120,24 +119,19 @@ OSM.initializeDataLayer = function (map) {
         }
 
         dataLoader = null;
-      },
-      error: function (XMLHttpRequest, textStatus) {
-        dataLoader = null;
-        if (textStatus === "abort") { return; }
+      })
+      .catch(function (error) {
+        if (error.name === "AbortError") return;
 
-        function closeError() {
+        displayLoadError(error?.message, () => {
           $("#browse_status").empty();
-        }
+        });
 
-        if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) {
-          displayLoadError(XMLHttpRequest.responseText, closeError);
-        } else if (XMLHttpRequest.statusText) {
-          displayLoadError(XMLHttpRequest.statusText, closeError);
-        } else {
-          displayLoadError(String(XMLHttpRequest.status), closeError);
-        }
-      }
-    });
+        dataLoader = null;
+      })
+      .finally(() => {
+        spanLoading.remove();
+      });
   }
 
   function onSelect(layer) {