X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/d3314fee0f4a4031a893e0a93b5fa0f86b1613ed..e6de9accd215774a104497a7390943c9fa890a8b:/app/views/browse/start.rjs

diff --git a/app/views/browse/start.rjs b/app/views/browse/start.rjs
index 0d8b3288c..8d221f290 100644
--- a/app/views/browse/start.rjs
+++ b/app/views/browse/start.rjs
@@ -1,40 +1,59 @@
-page.replace_html :sidebar_title, 'Browse'
+page.replace_html :sidebar_title, 'Data'
 page.replace_html :sidebar_content, :partial => 'start'
 page << <<EOJ
     
-    var gml, sf, objList, currentFeature;
+    var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds, browsing;
     OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
     OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
     
     function start() {
-      openSidebar({ onclose: stopBrowse });
-      var vectors = new OpenLayers.Layer.Vector();
+        openSidebar({ onclose: stopBrowse });
+        var vectors = new OpenLayers.Layer.Vector();
     
-      box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
-        handlerOptions: {
-          sides: 4,
-          snapAngle: 90,
-          irregular: true,
-          persist: true,
-          callbacks: { done: endDrag }
-        }
-      });
-      map.addControl(box);
+        box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
+          handlerOptions: {
+            sides: 4,
+            snapAngle: 90,
+            irregular: true,
+            persist: true,
+            callbacks: { done: endDrag }
+          }
+        });
+        map.addControl(box);
+        map.events.register("moveend", map, showData);
+        map.events.triggerEvent("moveend");
+        map.dataLayer.stopBrowse = stopBrowse;
+        browsing = true;
+    }
+
+    function showData() {
+        if (mode == "manual") { return; }
+        if (map.getZoom() >= 15) {
+            useMap();
+        } else {
+            $("status").innerHTML = "Zoom in or Select an area of the map to view.";
+        }    
     }
     
     function stopBrowse() {
-        if (gml) {
-            gml.destroy();
-            gml = null; 
-        } 
-        if (sf) {   
-            sf.destroy();  
-            sf = null;
-        } 
-        if (currentFeature) {
-            currentFeature.destroy(); 
-            currentFeature = null; 
-        } 
+        if (browsing) {
+            browsing = false; 
+            map.dataLayer.stopBrowse = null;
+            if (gml) {
+                gml.destroy();
+                gml = null; 
+            } 
+            if (sf) {   
+                sf.destroy();  
+                sf = null;
+            } 
+            if (currentFeature) {
+                currentFeature.destroy(); 
+                currentFeature = null; 
+            }
+            map.dataLayer.setVisibility(false);
+            map.events.unregister("moveend", map, showData);
+        }    
     }
     
     function startDrag() {
@@ -46,28 +65,102 @@ page << <<EOJ
     
     function useMap() {
         var bounds = map.getExtent();
-        setBounds(bounds);
-        getData(bounds);
+        var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
+        if (!currentBounds || !currentBounds.containsBounds(projected)) {
+            var center = bounds.getCenterLonLat();
+            var tileWidth = bounds.getWidth() * 1.2;
+            var tileHeight = bounds.getHeight() * 1.2;
+            var tileBounds =
+                new OpenLayers.Bounds(center.lon - (tileWidth / 2),
+                                      center.lat - (tileHeight / 2),
+                                      center.lon + (tileWidth / 2),
+                                      center.lat + (tileHeight / 2));
+
+            currentBounds = tileBounds;
+            getData(tileBounds);
+            mode = "auto";
+            $("use_map").style.display="none";
+        }
         return false;
     }
     $("use_map").onclick = useMap;
     
     function endDrag(bbox) {
         var bounds = bbox.getBounds();
-        setBounds(bounds);
         box.deactivate();
+        currentBounds = bounds;
         getData(bounds);
         $("drag_box").innerHTML = "Manually select a different area";
+        mode = "manual";  
+        $("use_map").style.display="inline";
+    }
+    
+    function displayFeatureWarning() {
+        $("status").innerHTML = "";
+        var div = document.createElement("div");
+        var p = document.createElement("p");
+        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.")); 
+        div.appendChild(p);
+        var input = document.createElement("input");
+        input.type = "submit";
+        input.value = "Load Data";
+        input.onclick = loadFeatureList;
+        div.appendChild(input); 
+        $("object").innerHTML="";
+        $("object").appendChild(div);
     }
     
+    function loadFeatureList() {
+        gml.addFeatures(featureList);
+        gml.events.triggerEvent("loadend");
+        return false;
+    }    
+
+    function customDataLoader(request) { 
+        if (!browsing) { return; } 
+        var doc = request.responseXML;
+        
+        if (!doc || !doc.documentElement) {
+            doc = request.responseText;
+        }
+        
+        var options = {};
+        
+        OpenLayers.Util.extend(options, this.formatOptions);
+        if (this.map && !this.projection.equals(this.map.getProjectionObject())) {
+            options.externalProjection = this.projection;
+            options.internalProjection = this.map.getProjectionObject();
+        }    
+        
+        var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);
+        var features = gml.read(doc);
+        if (!this.maxFeatures || features.length <= this.maxFeatures) {
+            this.addFeatures(features);
+            this.events.triggerEvent("loadend");
+            featureList = []; 
+        } else {
+            featureList = features;
+            displayFeatureWarning();
+        }
+    }
+
     function getData(bounds) {
-        $("status").innerHTML = "Loading...";
         
         bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
+        var size = bounds.getWidth() * bounds.getHeight(); 
+        if (size > 0.25) {
+            $("status").innerHTML = "Unable to load: Bounding box size of " + size + " is too large. (Must be smaller than 0.25)<br />"; 
+            return;
+        }
+
         var url = "/api/0.5/map?bbox="+bounds.toBBOX();
         
+        loadGML(url);
+    }
+    function loadGML(url) {
+        $("status").innerHTML = "Loading...";
+        $("object").innerHTML = "";
         if (!gml) {
-            var def = OpenLayers.Feature.Vector.style['default'];
             var style = new OpenLayers.Style();
             style.addRules([new OpenLayers.Rule( 
               {'symbolizer': 
@@ -78,21 +171,28 @@ page << <<EOJ
             )]);
             gml = new OpenLayers.Layer.GML("Data",url, 
                     {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
-                     styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
+                     maxFeatures: 100, requestSuccess: customDataLoader,
+                     displayInLayerSwitcher: false,
+                     styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff', strokeWidth: 8}})
                     }
             );
             gml.events.register("loadend", gml, dataLoaded );
             map.addLayer(gml);
             
             sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': onFeatureSelect});
+            sf.handler.stopDown = false;
+            sf.handler.stopUp = false;
             map.addControl(sf);
             sf.activate();
+             
         } else {
             gml.setUrl(url);
         }
+
+        currentFeature = null;
     }
-    
-    function dataLoaded() { 
+    function dataLoaded() {
+        if (!browsing) { return; } 
         $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
         
         objList = document.createElement("ul");
@@ -130,7 +230,9 @@ page << <<EOJ
             layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
         }
         onFeatureSelect(this.feature);
-        map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
+        if (mode != "auto") {
+            map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
+        }
         return false;
     }
     
@@ -189,23 +291,52 @@ page << <<EOJ
             li.appendChild(document.createTextNode(": " + feature.attributes[key]));
             ul.appendChild(li);
         }
+        
+        var li = document.createElement("li");
+        var link = document.createElement("a");   
+        link.href =  "/browse/"+type+"/"+feature.osm_id+"/history";
+        link.appendChild(document.createTextNode("History"));
+        li.appendChild(link);
+        ul.appendChild(li);
+        link.onclick = OpenLayers.Function.bind(loadHistory, {type: type, feature: feature, link: link});
         $("object").appendChild(ul);
         
+        
         // Stash the currently drawn feature
         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;
+    function loadHistory() {
+        this.link.href = "";
+        this.link.innerHTML = "Wait...";
+        new Ajax.Request("/api/0.5/"+this.type+"/"+this.feature.osm_id+"/history", {onComplete: OpenLayers.Function.bind(displayHistory, this)});
+        return false;
     }
-
+    function displayHistory(request) {
+        if (currentFeature.osm_id != this.feature.osm_id || $("object").firstChild == objList)  { 
+            return false;
+        } 
+        this.link.parentNode.parentNode.removeChild(this.link.parentNode);
+        var doc = request.responseXML;
+        var div = document.createElement("div");
+        var h3 = document.createElement("h3"); 
+        h3.appendChild(document.createTextNode("History"));
+        div.appendChild(h3);
+        var nodes = doc.getElementsByTagName(this.type);
+        var history = document.createElement("ul");  
+        for (var i = nodes.length - 1; i >= 0; i--) {
+            var user = nodes[i].getAttribute("user") || "private user";
+            var timestamp = nodes[i].getAttribute("timestamp");
+            var item = document.createElement("li");
+            item.appendChild(document.createTextNode("Edited by " + user + " at " + timestamp));
+            history.appendChild(item);
+        }
+        div.appendChild(history);
+        var link = document.createElement("a");
+        link.appendChild(document.createTextNode("History"));
+        link.href = "/browse/"+this.type+"/"+this.feature.osm_id+"/history";
+        div.appendChild(link);
+        $("object").appendChild(div); 
+    }
+    
     start();
 EOJ