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