]> git.openstreetmap.org Git - rails.git/blobdiff - app/views/browse/start.rjs
change layout: now a link, no longer a tab
[rails.git] / app / views / browse / start.rjs
index 0b0681ce5ab4f7705cb2a9972d0509a1b0f02391..2c48c70ff9f1df7bafd0472fb7303b9825348bd6 100644 (file)
@@ -2,24 +2,31 @@ page.replace_html :sidebar_title, 'Browse'
 page.replace_html :sidebar_content, :partial => 'start'
 page << <<EOJ
     
-    var gml, sf, objList, currentFeature;
+    var gml, sf, objList, currentFeature, featureList;
     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, validateLinks);
+        map.events.triggerEvent("moveend");
+        if (map.getZoom() >= 16) {
+            useMap();
+        } else {
+            $("status").innerHTML = "Zoom in or Select an area of the map to view.";
+        }    
     }
     
     function stopBrowse() {
@@ -35,6 +42,7 @@ page << <<EOJ
             currentFeature.destroy(); 
             currentFeature = null; 
         } 
+        map.events.unregister("moveend", map, validateLinks);
     }
     
     function startDrag() {
@@ -46,27 +54,82 @@ page << <<EOJ
     
     function useMap() {
         var bounds = map.getExtent();
-        setBounds(bounds);
-        getData(bounds); 
+        getData(bounds);
+        return false;
     }
     $("use_map").onclick = useMap;
     
     function endDrag(bbox) {
         var bounds = bbox.getBounds();
-        setBounds(bounds);
         box.deactivate();
         getData(bounds);
         $("drag_box").innerHTML = "Manually select a different area";
     }
     
+    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) { 
+        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...";
         if (!gml) {
-            var def = OpenLayers.Feature.Vector.style['default'];
             var style = new OpenLayers.Style();
             style.addRules([new OpenLayers.Rule( 
               {'symbolizer': 
@@ -77,20 +140,25 @@ 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,
+                     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() { 
         $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
         
@@ -136,6 +204,7 @@ page << <<EOJ
     function loadObjList() {
         $("object").innerHTML="";
         $("object").appendChild(objList);
+        return false;
     }
       
     function onFeatureSelect(feature) {
@@ -193,17 +262,15 @@ page << <<EOJ
         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);
+    function validateLinks() {
+        var bounds = this.getExtent();
+        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;
+        if (bounds.getWidth() * bounds.getHeight() > 0.25) {
+          $("use_map").style.display = "none";
+        } else {
+          $("use_map").style.display = "inline";
+        }  
     }
-
     start();
 EOJ