1 page.replace_html :sidebar_title, 'Browse'
2 page.replace_html :sidebar_content, :partial => 'start'
5 var gml, sf, objList, currentFeature, featureList;
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, validateLinks);
24 map.events.triggerEvent("moveend");
25 if (map.getZoom() >= 16) {
28 $("status").innerHTML = "Zoom in or Select an area of the map to view.";
32 function stopBrowse() {
42 currentFeature.destroy();
43 currentFeature = null;
45 map.events.unregister("moveend", map, validateLinks);
48 function startDrag() {
49 $("drag_box").innerHTML='Drag a box on the map to select an area';
53 $("drag_box").onclick = startDrag;
56 var bounds = map.getExtent();
60 $("use_map").onclick = useMap;
62 function endDrag(bbox) {
63 var bounds = bbox.getBounds();
66 $("drag_box").innerHTML = "Manually select a different area";
69 function displayFeatureWarning() {
70 $("status").innerHTML = "";
71 var div = document.createElement("div");
72 var p = document.createElement("p");
73 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."));
75 var input = document.createElement("input");
76 input.type = "submit";
77 input.value = "Load Data";
78 input.onclick = loadFeatureList;
79 div.appendChild(input);
80 $("object").innerHTML="";
81 $("object").appendChild(div);
84 function loadFeatureList() {
85 gml.addFeatures(featureList);
86 gml.events.triggerEvent("loadend");
90 function customDataLoader(request) {
91 var doc = request.responseXML;
93 if (!doc || !doc.documentElement) {
94 doc = request.responseText;
99 OpenLayers.Util.extend(options, this.formatOptions);
100 if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
101 options.externalProjection = this.projection;
102 options.internalProjection = this.map.getProjectionObject();
105 var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
106 var features = gml.read(doc);
107 if (!this.maxFeatures || features.length <= this.maxFeatures) {
108 this.addFeatures(features);
109 this.events.triggerEvent("loadend");
112 featureList = features;
113 displayFeatureWarning();
117 function getData(bounds) {
119 bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
120 var size = bounds.getWidth() * bounds.getHeight();
122 $("status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />";
126 var url = "/api/0.5/map?bbox="+bounds.toBBOX();
130 function loadGML(url) {
131 $("status").innerHTML = "Loading...";
133 var style = new OpenLayers.Style();
134 style.addRules([new OpenLayers.Rule(
136 {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
137 "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
138 "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
141 gml = new OpenLayers.Layer.GML("Data",url,
142 {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
143 maxFeatures: 100, requestSuccess: customDataLoader,
144 styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff', strokeWidth: 8}})
147 gml.events.register("loadend", gml, dataLoaded );
150 sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
151 sf.handler.stopDown = false;
152 sf.handler.stopUp = false;
160 currentFeature = null;
162 function dataLoaded() {
163 $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
165 objList = document.createElement("ul");
166 for (var i = 0; i < this.features.length; i++) {
167 var feature = this.features[i];
171 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
174 var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
175 var li = document.createElement("li");
176 li.appendChild(document.createTextNode(nice_name + " "));
178 // Link, for viewing in the tab
179 var link = document.createElement("a");
180 link.href = "/browse/" + type + "/" + feature.osm_id;
181 var name = feature.attributes.name || feature.osm_id;
182 link.appendChild(document.createTextNode(name));
183 link.feature = feature;
184 link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);
185 li.appendChild(link);
187 objList.appendChild(li);
189 $("object").innerHTML = "";
190 $("object").appendChild(objList);
193 function viewFeatureLink() {
194 var layer = this.feature.layer;
195 for (var i = 0; i < layer.selectedFeatures.length; i++) {
196 var f = layer.selectedFeatures[i];
197 layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
199 onFeatureSelect(this.feature);
200 map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
204 function loadObjList() {
205 $("object").innerHTML="";
206 $("object").appendChild(objList);
210 function onFeatureSelect(feature) {
211 // Unselect previously selected feature
212 if (currentFeature) {
213 currentFeature.layer.drawFeature(
214 currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
218 // Redraw in selected style
219 feature.layer.drawFeature(
220 feature, feature.layer.styleMap.createSymbolizer(feature, "select")
223 // If the current object is the list, don't innerHTML="", since that could clar it.
224 if ($("object").firstChild == objList) {
225 $("object").removeChild(objList);
227 $("object").innerHTML = "";
230 // Create a link back to the object list
231 var div = document.createElement("div");
232 var link = document.createElement("a");
234 link.onclick = loadObjList;
235 link.appendChild(document.createTextNode("Back to Object List"));
236 div.appendChild(link)
237 $("object").appendChild(div);
239 // Now the list of attributes
240 var ul = document.createElement("ul");
242 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
245 var li = document.createElement("li");
246 var link = document.createElement("a");
247 link.href = "/browse/"+type+"/"+feature.osm_id;
248 link.appendChild(document.createTextNode(feature.osm_id));
249 li.appendChild(link);
251 for (var key in feature.attributes) {
252 var li = document.createElement("li");
253 var b = document.createElement("b");
254 b.appendChild(document.createTextNode(key));
256 li.appendChild(document.createTextNode(": " + feature.attributes[key]));
259 $("object").appendChild(ul);
261 // Stash the currently drawn feature
262 currentFeature = feature;
265 function validateLinks() {
266 var bounds = this.getExtent();
267 bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
269 if (bounds.getWidth() * bounds.getHeight() > 0.25) {
270 $("use_map").style.display = "none";
272 $("use_map").style.display = "inline";