cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clicking on nearby markers displays a popup showing the name of the mapper with a link to their page.

Browse source 
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.
This commit is contained in:
John McKerrell 2007-05-07 18:47:38 +00:00
parent 83beee6d6a
commit 914b358154
3 changed files with 56 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/views/user/account.rhtml
View file

@ -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;