app/assets/javascripts/index/browse.js

   1 //= require templates/browse/feature
   2 //= require templates/browse/feature_list
   3 //= require templates/browse/feature_history
   4
   5 function initializeBrowse(map) {
   6   var browseBounds;
   7   var layersById;
   8   var selectedLayer;
   9   var browseObjectList;
  10   var areasHidden = false;
  11   var locationFilter;
  12
  13   var dataLayer = map.dataLayer;
  14
  15   dataLayer.setStyle({
  16     way: {
  17       weight: 3,
  18       color: "#000000",
  19       opacity: 0.4
  20     },
  21     area: {
  22       weight: 3,
  23       color: "#ff0000"
  24     },
  25     node: {
  26       color: "#00ff00"
  27     }
  28   });
  29
  30   dataLayer.isWayArea = function () {
  31     return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments);
  32   };
  33
  34   dataLayer.on("click", function (e) {
  35     onSelect(e.layer);
  36   });
  37
  38   map.on('layeradd', function (e) {
  39     if (e.layer === dataLayer) {
  40       $.ajax({ url: "/browse/start", success: function (sidebarHtml) {
  41         startBrowse(sidebarHtml);
  42       }});
  43     }
  44   });
  45
  46   map.on('layerremove', function (e) {
  47     if (e.layer === dataLayer) {
  48       closeSidebar();
  49     }
  50   });
  51
  52   function startBrowse(sidebarHtml) {
  53     locationFilter = new L.LocationFilter({
  54       enableButton: false,
  55       adjustButton: false
  56     }).addTo(map);
  57
  58     locationFilter.on("change", getData);
  59
  60     $("#sidebar_content").html(sidebarHtml);
  61
  62     if (browseObjectList) loadObjectList();
  63
  64     map.on("moveend", updateData);
  65     updateData();
  66
  67     $("#browse_filter_toggle").click(toggleFilter);
  68
  69     $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
  70     $("#browse_hide_areas_box").click(toggleAreas);
  71
  72     $("#sidebar").one("closed", function () {
  73       map.removeLayer(dataLayer);
  74       map.removeLayer(locationFilter);
  75       map.off("moveend", updateData);
  76       locationFilter.off("change", getData);
  77     });
  78   }
  79
  80   function updateData() {
  81     if (!locationFilter.isEnabled()) {
  82       if (map.getZoom() >= 15) {
  83         var bounds = map.getBounds();
  84         if (!browseBounds || !browseBounds.contains(bounds)) {
  85           browseBounds = bounds;
  86           getData();
  87         }
  88       } else {
  89         setStatus(I18n.t('browse.start_rjs.zoom_or_select'));
  90       }
  91     }
  92   }
  93
  94   function toggleFilter() {
  95     if (locationFilter.isEnabled()) {
  96       $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select'));
  97       locationFilter.disable();
  98     } else {
  99       $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data'));
 100       locationFilter.setBounds(map.getBounds().pad(-0.2));
 101       locationFilter.enable();
 102     }
 103
 104     getData();
 105   }
 106
 107   function toggleAreas(e) {
 108     e.preventDefault();
 109
 110     if (areasHidden) {
 111       $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas'));
 112       areasHidden = false;
 113     } else {
 114       $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas'));
 115       areasHidden = true;
 116     }
 117
 118     getData();
 119   }
 120
 121   function displayFeatureWarning(count, limit, callback) {
 122     clearStatus();
 123
 124     var div = document.createElement("div");
 125
 126     var p = document.createElement("p");
 127     p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit })));
 128     div.appendChild(p);
 129
 130     var input = document.createElement("input");
 131     input.type = "submit";
 132     input.value = I18n.t('browse.start_rjs.load_data');
 133     input.onclick = callback;
 134     div.appendChild(input);
 135
 136     $("#browse_content").html("");
 137     $("#browse_content").append(div);
 138   }
 139
 140   var dataLoader;
 141
 142   function getData() {
 143     var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds();
 144     var size = bounds.getSize();
 145
 146     if (size > OSM.MAX_REQUEST_AREA) {
 147       setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size }));
 148       return;
 149     }
 150
 151     setStatus(I18n.t('browse.start_rjs.loading'));
 152
 153     var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBoxString();
 154
 155     /*
 156      * Modern browsers are quite happy showing far more than 100 features in
 157      * the data browser, so increase the limit to 2000 by default, but keep
 158      * it restricted to 500 for IE8 and 100 for older IEs.
 159      */
 160     var maxFeatures = 2000;
 161
 162     /*@cc_on
 163       if (navigator.appVersion < 8) {
 164         maxFeatures = 100;
 165       } else if (navigator.appVersion < 9) {
 166         maxFeatures = 500;
 167       }
 168     @*/
 169
 170     if (dataLoader) dataLoader.abort();
 171
 172     dataLoader = $.ajax({
 173       url: url,
 174       success: function (xml) {
 175         clearStatus();
 176
 177         $("#browse_content").empty();
 178         dataLayer.clearLayers();
 179         selectedLayer = null;
 180
 181         var features = dataLayer.buildFeatures(xml);
 182
 183         function addFeatures() {
 184           dataLayer.addData(features);
 185
 186           layersById = {};
 187
 188           dataLayer.eachLayer(function (layer) {
 189             var feature = layer.feature;
 190             layersById[feature.id] = layer;
 191             $.extend(feature, {
 192               typeName: featureTypeName(feature),
 193               url: "/browse/" + feature.type + "/" + feature.id,
 194               name: featureName(feature)
 195             });
 196           });
 197
 198           browseObjectList = $(JST["templates/browse/feature_list"]({
 199             features: features,
 200             url: url
 201           }))[0];
 202
 203           loadObjectList();
 204         }
 205
 206         if (features.length < maxFeatures) {
 207           addFeatures();
 208         } else {
 209           displayFeatureWarning(features.length, maxFeatures, addFeatures);
 210         }
 211
 212         dataLoader = null;
 213       }
 214     });
 215   }
 216
 217   function viewFeatureLink() {
 218     var layer = layersById[$(this).data("feature-id")];
 219
 220     onSelect(layer);
 221
 222     if (locationFilter.isEnabled()) {
 223       map.panTo(layer.getBounds().getCenter());
 224     }
 225
 226     return false;
 227   }
 228
 229   function loadObjectList() {
 230     $("#browse_content").html(browseObjectList);
 231     $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink);
 232
 233     return false;
 234   }
 235
 236   function onSelect(layer) {
 237     // Unselect previously selected feature
 238     if (selectedLayer) {
 239       selectedLayer.setStyle(selectedLayer.originalStyle);
 240     }
 241
 242     // Redraw in selected style
 243     layer.originalStyle = layer.options;
 244     layer.setStyle({color: '#0000ff', weight: 8});
 245
 246     // If the current object is the list, don't innerHTML="", since that could clear it.
 247     if ($("#browse_content").firstChild == browseObjectList) {
 248       $("#browse_content").removeChild(browseObjectList);
 249     } else {
 250       $("#browse_content").empty();
 251     }
 252
 253     var feature = layer.feature;
 254
 255     $("#browse_content").html(JST["templates/browse/feature"]({
 256       name: featureNameSelect(feature),
 257       url: "/browse/" + feature.type + "/" + feature.id,
 258       attributes: feature.tags
 259     }));
 260
 261     $("#browse_content").find("a.browse_show_list").click(loadObjectList);
 262     $("#browse_content").find("a.browse_show_history").click(loadHistory);
 263
 264     // Stash the currently drawn feature
 265     selectedLayer = layer;
 266   }
 267
 268   function loadHistory() {
 269     $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait'));
 270
 271     var feature = selectedLayer.feature;
 272
 273     $.ajax({
 274       url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history",
 275       success: function (xml) {
 276         if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) {
 277           return;
 278         }
 279
 280         $(this).remove();
 281
 282         var history = [];
 283         var nodes = xml.getElementsByTagName(feature.type);
 284         for (var i = nodes.length - 1; i >= 0; i--) {
 285           history.push({
 286             user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'),
 287             timestamp: nodes[i].getAttribute("timestamp")
 288           });
 289         }
 290
 291         $("#browse_content").append(JST["templates/browse/feature_history"]({
 292           name: featureNameHistory(feature),
 293           url: "/browse/" + feature.type + "/" + feature.id,
 294           history: history
 295         }));
 296       }.bind(this)
 297     });
 298
 299     return false;
 300   }
 301
 302   function featureTypeName(feature) {
 303     return I18n.t('browse.start_rjs.object_list.type.' + feature.type);
 304   }
 305
 306   function featureName(feature) {
 307     return feature.tags['name:' + $('html').attr('lang')] ||
 308       feature.tags.name ||
 309       feature.id;
 310   }
 311
 312   function featureNameSelect(feature) {
 313     return feature.tags['name:' + $('html').attr('lang')] ||
 314       feature.tags.name ||
 315       I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.id });
 316   }
 317
 318   function featureNameHistory(feature) {
 319     return feature.tags['name:' + $('html').attr('lang')] ||
 320       feature.tags.name ||
 321       I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id });
 322   }
 323
 324   function setStatus(status) {
 325     $("#browse_status").html(status);
 326     $("#browse_status").show();
 327   }
 328
 329   function clearStatus() {
 330     $("#browse_status").html("");
 331     $("#browse_status").hide();
 332   }
 333 }