app/assets/javascripts/index/browse.js

   1 function initializeBrowse(map) {
   2   var browseBounds;
   3   var selectedLayer;
   4   var dataLayer = map.dataLayer;
   5
   6   dataLayer.setStyle({
   7     way: {
   8       weight: 3,
   9       color: "#000000",
  10       opacity: 0.4
  11     },
  12     area: {
  13       weight: 3,
  14       color: "#ff0000"
  15     },
  16     node: {
  17       color: "#00ff00"
  18     }
  19   });
  20
  21   dataLayer.isWayArea = function () {
  22     return false;
  23   };
  24
  25   dataLayer.on("click", function (e) {
  26     onSelect(e.layer);
  27   });
  28
  29   map.on('layeradd', function (e) {
  30     if (e.layer === dataLayer) {
  31       map.on("moveend", updateData);
  32       updateData();
  33     }
  34   });
  35
  36   map.on('layerremove', function (e) {
  37     if (e.layer === dataLayer) {
  38       map.off("moveend", updateData);
  39     }
  40   });
  41
  42   function updateData() {
  43     if (map.getZoom() >= 15) {
  44       var bounds = map.getBounds();
  45       if (!browseBounds || !browseBounds.contains(bounds)) {
  46         browseBounds = bounds;
  47         getData();
  48       }
  49     } else {
  50       setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
  51     }
  52   }
  53
  54   function displayFeatureWarning(count, limit, callback) {
  55     clearStatus();
  56
  57     var div = document.createElement("div");
  58
  59     var p = document.createElement("p");
  60     p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
  61     div.appendChild(p);
  62
  63     var input = document.createElement("input");
  64     input.type = "submit";
  65     input.value = I18n.t('browse.start_rjs.load_data');
  66     input.onclick = callback;
  67     div.appendChild(input);
  68
  69     $("#browse_content").html("");
  70     $("#browse_content").append(div);
  71   }
  72
  73   var dataLoader;
  74
  75   function getData() {
  76     var bounds = map.getBounds();
  77     var size = bounds.getSize();
  78
  79     if (size > OSM.MAX_REQUEST_AREA) {
  80       setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
  81       return;
  82     }
  83
  84     setStatus(I18n.t('browse.start_rjs.loading'));
  85
  86     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
  87
  88     /*
  89      * Modern browsers are quite happy showing far more than 100 features in
  90      * the data browser, so increase the limit to 2000 by default, but keep
  91      * it restricted to 500 for IE8 and 100 for older IEs.
  92      */
  93     var maxFeatures = 2000;
  94
  95     /*@cc_on
  96       if (navigator.appVersion < 8) {
  97         maxFeatures = 100;
  98       } else if (navigator.appVersion < 9) {
  99         maxFeatures = 500;
 100       }
 101     @*/
 102
 103     if (dataLoader) dataLoader.abort();
 104
 105     dataLoader = $.ajax({
 106       url: url,
 107       success: function (xml) {
 108         clearStatus();
 109
 110         dataLayer.clearLayers();
 111         selectedLayer = null;
 112
 113         var features = dataLayer.buildFeatures(xml);
 114
 115         function addFeatures() {
 116           dataLayer.addData(features);
 117         }
 118
 119         if (features.length < maxFeatures) {
 120           addFeatures();
 121         } else {
 122           displayFeatureWarning(features.length, maxFeatures, addFeatures);
 123         }
 124
 125         dataLoader = null;
 126       }
 127     });
 128   }
 129
 130   function onSelect(layer) {
 131     // Unselect previously selected feature
 132     if (selectedLayer) {
 133       selectedLayer.setStyle(selectedLayer.originalStyle);
 134     }
 135
 136     // Redraw in selected style
 137     layer.originalStyle = layer.options;
 138     layer.setStyle({color: '#0000ff', weight: 8});
 139
 140     OSM.route('/browse/' + layer.feature.type + '/' + layer.feature.id);
 141
 142     // Stash the currently drawn feature
 143     selectedLayer = layer;
 144   }
 145
 146   function setStatus(status) {
 147   }
 148
 149   function clearStatus() {
 150   }
 151 }