app/assets/javascripts/index/layers/data.js

   1 OSM.initializeDataLayer = function (map) {
   2   let dataLoader, loadedBounds;
   3   const dataLayer = map.dataLayer;
   4
   5   dataLayer.setStyle({
   6     way: {
   7       weight: 3,
   8       color: "#000000",
   9       opacity: 0.4
  10     },
  11     area: {
  12       weight: 3,
  13       color: "#ff0000"
  14     },
  15     node: {
  16       color: "#00ff00"
  17     }
  18   });
  19
  20   dataLayer.isWayArea = function () {
  21     return false;
  22   };
  23
  24   dataLayer.on("click", function (e) {
  25     onSelect(e.layer);
  26   });
  27
  28   dataLayer.on("add", function () {
  29     map.fire("overlayadd", { layer: this });
  30     map.on("moveend", updateData);
  31     updateData();
  32   });
  33
  34   dataLayer.on("remove", function () {
  35     if (dataLoader) dataLoader.abort();
  36     dataLoader = null;
  37     map.off("moveend", updateData);
  38     $("#browse_status").empty();
  39     map.fire("overlayremove", { layer: this });
  40   });
  41
  42   function updateData() {
  43     const bounds = map.getBounds();
  44     if (!loadedBounds || !loadedBounds.contains(bounds)) {
  45       getData();
  46     }
  47   }
  48
  49   function displayFeatureWarning(num_features, add, cancel) {
  50     $("#browse_status").html(
  51       $("<div class='p-3'>").append(
  52         $("<div class='d-flex'>").append(
  53           $("<h2 class='flex-grow-1 text-break'>")
  54             .text(I18n.t("browse.start_rjs.load_data")),
  55           $("<div>").append(
  56             $("<button type='button' class='btn-close'>")
  57               .attr("aria-label", I18n.t("javascripts.close"))
  58               .click(cancel))),
  59         $("<p class='alert alert-warning'>")
  60           .text(I18n.t("browse.start_rjs.feature_warning", { num_features })),
  61         $("<input type='submit' class='btn btn-primary d-block mx-auto'>")
  62           .val(I18n.t("browse.start_rjs.load_data"))
  63           .click(add)));
  64   }
  65
  66   function displayLoadError(message, close) {
  67     $("#browse_status").html(
  68       $("<div class='p-3'>").append(
  69         $("<div class='d-flex'>").append(
  70           $("<h2 class='flex-grow-1 text-break'>")
  71             .text(I18n.t("browse.start_rjs.load_data")),
  72           $("<div>").append(
  73             $("<button type='button' class='btn-close'>")
  74               .attr("aria-label", I18n.t("javascripts.close"))
  75               .click(close))),
  76         $("<p class='alert alert-warning'>")
  77           .text(I18n.t("browse.start_rjs.feature_error", { message: message }))));
  78   }
  79
  80   function getData() {
  81     const bounds = map.getBounds();
  82     const url = "/api/" + OSM.API_VERSION + "/map.json?bbox=" + bounds.toBBoxString();
  83
  84     /*
  85      * Modern browsers are quite happy showing far more than 100 features in
  86      * the data browser, so increase the limit to 4000.
  87      */
  88     const maxFeatures = 4000;
  89
  90     if (dataLoader) dataLoader.abort();
  91
  92     $("#layers-data-loading").remove();
  93
  94     const spanLoading = $("<span>")
  95       .attr("id", "layers-data-loading")
  96       .attr("class", "spinner-border spinner-border-sm ms-1")
  97       .attr("role", "status")
  98       .html("<span class='visually-hidden'>" + I18n.t("browse.start_rjs.loading") + "</span>")
  99       .appendTo($("#label-layers-data"));
 100
 101     dataLoader = new AbortController();
 102     fetch(url, { signal: dataLoader.signal })
 103       .then(response => {
 104         if (response.ok) return response.json();
 105         const status = response.statusText || response.status;
 106         if (response.status !== 400) throw new Error(status);
 107         return response.text().then(text => {
 108           throw new Error(text || status);
 109         });
 110       })
 111       .then(function (data) {
 112         dataLayer.clearLayers();
 113
 114         const features = dataLayer.buildFeatures(data);
 115
 116         function addFeatures() {
 117           $("#browse_status").empty();
 118           dataLayer.addData(features);
 119           loadedBounds = bounds;
 120         }
 121
 122         function cancelAddFeatures() {
 123           $("#browse_status").empty();
 124         }
 125
 126         if (features.length < maxFeatures) {
 127           addFeatures();
 128         } else {
 129           displayFeatureWarning(features.length, addFeatures, cancelAddFeatures);
 130         }
 131
 132         if (map._objectLayer) {
 133           map._objectLayer.bringToFront();
 134         }
 135       })
 136       .catch(function (error) {
 137         if (error.name === "AbortError") return;
 138
 139         displayLoadError(error?.message, () => {
 140           $("#browse_status").empty();
 141         });
 142       })
 143       .finally(() => {
 144         dataLoader = null;
 145         spanLoading.remove();
 146       });
 147   }
 148
 149   function onSelect(layer) {
 150     OSM.router.route("/" + layer.feature.type + "/" + layer.feature.id);
 151   }
 152 };