X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/c7adb870ad1c60a26c80d0e65d9d41a2918ea67d..4197b2d008dc6b524b3f5f4ed632e581b6d74b51:/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 c69959467..dc522af41 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -1,6 +1,6 @@
 OSM.initializeDataLayer = function (map) {
-  var loadedBounds;
-  var dataLayer = map.dataLayer;
+  let dataLoader, loadedBounds;
+  const dataLayer = map.dataLayer;
 
   dataLayer.setStyle({
     way: {
@@ -32,6 +32,8 @@ 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 });
@@ -44,7 +46,7 @@ OSM.initializeDataLayer = function (map) {
     }
   }
 
-  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(
@@ -55,52 +57,45 @@ OSM.initializeDataLayer = function (map) {
               .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)));
   }
 
-  function displayLoadError(message) {
+  function displayLoadError(message, close) {
     $("#browse_status").html(
       $("<div class='p-3'>").append(
-        $("<h2 class='flex-grow-1 text-break'>")
-          .text(I18n.t("browse.start_rjs.load_data")),
-        $("<div>").append(
-          $("<div class='d-flex'>").append(
-            $("<p class='alert alert-warning'>")
-              .text(I18n.t("browse.start_rjs.feature_error", { message: message }))))));
+        $("<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 }))));
   }
 
-  var dataLoader;
-
   function getData() {
     var bounds = map.getBounds();
     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
 
     /*
      * 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 by default.
      */
-    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();
 
     dataLoader = $.ajax({
       url: url,
-      success: function (xml) {
+      dataType: "json",
+      success: function (data) {
         dataLayer.clearLayers();
 
-        var features = dataLayer.buildFeatures(xml);
+        var features = dataLayer.buildFeatures(data);
 
         function addFeatures() {
           $("#browse_status").empty();
@@ -115,7 +110,7 @@ OSM.initializeDataLayer = function (map) {
         if (features.length < maxFeatures) {
           addFeatures();
         } else {
-          displayFeatureWarning(features.length, maxFeatures, addFeatures, cancelAddFeatures);
+          displayFeatureWarning(features.length, addFeatures, cancelAddFeatures);
         }
 
         if (map._objectLayer) {
@@ -128,12 +123,16 @@ OSM.initializeDataLayer = function (map) {
         dataLoader = null;
         if (textStatus === "abort") { return; }
 
+        function closeError() {
+          $("#browse_status").empty();
+        }
+
         if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) {
-          displayLoadError(XMLHttpRequest.responseText);
+          displayLoadError(XMLHttpRequest.responseText, closeError);
         } else if (XMLHttpRequest.statusText) {
-          displayLoadError(XMLHttpRequest.statusText);
+          displayLoadError(XMLHttpRequest.statusText, closeError);
         } else {
-          displayLoadError(String(XMLHttpRequest.status));
+          displayLoadError(String(XMLHttpRequest.status), closeError);
         }
       }
     });