Add a map to the changeset list page
Add a map to the changeset list page, with a bounding box for each changeset and highighting when the mouse is placed over either a box on the map or a row of the table.
This commit is contained in:
parent
39f17cfbe1
commit
48929e8781
7 changed files with 116 additions and 10 deletions
|
@ -1,7 +1,7 @@
|
|||
<tr>
|
||||
<% cl = cycle('table0', 'table1') %>
|
||||
<% cl = cycle('table0', 'table1') %>
|
||||
<tr class="<%= cl %>" id="tr-changeset-<%= changeset.id%>" onMouseOver="highlightChangesetMap('changeset-<%= changeset.id %>');this.style.backgroundColor='#ffff55';" onMouseOut="unHighlightChangesetMap('changeset-<%= changeset.id %>');this.style.backgroundColor='';">
|
||||
|
||||
<td class="<%= cl %>">
|
||||
<td>
|
||||
<%=
|
||||
id_link = link_to(changeset.id,
|
||||
{:controller => 'browse', :action => 'changeset', :id => changeset.id},
|
||||
|
@ -10,14 +10,14 @@
|
|||
%>
|
||||
</td>
|
||||
|
||||
<td class="<%= cl %> date">
|
||||
<td class="date">
|
||||
<% if changeset.closed_at > DateTime.now %> <%= t'changeset.changeset.still_editing' %>
|
||||
<% else %><%= l changeset.closed_at, :format => :long %><% end %>
|
||||
</td>
|
||||
|
||||
|
||||
<%if showusername %>
|
||||
<td class="<%= cl %> user">
|
||||
<td class="user">
|
||||
<% if changeset.user.data_public? %>
|
||||
<%= link_to h(changeset.user.display_name), :controller => "changeset", :action => "list", :display_name => changeset.user.display_name %>
|
||||
<% else %>
|
||||
|
@ -26,7 +26,7 @@
|
|||
</td>
|
||||
<% end %>
|
||||
|
||||
<td class="<%= cl %> comment">
|
||||
<td class="comment">
|
||||
<% if changeset.tags['comment'].to_s != '' %>
|
||||
<%= linkify(h(changeset.tags['comment'])) %>
|
||||
<% else %>
|
||||
|
@ -34,7 +34,7 @@
|
|||
<% end %>
|
||||
</td>
|
||||
|
||||
<td class="<%= cl %> area">
|
||||
<td class="area">
|
||||
<% if changeset.min_lat.nil? %>
|
||||
<%= t'changeset.changeset.no_edits' %>
|
||||
<% else %>
|
||||
|
|
8
app/views/changeset/_changeset_map_add.html.erb
Normal file
8
app/views/changeset/_changeset_map_add.html.erb
Normal file
|
@ -0,0 +1,8 @@
|
|||
var minlon = <%= changeset_map_add.min_lon / GeoRecord::SCALE.to_f %>;
|
||||
var minlat = <%= changeset_map_add.min_lat / GeoRecord::SCALE.to_f %>;
|
||||
var maxlon = <%= changeset_map_add.max_lon / GeoRecord::SCALE.to_f %>;
|
||||
var maxlat = <%= changeset_map_add.max_lat / GeoRecord::SCALE.to_f %>;
|
||||
var bbox = new OpenLayers.Bounds(minlon, minlat, maxlon, maxlat);
|
||||
|
||||
bounds.extend(bbox);
|
||||
box = addBoxToMap(bbox, {name: "changeset-<%= changeset_map_add.id %>"}, true);
|
74
app/views/changeset/_map.html.erb
Normal file
74
app/views/changeset/_map.html.erb
Normal file
|
@ -0,0 +1,74 @@
|
|||
<%= javascript_include_tag '/openlayers/OpenLayers.js' %>
|
||||
<%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
|
||||
<%= javascript_include_tag 'map.js' %>
|
||||
<div id="browse_map_changeset">
|
||||
<div id="small_map">
|
||||
</div>
|
||||
<span id="loading"><%= t 'browse.map.loading' %></span>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
OpenLayers.Lang.setCode("<%= I18n.locale.to_s %>");
|
||||
|
||||
/*
|
||||
This function borrowed from the latest version of OpenLayers.Layer.Vector. OSM is using an older version.
|
||||
http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Layer/Vector.js
|
||||
*/
|
||||
function getFeaturesByAttribute(obj, attrName, attrValue) {
|
||||
var i,
|
||||
feature,
|
||||
len = obj.features.length,
|
||||
foundFeatures = [];
|
||||
for(i = 0; i < len; i++) {
|
||||
feature = obj.features[i];
|
||||
if(feature && feature.attributes) {
|
||||
if (feature.attributes[attrName] === attrValue) {
|
||||
foundFeatures.push(feature);
|
||||
}
|
||||
}
|
||||
}
|
||||
return foundFeatures;
|
||||
}
|
||||
function highlightChangesetMap(name) {
|
||||
getFeaturesByAttribute(vectors,'name',name)[0].style.strokeColor='#ffff55';
|
||||
vectors.redraw();
|
||||
}
|
||||
function unHighlightChangesetMap(name) {
|
||||
getFeaturesByAttribute(vectors,'name',name)[0].style.strokeColor='#ee9900';
|
||||
vectors.redraw();
|
||||
}
|
||||
function init() {
|
||||
var map = createMap("small_map", {
|
||||
controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoom(), new OpenLayers.Control.PanZoomBar() ]
|
||||
});
|
||||
|
||||
var bounds = new OpenLayers.Bounds();
|
||||
<%= render :partial => 'changeset_map_add', :collection => @edits unless @edits.nil? %>
|
||||
|
||||
vectors.events.on({
|
||||
'featureselected': function(feature) {
|
||||
document.getElementById('tr-' + feature.feature.attributes['name']).style.backgroundColor = '#ffff55';
|
||||
feature.feature.style.strokeColor='#ffff00';
|
||||
vectors.redraw();
|
||||
},
|
||||
'featureunselected': function(feature) {
|
||||
document.getElementById('tr-' + feature.feature.attributes['name']).style.backgroundColor = '';
|
||||
feature.feature.style.strokeColor='#ee9900';
|
||||
vectors.redraw();
|
||||
}
|
||||
});
|
||||
var selectControl = new OpenLayers.Control.SelectFeature(vectors,
|
||||
{multiple: false, hover:true});
|
||||
map.addControl(selectControl);
|
||||
selectControl.activate();
|
||||
|
||||
<!-- if bounds were passed, just use those -->
|
||||
<% if ! @bbox.nil? %>
|
||||
bounds = new OpenLayers.Bounds(<%= @bbox %>);
|
||||
<% end %>
|
||||
setMapExtent(bounds);
|
||||
|
||||
$("loading").innerHTML = "";
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
</script>
|
|
@ -1,6 +1,7 @@
|
|||
<h1><%= @heading %></h1>
|
||||
<p><%= @description %></p>
|
||||
|
||||
<%= render :partial => 'map' %>
|
||||
<%= render :partial => 'changeset_paging_nav' %>
|
||||
<%= render :partial => 'changesets', :locals => { :showusername => !params.has_key?(:display_name) } %>
|
||||
<%= render :partial => 'changeset_paging_nav' %>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue