destroy the feature when we leave
[rails.git] / app / views / browse / start.rjs
1 page.replace_html :sidebar_title, 'Browse'
2 page.replace_html :sidebar_content, :partial => 'start'
3 page << <<EOJ
4  var gml, sf, obj_list, currentFeature;
5  OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
6  OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
7  function start() {
8    openSidebar({ onclose: stopBrowse });
9    vectors = new OpenLayers.Layer.Vector("Vector Layer", {
10      displayInLayerSwitcher: false
11    });
12  
13    box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
14      handlerOptions: {
15        sides: 4,
16        snapAngle: 90,
17        irregular: true,
18        persist: true,
19        callbacks: { done: endDrag }
20      }
21    });
22    map.addControl(box);
23  }
24  function stopBrowse() {
25      if (gml) {
26        gml.destroy();
27        gml = null; 
28      } 
29      if (sf) {   
30          sf.destroy();  
31          sf = null;
32      } 
33      if (currentFeature) {
34          currentFeature.destroy(); 
35          currentFeature = null; 
36      } 
37  }
38  function startDrag() {
39    $("drag_box").innerHTML='Drag a box on the map to select an area';
40     box.activate(); 
41     return false;
42  };
43
44  $("drag_box").onclick = startDrag;
45   
46   function useMap() {
47       var bounds = map.getExtent();
48       setBounds(bounds);
49       getData(bounds); 
50   }
51   $("use_map").onclick = useMap;
52   function dataLoaded() { 
53       $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
54       
55       obj_list = document.createElement("ul");
56       for (var i = 0; i < this.features.length; i++) {
57           var feature = this.features[i]; 
58           var type ="way";
59           if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
60               type = "node";
61           }   
62           var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length); 
63           var li = document.createElement("li");
64           li.appendChild(document.createTextNode(nice_name + " "));
65           var link = document.createElement("a");
66           link.href =  "/browse/"+type+"/"+feature.osm_id;
67           var name = feature.attributes.name || feature.osm_id;
68           link.appendChild(document.createTextNode(name));
69           li.appendChild(link);
70           li.appendChild(document.createTextNode(" "));
71           var link = document.createElement("a");
72           link.href =  "#";
73           link.appendChild(document.createTextNode("+"));
74           link.feature = feature;
75           link.onclick = OpenLayers.Function.bind(function() { 
76             var layer = this.feature.layer;
77             for (var i = 0; i < layer.selectedFeatures.length; i++) {
78                 var f = layer.selectedFeatures[i]; 
79                 layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
80             }
81             on_feature_hover(this.feature);
82             map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());  
83           }, link);   
84           li.appendChild(link);
85           obj_list.appendChild(li);
86       }
87       $("object").innerHTML = "";
88       $("object").appendChild(obj_list); 
89   }
90   function getData(bounds) {
91     $("status").innerHTML = "Loading...";
92     bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
93     var url = "/api/0.5/map?bbox="+bounds.toBBOX();
94     if (!gml) {
95         var def = OpenLayers.Feature.Vector.style['default'];
96         var style = new OpenLayers.Style();
97         style.addRules([new OpenLayers.Rule( 
98           {'symbolizer': 
99             {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
100              "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
101              "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
102           }
103         )]);
104         gml = new OpenLayers.Layer.GML("Data",url, 
105                 {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
106                  styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
107                 }
108         );
109         gml.events.register("loadend", gml, dataLoaded );
110         map.addLayer(gml);
111         sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
112         map.addControl(sf);
113         sf.activate();
114
115     } else {
116         gml.setUrl(url);
117     }
118   }
119   function endDrag(bbox) {
120     var bounds = bbox.getBounds();
121     setBounds(bounds);
122     box.deactivate();
123     getData(bounds);
124     $("drag_box").innerHTML = "Select an area to see features";
125
126   }
127   function loadObjList() {
128       $("object").innerHTML="";
129       $("object").appendChild(obj_list);
130   }
131     
132   function on_feature_hover(feature) {
133       if (currentFeature) {
134         currentFeature.layer.drawFeature(
135           currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
136         );
137       }
138       feature.layer.drawFeature(
139         feature, feature.layer.styleMap.createSymbolizer(feature, "select")
140       );
141       if ($("object").firstChild == $("object").obj_list) { 
142         $("object").removeChild(obj_list);
143       } else { 
144         $("object").innerHTML = "";
145       }   
146       var div = document.createElement("div");
147       var link = document.createElement("a");
148       link.href="#";
149       link.onclick = loadObjList;
150       link.appendChild(document.createTextNode("Back to Object List"));
151       div.appendChild(link)
152       $("object").appendChild(div);    
153       var ul = document.createElement("ul");
154       var type ="way";
155       if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
156           type = "node";
157       }    
158       var li = document.createElement("li");
159       var link = document.createElement("a");   
160       link.href =  "/browse/"+type+"/"+feature.osm_id;
161       link.appendChild(document.createTextNode(feature.osm_id));
162       li.appendChild(link);
163       ul.appendChild(li);
164       for (var key in feature.attributes) {
165           var li = document.createElement("li"); 
166           li.appendChild(document.createTextNode(key + ": " + feature.attributes[key]));
167           ul.appendChild(li);
168       }
169       $("object").appendChild(ul);
170       currentFeature = feature; 
171   }   
172   function setBounds(bounds) {
173     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
174     var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
175
176     bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
177
178     $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
179     $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
180     $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
181     $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
182   }
183
184 start();
185 EOJ