1 page.replace_html :sidebar_title, 'Data'
2 page.replace_html :sidebar_content, :partial => 'start'
5 var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds, browsing;
6 OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
7 OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
10 openSidebar({ onclose: stopBrowse });
11 var vectors = new OpenLayers.Layer.Vector();
13 box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
19 callbacks: { done: endDrag }
23 map.events.register("moveend", map, showData);
24 map.events.triggerEvent("moveend");
25 map.dataLayer.stopBrowse = stopBrowse;
30 if (mode == "manual") { return; }
31 if (map.getZoom() >= 15) {
34 $("status").innerHTML = "Zoom in or Select an area of the map to view.";
38 function stopBrowse() {
41 map.dataLayer.stopBrowse = null;
51 currentFeature.destroy();
52 currentFeature = null;
54 map.dataLayer.setVisibility(false);
55 map.events.unregister("moveend", map, showData);
59 function startDrag() {
60 $("drag_box").innerHTML='Drag a box on the map to select an area';
64 $("drag_box").onclick = startDrag;
67 var bounds = map.getExtent();
68 var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
69 if (!currentBounds || !currentBounds.containsBounds(projected)) {
70 var center = bounds.getCenterLonLat();
71 var tileWidth = bounds.getWidth() * 1.2;
72 var tileHeight = bounds.getHeight() * 1.2;
74 new OpenLayers.Bounds(center.lon - (tileWidth / 2),
75 center.lat - (tileHeight / 2),
76 center.lon + (tileWidth / 2),
77 center.lat + (tileHeight / 2));
79 currentBounds = tileBounds;
82 $("use_map").style.display="none";
86 $("use_map").onclick = useMap;
88 function endDrag(bbox) {
89 var bounds = bbox.getBounds();
91 currentBounds = bounds;
93 $("drag_box").innerHTML = "Manually select a different area";
95 $("use_map").style.display="inline";
98 function displayFeatureWarning() {
99 $("status").innerHTML = "";
100 var div = document.createElement("div");
101 var p = document.createElement("p");
102 p.appendChild(document.createTextNode("You have loaded an area which contains " + featureList.length + " features. In general, some browsers may not cope well with displaying this quantity of data. Generally, browsers work best at displaying less than 100 features at a time: doing anything else may make your browser slow/unresponsive. If you are sure you want to display this data, you may do so by clicking the button below."));
104 var input = document.createElement("input");
105 input.type = "submit";
106 input.value = "Load Data";
107 input.onclick = loadFeatureList;
108 div.appendChild(input);
109 $("object").innerHTML="";
110 $("object").appendChild(div);
113 function loadFeatureList() {
114 gml.addFeatures(featureList);
115 gml.events.triggerEvent("loadend");
119 function customDataLoader(request) {
120 if (!browsing) { return; }
121 var doc = request.responseXML;
123 if (!doc || !doc.documentElement) {
124 doc = request.responseText;
129 OpenLayers.Util.extend(options, this.formatOptions);
130 if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
131 options.externalProjection = this.projection;
132 options.internalProjection = this.map.getProjectionObject();
135 var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
136 var features = gml.read(doc);
137 if (!this.maxFeatures || features.length <= this.maxFeatures) {
138 this.addFeatures(features);
139 this.events.triggerEvent("loadend");
142 featureList = features;
143 displayFeatureWarning();
147 function getData(bounds) {
149 bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
150 var size = bounds.getWidth() * bounds.getHeight();
152 $("status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />";
156 var url = "/api/0.5/map?bbox="+bounds.toBBOX();
160 function loadGML(url) {
161 $("status").innerHTML = "Loading...";
162 $("object").innerHTML = "";
164 var style = new OpenLayers.Style();
165 style.addRules([new OpenLayers.Rule(
167 {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
168 "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
169 "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
172 gml = new OpenLayers.Layer.GML("Data",url,
173 {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
174 maxFeatures: 100, requestSuccess: customDataLoader,
175 displayInLayerSwitcher: false,
176 styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff', strokeWidth: 8}})
179 gml.events.register("loadend", gml, dataLoaded );
182 sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
183 sf.handler.stopDown = false;
184 sf.handler.stopUp = false;
192 currentFeature = null;
194 function dataLoaded() {
195 if (!browsing) { return; }
196 $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
198 objList = document.createElement("ul");
199 for (var i = 0; i < this.features.length; i++) {
200 var feature = this.features[i];
204 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
207 var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
208 var li = document.createElement("li");
209 li.appendChild(document.createTextNode(nice_name + " "));
211 // Link, for viewing in the tab
212 var link = document.createElement("a");
213 link.href = "/browse/" + type + "/" + feature.osm_id;
214 var name = feature.attributes.name || feature.osm_id;
215 link.appendChild(document.createTextNode(name));
216 link.feature = feature;
217 link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
218 li.appendChild(link);
220 objList.appendChild(li);
222 $("object").innerHTML = "";
223 $("object").appendChild(objList);
226 function viewFeatureLink() {
227 var layer = this.feature.layer;
228 for (var i = 0; i < layer.selectedFeatures.length; i++) {
229 var f = layer.selectedFeatures[i];
230 layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
232 onFeatureSelect(this.feature);
233 if (mode != "auto") {
234 map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
239 function loadObjList() {
240 $("object").innerHTML="";
241 $("object").appendChild(objList);
245 function onFeatureSelect(feature) {
246 // Unselect previously selected feature
247 if (currentFeature) {
248 currentFeature.layer.drawFeature(
249 currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
253 // Redraw in selected style
254 feature.layer.drawFeature(
255 feature, feature.layer.styleMap.createSymbolizer(feature, "select")
258 // If the current object is the list, don't innerHTML="", since that could clar it.
259 if ($("object").firstChild == objList) {
260 $("object").removeChild(objList);
262 $("object").innerHTML = "";
265 // Create a link back to the object list
266 var div = document.createElement("div");
267 var link = document.createElement("a");
269 link.onclick = loadObjList;
270 link.appendChild(document.createTextNode("Back to Object List"));
271 div.appendChild(link)
272 $("object").appendChild(div);
274 // Now the list of attributes
275 var ul = document.createElement("ul");
277 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
280 var li = document.createElement("li");
281 var link = document.createElement("a");
282 link.href = "/browse/"+type+"/"+feature.osm_id;
283 link.appendChild(document.createTextNode(feature.osm_id));
284 li.appendChild(link);
286 for (var key in feature.attributes) {
287 var li = document.createElement("li");
288 var b = document.createElement("b");
289 b.appendChild(document.createTextNode(key));
291 li.appendChild(document.createTextNode(": " + feature.attributes[key]));
295 var li = document.createElement("li");
296 var link = document.createElement("a");
297 link.href = "/browse/"+type+"/"+feature.osm_id+"/history";
298 link.appendChild(document.createTextNode("History"));
299 li.appendChild(link);
301 link.onclick = OpenLayers.Function.bind(loadHistory, {type: type, feature: feature, link: link});
302 $("object").appendChild(ul);
305 // Stash the currently drawn feature
306 currentFeature = feature;
308 function loadHistory() {
310 this.link.innerHTML = "Wait...";
311 new Ajax.Request("/api/0.5/"+this.type+"/"+this.feature.osm_id+"/history", {onComplete: OpenLayers.Function.bind(displayHistory, this)});
314 function displayHistory(request) {
315 if (currentFeature.osm_id != this.feature.osm_id || $("object").firstChild == objList) {
318 this.link.parentNode.parentNode.removeChild(this.link.parentNode);
319 var doc = request.responseXML;
320 var div = document.createElement("div");
321 var h3 = document.createElement("h3");
322 h3.appendChild(document.createTextNode("History"));
324 var nodes = doc.getElementsByTagName(this.type);
325 var history = document.createElement("ul");
326 for (var i = nodes.length - 1; i >= 0; i--) {
327 var user = nodes[i].getAttribute("user") || "private user";
328 var timestamp = nodes[i].getAttribute("timestamp");
329 var item = document.createElement("li");
330 item.appendChild(document.createTextNode("Edited by " + user + " at " + timestamp));
331 history.appendChild(item);
333 div.appendChild(history);
334 var link = document.createElement("a");
335 link.appendChild(document.createTextNode("History"));
336 link.href = "/browse/"+this.type+"/"+this.feature.osm_id+"/history";
337 div.appendChild(link);
338 $("object").appendChild(div);