app/views/browse/start.js.erb

   1 var browseBoxControl;
   2 var browseMode = "auto";
   3 var browseBounds;
   4 var browseFeatureList;
   5 var browseActiveFeature;
   6 var browseDataLayer;
   7 var browseSelectControl;
   8 var browseObjectList;
   9 var areasHidden = false;
  10
  11 OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
  12 OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
  13
  14 function startBrowse() {
  15   map.dataLayer.active = true;
  16
  17   $("#sidebar_title").html("<%=j t 'browse.start_rjs.data_frame_title' %>");
  18   $("#sidebar_content").html("<%=j render :partial => "sidebar" %>");
  19
  20   openSidebar({ onclose: stopBrowse });
  21
  22   var vectors = new OpenLayers.Layer.Vector();
  23
  24   browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
  25     handlerOptions: {
  26       sides: 4,
  27       snapAngle: 90,
  28       irregular: true,
  29       persist: true
  30     }
  31   });
  32   browseBoxControl.handler.callbacks.done = endDrag;
  33   map.addControl(browseBoxControl);
  34
  35   map.events.register("moveend", map, showData);
  36   map.events.triggerEvent("moveend");
  37
  38   $("#browse_select_box").click(startDrag);
  39
  40   $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");
  41   $("#browse_hide_areas_box").show();
  42   $("#browse_hide_areas_box").click(hideAreas);
  43 }
  44
  45 function showData() {
  46   if (browseMode == "auto") {
  47     if (map.getZoom() >= 15) {
  48         useMap(false);
  49     } else {
  50         setStatus("<%=j t 'browse.start_rjs.zoom_or_select' %>");
  51     }
  52   }
  53 }
  54
  55 function stopBrowse() {
  56   if (map.dataLayer.active) {
  57     map.dataLayer.active = false;
  58
  59     if (browseSelectControl) {
  60       browseSelectControl.destroy();
  61       browseSelectControl = null;
  62     }
  63
  64     if (browseBoxControl) {
  65       browseBoxControl.destroy();
  66       browseBoxControl = null;
  67     }
  68
  69     if (browseActiveFeature) {
  70       browseActiveFeature.destroy();
  71       browseActiveFeature = null;
  72     }
  73
  74     if (browseDataLayer) {
  75       browseDataLayer.destroy();
  76       browseDataLayer = null;
  77     }
  78
  79     map.dataLayer.setVisibility(false);
  80     map.events.unregister("moveend", map, showData);
  81   }
  82 }
  83
  84 function startDrag() {
  85   $("#browse_select_box").html("<%=j t 'browse.start_rjs.drag_a_box' %>");
  86
  87   browseBoxControl.activate();
  88
  89   return false;
  90 }
  91
  92 function useMap(reload) {
  93   var bounds = map.getExtent();
  94   var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
  95
  96   if (!browseBounds || !browseBounds.containsBounds(projected)) {
  97     var center = bounds.getCenterLonLat();
  98     var tileWidth = bounds.getWidth() * 1.2;
  99     var tileHeight = bounds.getHeight() * 1.2;
 100     var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2),
 101                                            center.lat - (tileHeight / 2),
 102                                            center.lon + (tileWidth / 2),
 103                                            center.lat + (tileHeight / 2));
 104
 105     browseBounds = tileBounds;
 106     getData(tileBounds, reload);
 107
 108     browseMode = "auto";
 109
 110     $("#browse_select_view").hide();
 111   }
 112
 113   return false;
 114 }
 115
 116 function hideAreas() {
 117   $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.show_areas' %>");
 118   $("#browse_hide_areas_box").show();
 119   $("#browse_hide_areas_box").click(showAreas);
 120
 121   areasHidden = true;
 122
 123   useMap(true);
 124 }
 125
 126 function showAreas() {
 127   $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");
 128   $("#browse_hide_areas_box").show();
 129   $("#browse_hide_areas_box").click(hideAreas);
 130
 131   areasHidden = false;
 132
 133   useMap(true);
 134 }
 135
 136 $("#browse_select_view").click(useMap);
 137
 138 function endDrag(bbox) {
 139   var bounds = bbox.getBounds();
 140   var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
 141
 142   browseBoxControl.deactivate();
 143   browseBounds = projected;
 144   getData(bounds);
 145
 146   browseMode = "manual";
 147
 148   $("#browse_select_box").html("<%=j t 'browse.start_rjs.manually_select' %>");
 149   $("#browse_select_view").show();
 150 }
 151
 152 function displayFeatureWarning() {
 153   clearStatus();
 154
 155   var div = document.createElement("div");
 156
 157   var p = document.createElement("p");
 158   p.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.loaded_an_area_with_num_features' %>", { num_features: browseFeatureList.length })));
 159   div.appendChild(p);
 160
 161   var input = document.createElement("input");
 162   input.type = "submit";
 163   input.value = "<%=j t 'browse.start_rjs.load_data' %>";
 164   input.onclick = loadFeatureList;
 165   div.appendChild(input);
 166
 167   $("#browse_content").html("");
 168   $("#browse_content").append(div);
 169 }
 170
 171 function loadFeatureList() {
 172   browseDataLayer.addFeatures(browseFeatureList);
 173   browseDataLayer.events.triggerEvent("loadend");
 174
 175   browseFeatureList = [];
 176
 177   return false;
 178 }
 179
 180 function customDataLoader(request) {
 181   if (this.map.dataLayer.active) {
 182     var doc = request.responseXML;
 183
 184     if (!doc || !doc.documentElement) {
 185       doc = request.responseText;
 186     }
 187
 188     var options = {};
 189
 190     OpenLayers.Util.extend(options, this.formatOptions);
 191
 192     if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
 193       options.externalProjection = this.projection;
 194       options.internalProjection = this.map.getProjectionObject();
 195     }
 196
 197     var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
 198
 199     browseFeatureList = gml.read(doc);
 200
 201     if (!this.maxFeatures || browseFeatureList.length <= this.maxFeatures) {
 202       loadFeatureList();
 203     } else {
 204       displayFeatureWarning();
 205     }
 206   }
 207 }
 208
 209 function getData(bounds, reload) {
 210   var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
 211   var size = projected.getWidth() * projected.getHeight();
 212
 213   if (size > <%= MAX_REQUEST_AREA %>) {
 214     setStatus(i18n("<%=j t 'browse.start_rjs.unable_to_load_size', :max_bbox_size => MAX_REQUEST_AREA %>", { bbox_size: size }));
 215   } else {
 216     loadGML("/api/<%= API_VERSION %>/map?bbox=" + projected.toBBOX(), reload);
 217   }
 218 }
 219
 220 function loadGML(url, reload) {
 221   setStatus("<%=j t 'browse.start_rjs.loading' %>");
 222
 223   $("#browse_content").empty();
 224
 225   var formatOptions = {
 226     checkTags: true,
 227     interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
 228   };
 229
 230   if (areasHidden) formatOptions.areaTags = [];
 231
 232   if (!browseDataLayer || reload) {
 233     var style = new OpenLayers.Style();
 234
 235     style.addRules([new OpenLayers.Rule({
 236       symbolizer: {
 237         Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' },
 238         Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' },
 239         Point: { fillColor: '#00ff00', strokeColor: '#00ff00' }
 240       }
 241     })]);
 242
 243     if (browseDataLayer) browseDataLayer.destroyFeatures();
 244
 245     browseDataLayer = new OpenLayers.Layer.GML("Data", url, {
 246       format: OpenLayers.Format.OSM,
 247       formatOptions: formatOptions,
 248       maxFeatures: 100,
 249       requestSuccess: customDataLoader,
 250       displayInLayerSwitcher: false,
 251       styleMap: new OpenLayers.StyleMap({
 252         'default': style,
 253         'select': { strokeColor: '#0000ff', strokeWidth: 8 }
 254       })
 255     });
 256     browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );
 257     map.addLayer(browseDataLayer);
 258
 259     browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });
 260     browseSelectControl.handlers.feature.stopDown = false;
 261     browseSelectControl.handlers.feature.stopUp = false;
 262     map.addControl(browseSelectControl);
 263     browseSelectControl.activate();
 264   } else {
 265     browseDataLayer.destroyFeatures();
 266     browseDataLayer.format(formatOptions);
 267     browseDataLayer.setUrl(url);
 268   }
 269
 270   browseActiveFeature = null;
 271 }
 272
 273 function dataLoaded() {
 274   if (this.map.dataLayer.active) {
 275     clearStatus();
 276
 277     browseObjectList = document.createElement("div");
 278
 279     var heading = document.createElement("p");
 280     heading.className = "browse_heading";
 281     heading.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.heading' %>"));
 282     browseObjectList.appendChild(heading);
 283
 284     var list = document.createElement("ul");
 285
 286     for (var i = 0; i < this.features.length; i++) {
 287       var feature = this.features[i];
 288
 289       // Type, for linking
 290       var type = featureType(feature);
 291       var typeName = featureTypeName(feature);
 292       var li = document.createElement("li");
 293       li.appendChild(document.createTextNode(typeName + " "));
 294
 295       // Link, for viewing in the tab
 296       var link = document.createElement("a");
 297       link.href =  "/browse/" + type + "/" + feature.osm_id;
 298       var name = featureName(feature);
 299       link.appendChild(document.createTextNode(name));
 300       link.feature = feature;
 301       link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
 302       li.appendChild(link);
 303
 304       list.appendChild(li);
 305     }
 306
 307     browseObjectList.appendChild(list);
 308
 309     var link = document.createElement("a");
 310     link.href = this.url;
 311     link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.api' %>"));
 312     browseObjectList.appendChild(link);
 313
 314     $("#browse_content").html(browseObjectList);
 315   }
 316 }
 317
 318 function viewFeatureLink() {
 319   var layer = this.feature.layer;
 320
 321   for (var i = 0; i < layer.selectedFeatures.length; i++) {
 322     var f = layer.selectedFeatures[i];
 323     layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
 324   }
 325
 326   onFeatureSelect(this.feature);
 327
 328   if (browseMode != "auto") {
 329     map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
 330   }
 331
 332   return false;
 333 }
 334
 335 function loadObjectList() {
 336   $("#browse_content").empty();
 337   $("#browse_content").append(browseObjectList);
 338
 339   return false;
 340 }
 341
 342 function onFeatureSelect(feature) {
 343   // Unselect previously selected feature
 344   if (browseActiveFeature) {
 345     browseActiveFeature.layer.drawFeature(
 346       browseActiveFeature,
 347       browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")
 348     );
 349   }
 350
 351   // Redraw in selected style
 352   feature.layer.drawFeature(
 353     feature, feature.layer.styleMap.createSymbolizer(feature, "select")
 354   );
 355
 356   // If the current object is the list, don't innerHTML="", since that could clear it.
 357   if ($("#browse_content").firstChild == browseObjectList) {
 358     $("#browse_content").removeChild(browseObjectList);
 359   } else {
 360     $("#browse_content").empty();
 361   }
 362
 363   // Create a link back to the object list
 364   var div = document.createElement("div");
 365   div.style.textAlign = "center";
 366   div.style.marginBottom = "20px";
 367   $("#browse_content").append(div);
 368   var link = document.createElement("a");
 369   link.href = "#";
 370   link.onclick = loadObjectList;
 371   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.back' %>"));
 372   div.appendChild(link);
 373
 374   var table = document.createElement("table");
 375   table.width = "100%";
 376   table.className = "browse_heading";
 377   $("#browse_content").append(table);
 378
 379   var tr = document.createElement("tr");
 380   table.appendChild(tr);
 381
 382   var heading = document.createElement("td");
 383   heading.appendChild(document.createTextNode(featureNameSelect(feature)));
 384   tr.appendChild(heading);
 385
 386   var td = document.createElement("td");
 387   td.align = "right";
 388   tr.appendChild(td);
 389
 390   var type = featureType(feature);
 391   var link = document.createElement("a");
 392   link.href = "/browse/" + type + "/" + feature.osm_id;
 393   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.details' %>"));
 394   td.appendChild(link);
 395
 396   var div = document.createElement("div");
 397   div.className = "browse_details";
 398
 399   $("#browse_content").append(div);
 400
 401   // Now the list of attributes
 402   var ul = document.createElement("ul");
 403   for (var key in feature.attributes) {
 404     var li = document.createElement("li");
 405     var b = document.createElement("b");
 406     b.appendChild(document.createTextNode(key));
 407     li.appendChild(b);
 408     li.appendChild(document.createTextNode(": " + feature.attributes[key]));
 409     ul.appendChild(li);
 410   }
 411
 412   div.appendChild(ul);
 413
 414   var link = document.createElement("a");
 415   link.href =  "/browse/" + type + "/" + feature.osm_id + "/history";
 416   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.show_history' %>"));
 417   link.onclick = OpenLayers.Function.bind(loadHistory, {
 418     type: type, feature: feature, link: link
 419   });
 420
 421   div.appendChild(link);
 422
 423   // Stash the currently drawn feature
 424   browseActiveFeature = feature;
 425 }
 426
 427 function loadHistory() {
 428   this.link.href = "";
 429   this.link.innerHTML = "<%=j t 'browse.start_rjs.wait' %>";
 430
 431   $.ajax("/api/<%= API_VERSION %>/" + this.type + "/" + this.feature.osm_id + "/history", {
 432     complete: OpenLayers.Function.bind(displayHistory, this)
 433   });
 434
 435   return false;
 436 }
 437
 438 function displayHistory(request) {
 439   if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList)  {
 440       return false;
 441   }
 442
 443   this.link.parentNode.removeChild(this.link);
 444
 445   var doc = request.responseXML;
 446
 447   var table = document.createElement("table");
 448   table.width = "100%";
 449   table.className = "browse_heading";
 450   $("#browse_content").append(table);
 451
 452   var tr = document.createElement("tr");
 453   table.appendChild(tr);
 454
 455   var heading = document.createElement("td");
 456   heading.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.history_for_feature' %>", { feature: featureNameHistory(this.feature) })));
 457   tr.appendChild(heading);
 458
 459   var td = document.createElement("td");
 460   td.align = "right";
 461   tr.appendChild(td);
 462
 463   var link = document.createElement("a");
 464   link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history";
 465   link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.details' %>"));
 466   td.appendChild(link);
 467
 468   var div = document.createElement("div");
 469   div.className = "browse_details";
 470
 471   var nodes = doc.getElementsByTagName(this.type);
 472   var history = document.createElement("ul");
 473   for (var i = nodes.length - 1; i >= 0; i--) {
 474     var user = nodes[i].getAttribute("user") || "<%=j t 'browse.start_rjs.private_user' %>";
 475     var timestamp = nodes[i].getAttribute("timestamp");
 476     var item = document.createElement("li");
 477     item.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.edited_by_user_at_timestamp' %>", { user: user, timestamp: timestamp })));
 478     history.appendChild(item);
 479   }
 480   div.appendChild(history);
 481
 482   $("#browse_content").append(div);
 483 }
 484
 485 function featureType(feature) {
 486   if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
 487     return "node";
 488   } else {
 489     return "way";
 490   }
 491 }
 492
 493 function featureTypeName(feature) {
 494   if (featureType(feature) == "node") {
 495     return "<%=j t 'browse.start_rjs.object_list.type.node' %>";
 496   } else if (featureType(feature) == "way") {
 497     return "<%=j t 'browse.start_rjs.object_list.type.way' %>";
 498   }
 499 }
 500
 501 function featureName(feature) {
 502   if (feature.attributes['name:<%= I18n.locale %>']) {
 503     return feature.attributes['name:<%= I18n.locale %>'];
 504   } else if (feature.attributes.name) {
 505     return feature.attributes.name;
 506   } else {
 507     return feature.osm_id;
 508   }
 509 }
 510
 511 function featureNameSelect(feature) {
 512   if (feature.attributes['name:<%= I18n.locale %>']) {
 513     return feature.attributes['name:<%= I18n.locale %>'];
 514   } else if (feature.attributes.name) {
 515     return feature.attributes.name;
 516   } else if (featureType(feature) == "node") {
 517     return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.node' %>", { id: feature.osm_id });
 518   } else if (featureType(feature) == "way") {
 519     return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.way' %>", { id: feature.osm_id });
 520   }
 521 }
 522
 523 function featureNameHistory(feature) {
 524   if (feature.attributes['name:<%= I18n.locale %>']) {
 525     return feature.attributes['name:<%= I18n.locale %>'];
 526   } else if (feature.attributes.name) {
 527     return feature.attributes.name;
 528   } else if (featureType(feature) == "node") {
 529     return i18n("<%=j t 'browse.start_rjs.object_list.history.type.node' %>", { id: feature.osm_id });
 530   } else if (featureType(feature) == "way") {
 531     return i18n("<%=j t 'browse.start_rjs.object_list.history.type.way' %>", { id: feature.osm_id });
 532   }
 533 }
 534
 535 function setStatus(status) {
 536   $("#browse_status").html(status);
 537   $("#browse_status").show();
 538 }
 539
 540 function clearStatus() {
 541   $("#browse_status").html("");
 542   $("#browse_status").hide();
 543 }
 544
 545 startBrowse();