Clicking on nearby markers displays a popup showing the name of the mapper with a...

A similar popup is shown for your own marker.
Checkbox added for updating your own position, checked if you haven't set a location yet, unchecked by default if you have.

diff --git a/app/views/user/account.rhtml b/app/views/user/account.rhtml
index 60e5e009df8549a86a16e110e891f807ea69ff9f..f4af984e92c99bccd01c2e1f3e46dde137d22ce3 100644 (file)
--- a/app/views/user/account.rhtml
+++ b/app/views/user/account.rhtml
@@ -1,15 +1,17 @@
 <h2>User details</h2>
 <%= error_messages_for 'user' %>
 <%= start_form_tag :controller => 'user', :action => 'edit', :display_name => @user.display_name %>
-<table>
+<table style="width : 100%">
   <tr><td>Name</td><td><%= @user.email %></td></tr>
   <tr><td>Mapper since</td><td><%= @user.creation_time %> (<%= time_ago_in_words(@user.creation_time) %> ago)</td></tr>
   <tr><td>Display Name</td><td><%= text_field :user, :display_name, :value => @user.display_name %></td></tr>
   <tr id="homerow" <% unless @user.home_lat and @user.home_lon %> class="nohome" <%end%> ><td>Your home</td><td><em class="message">You have not entered your home location.</em><span class="location">Latitude: <%= text_field :user, :home_lat, :value => @user.home_lat, :size => 20, :id => "home_lat" %> Longitude <%= text_field :user, :home_lon, :value => @user.home_lon, :size => 20, :id => "home_lon" %></span>  </td></tr>
 
   <tr><td></td><td>
+  <p>Update home location when I click on the map? <input type="checkbox" value="1" <% unless @user.home_lat and @user.home_lon %> checked="checked" <% end %> id="updatehome" /> </p>
   <div id="map" style="border: 1px solid black; position: relative; width : 90%; height : 300px;">
-    <h3>Click on the map to (re)set your location</h3>
+    <% # This now just used to detect the width/height required for the popup. %>
+    <p id="highlightinfo"></p>
   </div>
   </td></tr>
 
@@ -95,7 +97,7 @@
 
 <script type="text/javascript">
   <!--
-  var map, layer, markers, marker;
+  var map, layer, markers, marker, popup;
 
 
   function mercator2lonlat( merc ) {
@@ -132,6 +134,7 @@
 
     <% if marker %>
     marker = new OpenLayers.Marker(new OpenLayers.LonLat(mlon,mlat));
+    marker.events.register("click", "marker", markerOnClick );
     markers.addMarker(marker);
     <%end%>
 
@@ -139,7 +142,9 @@
     near_icon.url = OpenLayers.Util.getImagesLocation() + "marker-green.png";;
     var i = nearest.length;
     while( i-- ) {
-        markers.addMarker( new OpenLayers.Marker( lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) ), near_icon ) );
+        var nearmarker = new OpenLayers.Marker( lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) ), near_icon );
+        markers.addMarker( nearmarker );
+        nearmarker.events.register("click", "nearmarker", makeMarkerFunction( i ) );
     }
 
       map.addControl(new OpenLayers.Control.LayerSwitcher());
@@ -148,7 +153,39 @@
     map.events.register("click", map, setHome);
   }        
 
+  function makeMarkerFunction( i ) {
+    return function() { markerOnClick( i ); };
+  }
+
+  function markerOnClick( i ) {
+    var html, position;
+    if( typeof( i ) == 'number'  ) {
+        html = '<p>Nearby mapper: <a href="/user/'+nearest[i].display_name+'">'+nearest[i].display_name+'</a></p>';
+        html += '<p style="text-align:right">(<a href="#" onclick="return closePopup();">close</a>)</p>';
+        position = lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) );
+    } else {
+        html = '<p>Your location (<a href="#" onclick="return closePopup()">close</a>)</p>';
+        position = new OpenLayers.LonLat(mlon,mlat);
+    }
+    var box = document.getElementById( 'highlightinfo' );
+    box.innerHTML = html;
+    closePopup();
+    popup = new OpenLayers.Popup.AnchoredBubble( 'popup', position, new OpenLayers.Size( box.offsetWidth, box.offsetHeight ), html, OpenLayers.Marker.defaultIcon(), true );
+    map.addPopup( popup );
+  }
+  
+    function closePopup() {
+        if( popup ) {
+            map.removePopup( popup );
+            delete popup;
+        }
+        return false;
+    }
+
     function setHome( e ) { 
+        closePopup();
+        if( ! document.getElementById( 'updatehome' ).checked )
+            return;
         var lonlat = map.getLonLatFromViewPortPx(e.xy)
 
         var lon_deg = (lonlat.lon / 20037508.34) * 180;

diff --git a/config/database.yml b/config/database.yml
index a972b44b376dc1123daa720d669a0f9b35bc53b6..b44b9823a7a8adb09ba1837858effa6f4382f1fd 100644 (file)
--- a/config/database.yml
+++ b/config/database.yml
@@ -15,7 +15,7 @@ development:
   database: openstreetmap
   username: openstreetmap
   password: openstreetmap
-  host: 128.40.58.203
+  host: localhost
 
 # Warning: The database defined as 'test' will be erased and
 # re-generated from your development database when you run 'rake'.

diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css
index 54a33db4142074ec05ea347044efd2fdcf20b34e..95ea2cfa10ee740936910836f8ad0ca2f22d8ae9 100644 (file)
--- a/public/stylesheets/site.css
+++ b/public/stylesheets/site.css
@@ -455,7 +455,11 @@ input {
   width : 30em;\r
 }\r
 \r
-#map h3 {\r
+/**\r
+ * This now just used to detect the width/height required for the popup.\r
+ */\r
+#map p#highlightinfo {\r
+    visibility : hidden;\r
     position : absolute;\r
     z-index : 10000;\r
     background : white;\r
@@ -465,3 +469,12 @@ input {
     margin : 0px;\r
     padding : 2px;\r
 }\r
+\r
+#popup * {\r
+    background-color : #E3FFC5 !important;\r
+}\r
+\r
+#map p#highlightinfo p, #popup p {\r
+    margin : 0;\r
+    padding : 2px;\r
+}\r