From: Christopher Schmidt <crschmidt@crschmidt.net>
Date: Mon, 21 Apr 2008 23:18:08 +0000 (+0000)
Subject: add in-map node/way browser
X-Git-Tag: live~7772^2~32
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/336a80530cb38c4b138493ef547961ea36b82ee3

add in-map node/way browser
---

diff --git a/app/controllers/browse_controller.rb b/app/controllers/browse_controller.rb
index 3ecec6348..b56e4f17e 100644
--- a/app/controllers/browse_controller.rb
+++ b/app/controllers/browse_controller.rb
@@ -2,6 +2,8 @@ class BrowseController < ApplicationController
   before_filter :authorize_web  
   layout 'site'
 
+  def start
+  end
   def index
     @nodes = Node.find(:all, :order => "timestamp DESC", :limit=> 20)  
   end
diff --git a/app/views/browse/_start.rhtml b/app/views/browse/_start.rhtml
new file mode 100644
index 000000000..616cd7d02
--- /dev/null
+++ b/app/views/browse/_start.rhtml
@@ -0,0 +1,18 @@
+<div style="padding:10px;">
+  <div class="export_bounds">
+    <span class="bounds_span" id="maxlat"></span> 
+    <br/>
+    <span class="bounds_span" style="padding:10px" id="minlon"></span> 
+    <span class="bounds_span" style="padding:10px" id="maxlon"></span> 
+    <br/>
+    <span class="bounds_span" id="minlat"></span> 
+    <p class="export_hint">
+      <a id="use_map" href="#">View Data For Current Map View</a>
+      <br />
+      <a id='drag_box' href="#">Manually select a different area</a>  
+    </p>
+  </div>
+
+<div id="status"></div>
+<div id="object"></div>
+</div>
diff --git a/app/views/browse/start.rjs b/app/views/browse/start.rjs
new file mode 100644
index 000000000..5ea29921e
--- /dev/null
+++ b/app/views/browse/start.rjs
@@ -0,0 +1,181 @@
+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
diff --git a/app/views/layouts/site.rhtml b/app/views/layouts/site.rhtml
index dd43e8b4d..d9641891c 100644
--- a/app/views/layouts/site.rhtml
+++ b/app/views/layouts/site.rhtml
@@ -54,7 +54,7 @@
         <% end %>
         <li><%= link_to 'GPS Traces', {:controller => 'trace', :action => 'list'}, {:id => 'traceanchor', :title => 'manage traces', :class => traceclass} %></li>
         <li><%= link_to 'User Diaries', {:controller => 'diary_entry', :action => 'list'}, {:id => 'diaryanchor', :title => 'view user diaries', :class => diaryclass} %></li>
-        <li><%= link_to 'Browse', {:controller => 'browse', :action => 'index'}, {:id => 'browseanchor', :title => 'browse data', :class => browseclass} %></li>
+        <li><%= link_to_remote 'Browse', {:url => {:controller => 'browse', :action => 'start'}}, {:href => url_for( {:controller => 'browse', :action => 'index'}), :id => 'browseanchor', :title => 'browse data', :class => browseclass} %></li>
       </ul>
     </div>
 
diff --git a/config/database.yml b/config/database.yml
index b884f3b93..19b5dd8d5 100644
--- a/config/database.yml
+++ b/config/database.yml
@@ -12,9 +12,8 @@
 #   http://dev.mysql.com/doc/refman/5.0/en/old-client.html
 development:
   adapter: mysql
-  database: openstreetmap
-  username: openstreetmap
-  password: openstreetmap
+  database: osm
+  user: root  
   host: localhost
 
 # Warning: The database defined as 'test' will be erased and
diff --git a/config/routes.rb b/config/routes.rb
index a93946c52..b6ab25c13 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -55,6 +55,7 @@ ActionController::Routing::Routes.draw do |map|
   map.connect "api/#{API_VERSION}/swf/trackpoints", :controller =>'swf', :action =>'trackpoints'
   
   # Data browsing
+  map.connect '/browse/start', :controller => 'browse', :action => 'start'
   map.connect '/browse', :controller => 'browse', :action => 'index'
   map.connect '/browse/way/:id', :controller => 'browse', :action => 'way', :id => /\d+/
   map.connect '/browse/way/:id/history', :controller => 'browse', :action => 'way_history', :id => /\d+/