Set the map units to something OpenLayers? actually understands...
[rails.git] / app / views / user / account.rhtml
1 <h2>User details</h2>
2 <%= error_messages_for 'user' %>
3 <% form_tag :controller => 'user', :action => 'account', :display_name => @user.display_name do %>
4 <table style="width : 100%">
5   <tr><td>Name</td><td><%= @user.email %></td></tr>
6   <tr><td>Mapper since</td><td><%= @user.creation_time %> (<%= time_ago_in_words(@user.creation_time) %> ago)</td></tr>
7   <tr><td>Display Name</td><td><%= text_field :user, :display_name, :value => @user.display_name %></td></tr>
8   <tr><td>Password</td><td><%= password_field('user', 'pass_crypt',{:value => '', :size => 50, :maxlength => 255}) %></td></tr>
9   <tr><td>Confirm Password</td><td><%= password_field('user', 'pass_crypt_confirmation',{:value => '', :size => 50, :maxlength => 255}) %></td></tr>
10   <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>
11
12   <tr><td></td><td>
13   <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>
14   <div id="map" style="border: 1px solid black; position: relative; width : 90%; height : 300px;">
15     <% # This now just used to detect the width/height required for the popup. %>
16     <p id="highlightinfo"></p>
17   </div>
18   </td></tr>
19
20   <tr><td valign="top">Description</td><td><%= text_area :user, :description, :value => @user.description, :class => "editDescription" %></td></tr>
21 </table>
22 <%= submit_tag 'Save Changes' %>
23 <% end %>
24
25 <% nearest_str = "" %>
26 <% if @user.home_lat and @user.home_lon %>
27     <h2>Users in your area</h2>
28
29     <% if @user.nearby.empty? %>
30     There are no users who admit to mapping in your area.  Better go out and spread the word about OSM!
31     <% else %>
32
33     <p>These users are mapping in your area:</p>
34     <table>
35     <tr>
36     <th>Name</th>
37     <th>Distance</th>
38     <th>Contact</th>
39     </tr>
40     <% @user.nearby.each do |nearby| %>
41     <% nearest_str += "nearest.push( { 'display_name' : '#{nearby.display_name}', 'home_lat' : #{nearby.home_lat}, 'home_lon' : #{nearby.home_lon} } );\n" %>
42
43     <tr>
44     <td><%= link_to nearby.display_name, :controller => 'user', :action => 'view',  :display_name => nearby.display_name %></td>
45     <td><%= @user.distance(nearby).round %>km away</td>
46     <td><%= link_to 'send message', :controller => 'message', :action => 'new', :user_id => nearby.id %></td>
47     </tr>
48     <%end%>
49     </table>
50
51     <%end%>
52     <br />
53 <% end %>
54 <script type="text/javascript">
55     var nearest = [], friends = [];
56     <%= nearest_str %>
57 </script>
58
59 <% if @user.home_lat and @user.home_lon %>
60     <% marker = true %>
61     <% mlon = @user.home_lon %> 
62     <% mlat = @user.home_lat %>
63     <% lon =  @user.home_lon %>
64     <% lat =  @user.home_lat  %>
65     <% zoom =  '12' %>
66 <script type="text/javascript">
67   var mlat = <%= mlat %>;
68   var mlon = <%= mlon %>;
69 </script>
70 <% else %>
71     <% lon =  params['lon'] || '-0.1' %>
72     <% lat =  params['lat'] || '51.5' %>
73     <% zoom =  params['zoom'] || '4' %> 
74 <% end %>
75
76
77
78 <script type="text/javascript">
79   var lat = <%= lat %>;
80   var lon = <%= lon %>;
81   var zoom = <%= zoom %>;
82   var PI = 3.14159265358979323846;
83
84
85
86   <% if params['scale'] and params['scale'].length > 0 then %>
87   zoom = Math.log(360.0/(( <% print params['scale'].to_f() %> ) * 512.0)) / Math.log(2.0);
88   <% end %>
89   zoom = zoom;
90   lon = lon * 20037508.34 / 180;
91   lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
92   lat = lat * 20037508.34 / 180;
93   <% if marker %>
94   mlon = mlon * 20037508.34 / 180;
95   mlat = Math.log(Math.tan( (90 + mlat) * PI / 360)) / (PI / 180);
96   mlat = mlat * 20037508.34 / 180;
97   <%end%>
98
99 </script>
100 <script type="text/javascript" src="/openlayers/OpenLayers.js"></script>
101
102 <script type="text/javascript">
103   <!--
104   var map, layer, markers, marker, popup;
105
106   function mercator2lonlat( merc ) {
107     var lon_deg = (merc.lon / 20037508.34) * 180;
108     var lat_deg = (merc.lat / 20037508.34) * 180;
109     var PI = 3.14159265358979323846;
110     lat_deg = 180/PI * (2 * Math.atan(Math.exp(lat_deg * PI / 180)) - PI / 2);
111     return new OpenLayers.LonLat(lon_deg,lat_deg);
112   }
113
114   function lonlat2mercator( ll ) {
115       var lon = ll.lon * 20037508.34 / 180;
116       var lat = Math.log(Math.tan( (90 + ll.lat) * PI / 360)) / (PI / 180);
117       lat = lat * 20037508.34 / 180;
118       return new OpenLayers.LonLat(lon,lat);
119   }
120
121   function init(){
122
123     OpenLayers.Util.onImageLoadError = function() {
124       this.src = OpenLayers.Util.getImagesLocation() + "404.png";
125     }
126     map = new OpenLayers.Map( "map", 
127         {maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), maxZoomLevel:18, maxResolution:156543, units:'m', projection: "EPSG:41001"} );
128     layer = new OpenLayers.Layer.TMS( "Mapnik", "http://tile.openstreetmap.org/", {type:'png', getURL:getTileURL} );
129     map.addLayer(layer);
130     layer = new OpenLayers.Layer.TMS( "Osmarender", "http://dev.openstreetmap.org/~ojw/Tiles/tile.php/", {type:'png', getURL:getTileURL} );
131     map.addLayer(layer);
132
133     //Marker stuff
134
135     markers = new OpenLayers.Layer.Markers("markers");
136     map.addLayer(markers); 
137
138     <% if marker %>
139     marker = new OpenLayers.Marker(new OpenLayers.LonLat(mlon,mlat));
140     marker.events.register("click", "marker", markerOnClick );
141     markers.addMarker(marker);
142     <%end%>
143
144     var near_icon = OpenLayers.Marker.defaultIcon();
145     near_icon.url = OpenLayers.Util.getImagesLocation() + "marker-green.png";;
146     var i = nearest.length;
147     while( i-- ) {
148         var nearmarker = new OpenLayers.Marker( lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) ), near_icon.clone() );
149         markers.addMarker( nearmarker );
150         nearmarker.events.register("click", "nearmarker", makeMarkerFunction( i ) );
151     }
152
153     map.addControl(new OpenLayers.Control.LayerSwitcher());
154     map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
155
156     map.events.register("click", map, setHome);
157   }        
158
159   function getTileURL( bounds ) {
160     var res = this.map.getResolution();
161     var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
162     var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
163     var z = this.map.getZoom();
164     return this.url + z + "/" + x + "/" + y + "." + this.type; 
165   }
166
167   function makeMarkerFunction( i ) {
168     return function() { markerOnClick( i ); };
169   }
170
171   function markerOnClick( i ) {
172     var html, position;
173     if( typeof( i ) == 'number'  ) {
174         html = '<p>Nearby mapper: <a href="/user/'+nearest[i].display_name+'">'+nearest[i].display_name+'</a></p>';
175         html += '<p style="text-align:right">(<a href="#" onclick="return closePopup();">close</a>)</p>';
176         position = lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) );
177     } else {
178         html = '<p>Your location (<a href="#" onclick="return closePopup()">close</a>)</p>';
179         position = new OpenLayers.LonLat(mlon,mlat);
180     }
181     var box = document.getElementById( 'highlightinfo' );
182     box.innerHTML = html;
183     closePopup();
184     popup = new OpenLayers.Popup.AnchoredBubble( 'popup', position, new OpenLayers.Size( box.offsetWidth, box.offsetHeight ), html, OpenLayers.Marker.defaultIcon(), true );
185     map.addPopup( popup );
186   }
187   
188     function closePopup() {
189         if( popup ) {
190             map.removePopup( popup );
191             delete popup;
192         }
193         return false;
194     }
195
196     function setHome( e ) { 
197         closePopup();
198         if( ! document.getElementById( 'updatehome' ).checked )
199             return;
200         var lonlat = map.getLonLatFromViewPortPx(e.xy)
201
202         var lon_deg = (lonlat.lon / 20037508.34) * 180;
203         var lat_deg = (lonlat.lat / 20037508.34) * 180;
204         var PI = 3.14159265358979323846;
205         lat_deg = 180/PI * (2 * Math.atan(Math.exp(lat_deg * PI / 180)) - PI / 2);
206         var homerow = document.getElementById( 'homerow' );
207         var home_lat = document.getElementById( 'home_lat' );
208         var home_lon = document.getElementById( 'home_lon' );
209         homerow.className = '';
210         home_lat.value = lat_deg;
211         home_lon.value = lon_deg;
212         if( marker ) {
213             markers.removeMarker(marker);
214         }
215         marker = new OpenLayers.Marker(lonlat);
216         markers.addMarker(marker);
217     }
218 window.onload = init;
219 // -->
220 </script>
221
222 <h2>Privacy</h2>
223 <% if @user.data_public? %>
224   All your edits are public.
225 <% else %>
226   Currently your edits are anonymous and people can't find out where you are located. To show what you edited and allow people to contact you through the website, click the button below. This action cannot be reversed.
227   <br /><br />
228   <% form_tag :controller => 'user', :action => 'go_public' do %>
229   <%= submit_tag 'Make all my edits public, forever' %>
230   <% end %>
231 <% end %>