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

   1 OSM.initializeDataLayer = function (map) {
   2   var loadedBounds;
   3   var 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     map.off("moveend", updateData);
  36     $("#browse_status").empty();
  37     map.fire("overlayremove", { layer: this });
  38   });
  39
  40   function updateData() {
  41     var bounds = map.getBounds();
  42     if (!loadedBounds || !loadedBounds.contains(bounds)) {
  43       getData();
  44     }
  45   }
  46
  47   function displayFeatureWarning(count, limit, add, cancel) {
  48     $("#browse_status").html(
  49       $("<div class='p-3'>").append(
  50         $("<div class='d-flex'>").append(
  51           $("<h2 class='flex-grow-1 text-break'>")
  52             .text(I18n.t("browse.start_rjs.load_data")),
  53           $("<div>").append(
  54             $("<button type='button' class='btn-close'>")
  55               .attr("aria-label", I18n.t("javascripts.close"))
  56               .click(cancel))),
  57         $("<p class='alert alert-warning'>")
  58           .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })),
  59         $("<input type='submit' class='btn btn-primary d-block mx-auto'>")
  60           .val(I18n.t("browse.start_rjs.load_data"))
  61           .click(add)));
  62   }
  63
  64   function displayLoadError(message, close) {
  65     $("#browse_status").html(
  66       $("<div class='p-3'>").append(
  67         $("<div class='d-flex'>").append(
  68           $("<h2 class='flex-grow-1 text-break'>")
  69             .text(I18n.t("browse.start_rjs.load_data")),
  70           $("<div>").append(
  71             $("<button type='button' class='btn-close'>")
  72               .attr("aria-label", I18n.t("javascripts.close"))
  73               .click(close))),
  74         $("<div>").append(
  75           $("<div class='d-flex'>").append(
  76             $("<p class='alert alert-warning'>")
  77               .text(I18n.t("browse.start_rjs.feature_error", { message: message }))))));
  78   }
  79
  80   var dataLoader;
  81
  82   function getData() {
  83     var bounds = map.getBounds();
  84     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
  85
  86     /*
  87      * Modern browsers are quite happy showing far more than 100 features in
  88      * the data browser, so increase the limit to 4000 by default, but keep
  89      * it restricted to 500 for IE8 and 100 for older IEs.
  90      */
  91     var maxFeatures = 4000;
  92
  93     /*@cc_on
  94       if (navigator.appVersion < 8) {
  95         maxFeatures = 100;
  96       } else if (navigator.appVersion < 9) {
  97         maxFeatures = 500;
  98       }
  99     @*/
 100
 101     if (dataLoader) dataLoader.abort();
 102
 103     dataLoader = $.ajax({
 104       url: url,
 105       dataType: "json",
 106       success: function (data) {
 107         dataLayer.clearLayers();
 108
 109         var features = dataLayer.buildFeatures(data);
 110
 111         function addFeatures() {
 112           $("#browse_status").empty();
 113           dataLayer.addData(features);
 114           loadedBounds = bounds;
 115         }
 116
 117         function cancelAddFeatures() {
 118           $("#browse_status").empty();
 119         }
 120
 121         if (features.length < maxFeatures) {
 122           addFeatures();
 123         } else {
 124           displayFeatureWarning(features.length, maxFeatures, addFeatures, cancelAddFeatures);
 125         }
 126
 127         if (map._objectLayer) {
 128           map._objectLayer.bringToFront();
 129         }
 130
 131         dataLoader = null;
 132       },
 133       error: function (XMLHttpRequest, textStatus) {
 134         dataLoader = null;
 135         if (textStatus === "abort") { return; }
 136
 137         function closeError() {
 138           $("#browse_status").empty();
 139         }
 140
 141         if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) {
 142           displayLoadError(XMLHttpRequest.responseText, closeError);
 143         } else if (XMLHttpRequest.statusText) {
 144           displayLoadError(XMLHttpRequest.statusText, closeError);
 145         } else {
 146           displayLoadError(String(XMLHttpRequest.status), closeError);
 147         }
 148       }
 149     });
 150   }
 151
 152   function onSelect(layer) {
 153     OSM.router.route("/" + layer.feature.type + "/" + layer.feature.id);
 154   }
 155 };