1 page.replace_html :sidebar_title, 'Browse'
2 page.replace_html :sidebar_content, :partial => 'start'
4 var gml, sf, obj_list, currentFeature;
5 OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
6 OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
8 openSidebar({ onclose: stopBrowse });
9 vectors = new OpenLayers.Layer.Vector("Vector Layer", {
10 displayInLayerSwitcher: false
13 box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
19 callbacks: { done: endDrag }
24 function stopBrowse() {
34 function startDrag() {
35 $("drag_box").innerHTML='Drag a box on the map to select an area';
40 $("drag_box").onclick = startDrag;
43 var bounds = map.getExtent();
47 $("use_map").onclick = useMap;
48 function dataLoaded() {
49 $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
51 obj_list = document.createElement("ul");
52 for (var i = 0; i < this.features.length; i++) {
53 var feature = this.features[i];
55 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
58 var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
59 var li = document.createElement("li");
60 li.appendChild(document.createTextNode(nice_name + " "));
61 var link = document.createElement("a");
62 link.href = "/browse/"+type+"/"+feature.osm_id;
63 var name = feature.attributes.name || feature.osm_id;
64 link.appendChild(document.createTextNode(name));
66 li.appendChild(document.createTextNode(" "));
67 var link = document.createElement("a");
69 link.appendChild(document.createTextNode("+"));
70 link.feature = feature;
71 link.onclick = OpenLayers.Function.bind(function() {
72 var layer = this.feature.layer;
73 for (var i = 0; i < layer.selectedFeatures.length; i++) {
74 var f = layer.selectedFeatures[i];
75 layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
77 on_feature_hover(this.feature);
78 map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
81 obj_list.appendChild(li);
83 $("object").innerHTML = "";
84 $("object").appendChild(obj_list);
86 function getData(bounds) {
87 $("status").innerHTML = "Loading...";
88 bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
89 var url = "/api/0.5/map?bbox="+bounds.toBBOX();
91 var def = OpenLayers.Feature.Vector.style['default'];
92 var style = new OpenLayers.Style();
93 style.addRules([new OpenLayers.Rule(
95 {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
96 "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
97 "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
100 gml = new OpenLayers.Layer.GML("Data",url,
101 {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
102 styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
105 gml.events.register("loadend", gml, dataLoaded );
107 sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
115 function endDrag(bbox) {
116 var bounds = bbox.getBounds();
120 $("drag_box").innerHTML = "Select an area to see features";
123 function loadObjList() {
124 $("object").innerHTML="";
125 $("object").appendChild(obj_list);
128 function on_feature_hover(feature) {
129 if (currentFeature) {
130 currentFeature.layer.drawFeature(
131 currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
134 feature.layer.drawFeature(
135 feature, feature.layer.styleMap.createSymbolizer(feature, "select")
137 if ($("object").firstChild == $("object").obj_list) {
138 $("object").removeChild(obj_list);
140 $("object").innerHTML = "";
142 var div = document.createElement("div");
143 var link = document.createElement("a");
145 link.onclick = loadObjList;
146 link.appendChild(document.createTextNode("Back to Object List"));
147 div.appendChild(link)
148 $("object").appendChild(div);
149 var ul = document.createElement("ul");
151 if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
154 var li = document.createElement("li");
155 var link = document.createElement("a");
156 link.href = "/browse/"+type+"/"+feature.osm_id;
157 link.appendChild(document.createTextNode(feature.osm_id));
158 li.appendChild(link);
160 for (var key in feature.attributes) {
161 var li = document.createElement("li");
162 li.appendChild(document.createTextNode(key + ": " + feature.attributes[key]));
165 $("object").appendChild(ul);
166 currentFeature = feature;
168 function setBounds(bounds) {
169 var epsg4326 = new OpenLayers.Projection("EPSG:4326");
170 var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
172 bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
174 $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
175 $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
176 $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
177 $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;