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   map.on("layeradd", function (e) {
  29     if (e.layer === dataLayer) {
  30       map.on("moveend", updateData);
  31       updateData();
  32     }
  33   });
  34
  35   map.on("layerremove", function (e) {
  36     if (e.layer === dataLayer) {
  37       map.off("moveend", updateData);
  38       $("#browse_status").empty();
  39     }
  40   });
  41
  42   function updateData() {
  43     var bounds = map.getBounds();
  44     if (!loadedBounds || !loadedBounds.contains(bounds)) {
  45       getData();
  46     }
  47   }
  48
  49   function displayFeatureWarning(count, limit, 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: count, max_features: limit })),
  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) {
  67     $("#browse_status").html(
  68       $("<div class='p-3'>").append(
  69         $("<h2 class='flex-grow-1 text-break'>")
  70           .text(I18n.t("browse.start_rjs.load_data")),
  71         $("<div>").append(
  72           $("<div class='d-flex'>").append(
  73             $("<p class='alert alert-warning'>")
  74               .text(I18n.t("browse.start_rjs.feature_error", { message: message }))))));
  75   }
  76
  77   var dataLoader;
  78
  79   function getData() {
  80     var bounds = map.getBounds();
  81     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
  82
  83     /*
  84      * Modern browsers are quite happy showing far more than 100 features in
  85      * the data browser, so increase the limit to 2000 by default, but keep
  86      * it restricted to 500 for IE8 and 100 for older IEs.
  87      */
  88     var maxFeatures = 2000;
  89
  90     /*@cc_on
  91       if (navigator.appVersion < 8) {
  92         maxFeatures = 100;
  93       } else if (navigator.appVersion < 9) {
  94         maxFeatures = 500;
  95       }
  96     @*/
  97
  98     if (dataLoader) dataLoader.abort();
  99
 100     dataLoader = $.ajax({
 101       url: url,
 102       success: function (xml) {
 103         dataLayer.clearLayers();
 104
 105         var features = dataLayer.buildFeatures(xml);
 106
 107         function addFeatures() {
 108           $("#browse_status").empty();
 109           dataLayer.addData(features);
 110           loadedBounds = bounds;
 111         }
 112
 113         function cancelAddFeatures() {
 114           $("#browse_status").empty();
 115         }
 116
 117         if (features.length < maxFeatures) {
 118           addFeatures();
 119         } else {
 120           displayFeatureWarning(features.length, maxFeatures, addFeatures, cancelAddFeatures);
 121         }
 122
 123         if (map._objectLayer) {
 124           map._objectLayer.bringToFront();
 125         }
 126
 127         dataLoader = null;
 128       },
 129       error: function (XMLHttpRequest, textStatus) {
 130         dataLoader = null;
 131         if (textStatus === "abort") { return; }
 132
 133         if (XMLHttpRequest.status === 400 && XMLHttpRequest.responseText) {
 134           displayLoadError(XMLHttpRequest.responseText);
 135         } else if (XMLHttpRequest.statusText) {
 136           displayLoadError(XMLHttpRequest.statusText);
 137         } else {
 138           displayLoadError(String(XMLHttpRequest.status));
 139         }
 140       }
 141     });
 142   }
 143
 144   function onSelect(layer) {
 145     OSM.router.route("/" + layer.feature.type + "/" + layer.feature.id);
 146   }
 147 };