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