app/assets/javascripts/index/browse.js

   1 OSM.initializeBrowse = function (map) {
   2   var browseBounds;
   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 (!browseBounds || !browseBounds.contains(bounds)) {
  45       getData();
  46     }
  47   }
  48
  49   function displayFeatureWarning(count, limit, add, cancel) {
  50     $("#browse_status").html(
  51       $("<div>")
  52         .append(
  53           $("<button type='button' class='btn-close float-end mt-1'>")
  54             .click(cancel),
  55           $("<h2>")
  56             .text(I18n.t("browse.start_rjs.load_data"))
  57             .prepend(),
  58           $("<div>")
  59             .append(
  60               $("<p class='alert alert-warning clearfix'></p>")
  61                 .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })))
  62             .append(
  63               $("<input type='submit' class='btn btn-primary'>")
  64                 .val(I18n.t("browse.start_rjs.load_data"))
  65                 .click(add))));
  66   }
  67
  68   var dataLoader;
  69
  70   function getData() {
  71     var bounds = map.getBounds();
  72     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
  73
  74     /*
  75      * Modern browsers are quite happy showing far more than 100 features in
  76      * the data browser, so increase the limit to 2000 by default, but keep
  77      * it restricted to 500 for IE8 and 100 for older IEs.
  78      */
  79     var maxFeatures = 2000;
  80
  81     /*@cc_on
  82       if (navigator.appVersion < 8) {
  83         maxFeatures = 100;
  84       } else if (navigator.appVersion < 9) {
  85         maxFeatures = 500;
  86       }
  87     @*/
  88
  89     if (dataLoader) dataLoader.abort();
  90
  91     dataLoader = $.ajax({
  92       url: url,
  93       success: function (xml) {
  94         dataLayer.clearLayers();
  95
  96         var features = dataLayer.buildFeatures(xml);
  97
  98         function addFeatures() {
  99           $("#browse_status").empty();
 100           dataLayer.addData(features);
 101           browseBounds = bounds;
 102         }
 103
 104         function cancelAddFeatures() {
 105           $("#browse_status").empty();
 106         }
 107
 108         if (features.length < maxFeatures) {
 109           addFeatures();
 110         } else {
 111           displayFeatureWarning(features.length, maxFeatures, addFeatures, cancelAddFeatures);
 112         }
 113
 114         if (map._objectLayer) {
 115           map._objectLayer.bringToFront();
 116         }
 117
 118         dataLoader = null;
 119       }
 120     });
 121   }
 122
 123   function onSelect(layer) {
 124     OSM.router.route("/" + layer.feature.type + "/" + layer.feature.id);
 125   }
 126 };