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