DataLayer to consume JSON format responses

[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..397b38ae20a91b221d3d11845f52786bd81ce3d5 100644 (file)
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -25,18 +25,16 @@ OSM.initializeDataLayer = function (map) {
     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 () {
+    map.off("moveend", updateData);
+    $("#browse_status").empty();
+    map.fire("overlayremove", { layer: this });
   });
 
   function updateData() {
@@ -63,6 +61,22 @@ OSM.initializeDataLayer = function (map) {
           .click(add)));
   }
 
+  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))),
+        $("<div>").append(
+          $("<div class='d-flex'>").append(
+            $("<p class='alert alert-warning'>")
+              .text(I18n.t("browse.start_rjs.feature_error", { message: message }))))));
+  }
+
   var dataLoader;
 
   function getData() {
@@ -71,10 +85,10 @@ OSM.initializeDataLayer = function (map) {
 
     /*
      * 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
+     * the data browser, so increase the limit to 4000 by default, but keep
      * it restricted to 500 for IE8 and 100 for older IEs.
      */
-    var maxFeatures = 2000;
+    var maxFeatures = 4000;
 
     /*@cc_on
       if (navigator.appVersion < 8) {
@@ -88,10 +102,11 @@ OSM.initializeDataLayer = function (map) {
 
     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();
@@ -114,6 +129,22 @@ OSM.initializeDataLayer = function (map) {
         }
 
         dataLoader = null;
+      },
+      error: function (XMLHttpRequest, textStatus) {
+        dataLoader = null;
+        if (textStatus === "abort") { return; }
+
+        function closeError() {
+          $("#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);
+        }
       }
     });
   }