1 page.replace_html :sidebar_title, 'Data'
2 page.replace_html :sidebar_content, :partial => 'start'
6 var browseMode = "auto";
9 var browseActiveFeature;
11 var browseSelectControl;
14 OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
15 OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
17 function startBrowse() {
18 openSidebar({ onclose: stopBrowse });
20 var vectors = new OpenLayers.Layer.Vector();
22 browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
28 callbacks: { done: endDrag }
31 map.addControl(browseBoxControl);
33 map.events.register("moveend", map, showData);
34 map.events.triggerEvent("moveend");
40 if (browseMode == "auto") {
41 if (map.getZoom() >= 15) {
44 $("browse_status").innerHTML = "Zoom in or Select an area of the map to view.";
49 function stopBrowse() {
53 if (browseDataLayer) {
54 browseDataLayer.destroy();
55 browseDataLayer = null;
58 if (browseSelectControl) {
59 browseSelectControl.destroy();
60 browseSelectControl = null;
63 if (browseBoxControl) {
64 browseBoxControl.destroy();
65 browseBoxControl = null;
68 if (browseActiveFeature) {
69 browseActiveFeature.destroy();
70 browseActiveFeature = null;
73 map.dataLayer.setVisibility(false);
74 map.events.unregister("moveend", map, showData);
78 function startDrag() {
79 $("browse_select_box").innerHTML='Drag a box on the map to select an area';
81 browseBoxControl.activate();
86 $("browse_select_box").onclick = startDrag;
89 var bounds = map.getExtent();
90 var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
92 if (!browseBounds || !browseBounds.containsBounds(projected)) {
93 var center = bounds.getCenterLonLat();
94 var tileWidth = bounds.getWidth() * 1.2;
95 var tileHeight = bounds.getHeight() * 1.2;
96 var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2),
97 center.lat - (tileHeight / 2),
98 center.lon + (tileWidth / 2),
99 center.lat + (tileHeight / 2));
101 browseBounds = tileBounds;
106 $("browse_select_view").style.display = "none";
112 $("browse_select_view").onclick = useMap;
114 function endDrag(bbox) {
115 var bounds = bbox.getBounds();
116 var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
118 browseBoxControl.deactivate();
119 browseBounds = projected;
122 browseMode = "manual";
124 $("browse_select_box").innerHTML = "Manually select a different area";
125 $("browse_select_view").style.display = "inline";
128 function displayFeatureWarning() {
129 $("browse_status").innerHTML = "";
131 var div = document.createElement("div");
133 var p = document.createElement("p");
134 p.appendChild(document.createTextNode("You have loaded an area which contains " + browseFeatureList.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."));
137 var input = document.createElement("input");
138 input.type = "submit";
139 input.value = "Load Data";
140 input.onclick = loadFeatureList;
141 div.appendChild(input);
143 $("browse_object_list").innerHTML = "";
144 $("browse_object_list").appendChild(div);
147 function loadFeatureList() {
148 browseDataLayer.addFeatures(browseFeatureList);
149 browseDataLayer.events.triggerEvent("loadend");
151 browseFeatureList = [];
156 function customDataLoader(request) {
158 var doc = request.responseXML;
160 if (!doc || !doc.documentElement) {
161 doc = request.responseText;
166 OpenLayers.Util.extend(options, this.formatOptions);
168 if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
169 options.externalProjection = this.projection;
170 options.internalProjection = this.map.getProjectionObject();
173 var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
175 browseFeatureList = gml.read(doc);
177 if (!this.maxFeatures || browseFeatureList.length <= this.maxFeatures) {
180 displayFeatureWarning();
185 function getData(bounds) {
186 var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
187 var size = projected.getWidth() * projected.getHeight();
190 $("browse_status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />";
192 loadGML("/api/0.5/map?bbox=" + projected.toBBOX());
196 function loadGML(url) {
197 $("browse_status").innerHTML = "Loading...";
198 $("browse_object_list").innerHTML = "";
200 if (!browseDataLayer) {
201 var style = new OpenLayers.Style();
203 style.addRules([new OpenLayers.Rule({
205 Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' },
206 Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' },
207 Point: { fillColor: '#00ff00', strokeColor: '#00ff00' }
211 browseDataLayer = new OpenLayers.Layer.GML("Data", url, {
212 format: OpenLayers.Format.OSM,
213 formatOptions: { checkTags: true },
215 requestSuccess: customDataLoader,
216 displayInLayerSwitcher: false,
217 styleMap: new OpenLayers.StyleMap({
219 select: { strokeColor: '#0000ff', strokeWidth: 8 }
222 browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );
223 map.addLayer(browseDataLayer);
225 browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });
226 browseSelectControl.handler.stopDown = false;
227 browseSelectControl.handler.stopUp = false;
228 map.addControl(browseSelectControl);
229 browseSelectControl.activate();
231 browseDataLayer.setUrl(url);
234 browseActiveFeature = null;
237 function dataLoaded() {
239 $("browse_status").innerHTML = "Loaded."
241 var list = document.createElement("ul");
243 for (var i = 0; i < this.features.length; i++) {
244 var feature = this.features[i];
248 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
251 var typeName = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
252 var li = document.createElement("li");
253 li.appendChild(document.createTextNode(typeName + " "));
255 // Link, for viewing in the tab
256 var link = document.createElement("a");
257 link.href = "/browse/" + type + "/" + feature.osm_id;
258 var name = feature.attributes.name || feature.osm_id;
259 link.appendChild(document.createTextNode(name));
260 link.feature = feature;
261 link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
262 li.appendChild(link);
264 list.appendChild(li);
267 browseObjectList = document.createElement("div")
268 browseObjectList.appendChild(list)
270 var link = document.createElement("a");
271 link.href = this.url;
272 link.appendChild(document.createTextNode("API"));
273 browseObjectList.appendChild(link);
275 $("browse_object_list").innerHTML = "";
276 $("browse_object_list").appendChild(browseObjectList);
280 function viewFeatureLink() {
281 var layer = this.feature.layer;
283 for (var i = 0; i < layer.selectedFeatures.length; i++) {
284 var f = layer.selectedFeatures[i];
285 layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
288 onFeatureSelect(this.feature);
290 if (browseMode != "auto") {
291 map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
297 function loadObjectList() {
298 $("browse_object_list").innerHTML="";
299 $("browse_object_list").appendChild(browseObjectList);
304 function onFeatureSelect(feature) {
305 // Unselect previously selected feature
306 if (browseActiveFeature) {
307 browseActiveFeature.layer.drawFeature(
309 browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")
313 // Redraw in selected style
314 feature.layer.drawFeature(
315 feature, feature.layer.styleMap.createSymbolizer(feature, "select")
318 // If the current object is the list, don't innerHTML="", since that could clear it.
319 if ($("browse_object_list").firstChild == browseObjectList) {
320 $("browse_object_list").removeChild(browseObjectList);
322 $("browse_object_list").innerHTML = "";
325 // Create a link back to the object list
326 var link = document.createElement("a");
328 link.onclick = loadObjectList;
329 link.appendChild(document.createTextNode("Back to Object List"));
331 var div = document.createElement("div");
332 div.appendChild(link)
334 $("browse_object_list").appendChild(div);
337 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
341 var link = document.createElement("a");
342 link.href = "/browse/" + type + "/" + feature.osm_id;
343 link.appendChild(document.createTextNode("Database entry for " + feature.osm_id));
345 var div = document.createElement("div");
346 div.style.marginTop = "20px"
347 div.appendChild(link);
349 $("browse_object_list").appendChild(div);
351 // Now the list of attributes
352 var ul = document.createElement("ul");
353 for (var key in feature.attributes) {
354 var li = document.createElement("li");
355 var b = document.createElement("b");
356 b.appendChild(document.createTextNode(key));
358 li.appendChild(document.createTextNode(": " + feature.attributes[key]));
362 $("browse_object_list").appendChild(ul);
364 var link = document.createElement("a");
365 link.href = "/browse/"+type+"/"+feature.osm_id+"/history";
366 link.appendChild(document.createTextNode("History"));
367 link.onclick = OpenLayers.Function.bind(loadHistory, {
368 type: type, feature: feature, link: link
371 $("browse_object_list").appendChild(link);
373 // Stash the currently drawn feature
374 browseActiveFeature = feature;
377 function loadHistory() {
379 this.link.innerHTML = "Wait...";
381 new Ajax.Request("/api/0.5/" + this.type + "/" + this.feature.osm_id + "/history", {
382 onComplete: OpenLayers.Function.bind(displayHistory, this)
388 function displayHistory(request) {
389 if (browseActiveFeature.osm_id != this.feature.osm_id || $("browse_object_list").firstChild == browseObjectList) {
393 this.link.parentNode.removeChild(this.link);
395 var doc = request.responseXML;
396 var div = document.createElement("div");
397 var h3 = document.createElement("h3");
398 h3.appendChild(document.createTextNode("History"));
401 var nodes = doc.getElementsByTagName(this.type);
402 var history = document.createElement("ul");
403 for (var i = nodes.length - 1; i >= 0; i--) {
404 var user = nodes[i].getAttribute("user") || "private user";
405 var timestamp = nodes[i].getAttribute("timestamp");
406 var item = document.createElement("li");
407 item.appendChild(document.createTextNode("Edited by " + user + " at " + timestamp));
408 history.appendChild(item);
410 div.appendChild(history);
412 var link = document.createElement("a");
413 link.appendChild(document.createTextNode("History entry for " + this.feature.osm_id));
414 link.href = "/browse/"+this.type+"/"+this.feature.osm_id+"/history";
415 div.appendChild(link);
417 $("browse_object_list").appendChild(div);