--- /dev/null
+page.replace_html :sidebar_title, 'Browse'
+page.replace_html :sidebar_content, :partial => 'start'
+page << <<EOJ
+ var gml, sf, obj_list, currentFeature;
+ OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
+ OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
+ function start() {
+ openSidebar({ onclose: stopBrowse });
+ vectors = new OpenLayers.Layer.Vector("Vector Layer", {
+ displayInLayerSwitcher: false
+ });
+
+ box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
+ handlerOptions: {
+ sides: 4,
+ snapAngle: 90,
+ irregular: true,
+ persist: true,
+ callbacks: { done: endDrag }
+ }
+ });
+ map.addControl(box);
+ }
+ function stopBrowse() {
+ if (gml) {
+ gml.destroy();
+ gml = null;
+ }
+ if (sf) {
+ sf.destroy();
+ sf = null;
+ }
+ }
+ function startDrag() {
+ $("drag_box").innerHTML='Drag a box on the map to select an area';
+ box.activate();
+ return false;
+ };
+
+ $("drag_box").onclick = startDrag;
+
+ function useMap() {
+ var bounds = map.getExtent();
+ setBounds(bounds);
+ getData(bounds);
+ }
+ $("use_map").onclick = useMap;
+ function dataLoaded() {
+ $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
+
+ obj_list = document.createElement("ul");
+ for (var i = 0; i < this.features.length; i++) {
+ var feature = this.features[i];
+ var type ="way";
+ if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
+ type = "node";
+ }
+ var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length);
+ var li = document.createElement("li");
+ li.appendChild(document.createTextNode(nice_name + " "));
+ var link = document.createElement("a");
+ link.href = "/browse/"+type+"/"+feature.osm_id;
+ var name = feature.attributes.name || feature.osm_id;
+ link.appendChild(document.createTextNode(name));
+ li.appendChild(link);
+ li.appendChild(document.createTextNode(" "));
+ var link = document.createElement("a");
+ link.href = "#";
+ link.appendChild(document.createTextNode("+"));
+ link.feature = feature;
+ link.onclick = OpenLayers.Function.bind(function() {
+ var layer = this.feature.layer;
+ for (var i = 0; i < layer.selectedFeatures.length; i++) {
+ var f = layer.selectedFeatures[i];
+ layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
+ }
+ on_feature_hover(this.feature);
+ map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());
+ }, link);
+ li.appendChild(link);
+ obj_list.appendChild(li);
+ }
+ $("object").innerHTML = "";
+ $("object").appendChild(obj_list);
+ }
+ function getData(bounds) {
+ $("status").innerHTML = "Loading...";
+ bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
+ var url = "/api/0.5/map?bbox="+bounds.toBBOX();
+ if (!gml) {
+ var def = OpenLayers.Feature.Vector.style['default'];
+ var style = new OpenLayers.Style();
+ style.addRules([new OpenLayers.Rule(
+ {'symbolizer':
+ {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
+ "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
+ "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
+ }
+ )]);
+ gml = new OpenLayers.Layer.GML("Data",url,
+ {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
+ styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
+ }
+ );
+ gml.events.register("loadend", gml, dataLoaded );
+ map.addLayer(gml);
+ sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
+ map.addControl(sf);
+ sf.activate();
+
+ } else {
+ gml.setUrl(url);
+ }
+ }
+ function endDrag(bbox) {
+ var bounds = bbox.getBounds();
+ setBounds(bounds);
+ box.deactivate();
+ getData(bounds);
+ $("drag_box").innerHTML = "Select an area to see features";
+
+ }
+ function loadObjList() {
+ $("object").innerHTML="";
+ $("object").appendChild(obj_list);
+ }
+
+ function on_feature_hover(feature) {
+ if (currentFeature) {
+ currentFeature.layer.drawFeature(
+ currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
+ );
+ }
+ feature.layer.drawFeature(
+ feature, feature.layer.styleMap.createSymbolizer(feature, "select")
+ );
+ if ($("object").firstChild == $("object").obj_list) {
+ $("object").removeChild(obj_list);
+ } else {
+ $("object").innerHTML = "";
+ }
+ var div = document.createElement("div");
+ var link = document.createElement("a");
+ link.href="#";
+ link.onclick = loadObjList;
+ link.appendChild(document.createTextNode("Back to Object List"));
+ div.appendChild(link)
+ $("object").appendChild(div);
+ var ul = document.createElement("ul");
+ var type ="way";
+ if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
+ type = "node";
+ }
+ var li = document.createElement("li");
+ var link = document.createElement("a");
+ link.href = "/browse/"+type+"/"+feature.osm_id;
+ link.appendChild(document.createTextNode(feature.osm_id));
+ li.appendChild(link);
+ ul.appendChild(li);
+ for (var key in feature.attributes) {
+ var li = document.createElement("li");
+ li.appendChild(document.createTextNode(key + ": " + feature.attributes[key]));
+ ul.appendChild(li);
+ }
+ $("object").appendChild(ul);
+ currentFeature = feature;
+ }
+ function setBounds(bounds) {
+ var epsg4326 = new OpenLayers.Projection("EPSG:4326");
+ var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
+
+ bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
+
+ $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
+ $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
+ $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
+ $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
+ }
+
+start();
+EOJ
projects / rails.git / commitdiff