From: John McKerrell <john@mckerrell.net>
Date: Mon, 7 May 2007 18:47:38 +0000 (+0000)
Subject: Clicking on nearby markers displays a popup showing the name of the mapper with a... 
X-Git-Tag: live~8485
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/914b358154479adf295e8ef794787f07aee50c3d

Clicking on nearby markers displays a popup showing the name of the mapper with a link to their page.
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 60e5e009d..f4af984e9 100644
--- 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 a972b44b3..b44b9823a 100644
--- 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 54a33db41..95ea2cfa1 100644
--- a/public/stylesheets/site.css
+++ b/public/stylesheets/site.css
@@ -455,7 +455,11 @@ input {
   width : 30em;
 }
 
-#map h3 {
+/**
+ * This now just used to detect the width/height required for the popup.
+ */
+#map p#highlightinfo {
+    visibility : hidden;
     position : absolute;
     z-index : 10000;
     background : white;
@@ -465,3 +469,12 @@ input {
     margin : 0px;
     padding : 2px;
 }
+
+#popup * {
+    background-color : #E3FFC5 !important;
+}
+
+#map p#highlightinfo p, #popup p {
+    margin : 0;
+    padding : 2px;
+}