Disable asynchronous object layer loading

[rails.git] / 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 0a996f0c70c27244e7769f765f4586b425a9879c..c0fffd72d061dd140d809f6c6d1daf3a92380493 100644 (file)
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -1,6 +1,6 @@
 OSM.initializeDataLayer = function (map) {
 OSM.initializeDataLayer = function (map) {

-  var loadedBounds;
-  var dataLayer = map.dataLayer;
+  let dataLoader, loadedBounds;
+  const dataLayer = map.dataLayer;

 
   dataLayer.setStyle({
     way: {
 
   dataLayer.setStyle({
     way: {


@@ -25,28 +25,28 @@ OSM.initializeDataLayer = function (map) {
     onSelect(e.layer);
   });
 
     onSelect(e.layer);
   });
 

-  map.on("layeradd", function (e) {
-    if (e.layer === dataLayer) {
-      map.on("moveend", updateData);
-      updateData();
-    }
+  dataLayer.on("add", function () {
+    map.fire("overlayadd", { layer: this });
+    map.on("moveend", updateData);
+    updateData();

   });
 
   });
 

-  map.on("layerremove", function (e) {
-    if (e.layer === dataLayer) {
-      map.off("moveend", updateData);
-      $("#browse_status").empty();
-    }
+  dataLayer.on("remove", function () {
+    if (dataLoader) dataLoader.abort();
+    dataLoader = null;
+    map.off("moveend", updateData);
+    $("#browse_status").empty();
+    map.fire("overlayremove", { layer: this });

   });
 
   function updateData() {
   });
 
   function updateData() {

-    var bounds = map.getBounds();
+    const bounds = map.getBounds();

     if (!loadedBounds || !loadedBounds.contains(bounds)) {
       getData();
     }
   }
 
     if (!loadedBounds || !loadedBounds.contains(bounds)) {
       getData();
     }
   }
 

-  function displayFeatureWarning(count, limit, add, cancel) {
+  function displayFeatureWarning(num_features, add, cancel) {

     $("#browse_status").html(
       $("<div class='p-3'>").append(
         $("<div class='d-flex'>").append(
     $("#browse_status").html(
       $("<div class='p-3'>").append(
         $("<div class='d-flex'>").append(


@@ -57,41 +57,61 @@ OSM.initializeDataLayer = function (map) {
               .attr("aria-label", I18n.t("javascripts.close"))
               .click(cancel))),
         $("<p class='alert alert-warning'>")
               .attr("aria-label", I18n.t("javascripts.close"))
               .click(cancel))),
         $("<p class='alert alert-warning'>")

-          .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })),
+          .text(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"))
           .click(add)));
   }
 
         $("<input type='submit' class='btn btn-primary d-block mx-auto'>")
           .val(I18n.t("browse.start_rjs.load_data"))
           .click(add)));
   }
 

-  var dataLoader;
+  function displayLoadError(message, close) {
+    $("#browse_status").html(
+      $("<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")),
+          $("<div>").append(
+            $("<button type='button' class='btn-close'>")
+              .attr("aria-label", I18n.t("javascripts.close"))
+              .click(close))),
+        $("<p class='alert alert-warning'>")
+          .text(I18n.t("browse.start_rjs.feature_error", { message: message }))));
+  }

 
   function getData() {
 
   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
 
     /*
      * Modern browsers are quite happy showing far more than 100 features in

-     * the data browser, so increase the limit to 2000 by default, but keep
-     * it restricted to 500 for IE8 and 100 for older IEs.
+     * the data browser, so increase the limit to 4000.

      */
      */

-    var maxFeatures = 2000;
-
-    /*@cc_on
-      if (navigator.appVersion < 8) {
-        maxFeatures = 100;
-      } else if (navigator.appVersion < 9) {
-        maxFeatures = 500;
-      }
-    @*/
+    const maxFeatures = 4000;

 
     if (dataLoader) dataLoader.abort();
 
 
     if (dataLoader) dataLoader.abort();
 

-    dataLoader = $.ajax({
-      url: url,
-      success: function (xml) {
+    $("#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'>" + 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();
 
         dataLayer.clearLayers();
 

-        var features = dataLayer.buildFeatures(xml);
+        const features = dataLayer.buildFeatures(data);

 
         function addFeatures() {
           $("#browse_status").empty();
 
         function addFeatures() {
           $("#browse_status").empty();


@@ -106,16 +126,24 @@ OSM.initializeDataLayer = function (map) {
         if (features.length < maxFeatures) {
           addFeatures();
         } else {
         if (features.length < maxFeatures) {
           addFeatures();
         } else {

-          displayFeatureWarning(features.length, maxFeatures, addFeatures, cancelAddFeatures);
+          displayFeatureWarning(features.length, addFeatures, cancelAddFeatures);

         }
 
         if (map._objectLayer) {
           map._objectLayer.bringToFront();
         }
         }
 
         if (map._objectLayer) {
           map._objectLayer.bringToFront();
         }

+      })
+      .catch(function (error) {
+        if (error.name === "AbortError") return;

 
 

+        displayLoadError(error?.message, () => {
+          $("#browse_status").empty();
+        });
+      })
+      .finally(() => {

         dataLoader = null;
         dataLoader = null;

-      }
-    });
+        spanLoading.remove();
+      });

   }
 
   function onSelect(layer) {
   }
 
   function onSelect(layer) {