Introduce a new layer switcher
The new layer switcher behaves the same as the standard one but has less cruft and more attractive styling.
This commit is contained in:
Tom MacWright
Tom Hughes
parent
afeee2923f
commit
8f4ed911e0
8 changed files with 233 additions and 9 deletions
BIN
app/assets/images/carat.png
Normal file
BIN
app/assets/images/carat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 B |
|
|
@ -11,7 +11,7 @@ function createMap(divName, options) {
|
|||
controls: options.controls || [
|
||||
new OpenLayers.Control.ArgParser(),
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.LayerSwitcher(),
|
||||
new SimpleLayerSwitcher(),
|
||||
new OpenLayers.Control.Navigation(),
|
||||
new OpenLayers.Control.PanZoom(),
|
||||
new OpenLayers.Control.PanZoomBar(),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
//= require OpenLayers
|
||||
//= require OpenStreetMap
|
||||
//= require simplelayerswitcher
|
||||
|
||||
OpenLayers.Util.imageURLs = {
|
||||
"404.png": "<%= asset_path 'img/404.png' %>",
|
||||
|
|
|
|||
175
app/assets/javascripts/simplelayerswitcher.js
Normal file
175
app/assets/javascripts/simplelayerswitcher.js
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
var SimpleLayerSwitcher = OpenLayers.Class(OpenLayers.Control, {
|
||||
layerStates: null,
|
||||
layersDiv: null,
|
||||
ascending: true,
|
||||
|
||||
initialize: function(options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, arguments);
|
||||
this.layerStates = [];
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
OpenLayers.Event.stopObservingElement(this.div);
|
||||
|
||||
//clear out layers info and unregister their events
|
||||
this.map.events.un({
|
||||
"addlayer": this.redraw,
|
||||
"changelayer": this.redraw,
|
||||
"removelayer": this.redraw,
|
||||
"changebaselayer": this.redraw,
|
||||
scope: this
|
||||
});
|
||||
OpenLayers.Control.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
setMap: function(map) {
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
|
||||
this.map.events.on({
|
||||
"addlayer": this.redraw,
|
||||
"changelayer": this.redraw,
|
||||
"removelayer": this.redraw,
|
||||
"changebaselayer": this.redraw,
|
||||
scope: this
|
||||
});
|
||||
},
|
||||
|
||||
draw: function() {
|
||||
OpenLayers.Control.prototype.draw.apply(this);
|
||||
this.loadContents();
|
||||
this.redraw();
|
||||
return this.div;
|
||||
},
|
||||
|
||||
checkRedraw: function() {
|
||||
var redraw = false;
|
||||
if ( !this.layerStates.length ||
|
||||
(this.map.layers.length != this.layerStates.length) ) {
|
||||
redraw = true;
|
||||
} else {
|
||||
for (var i=0, len=this.layerStates.length; i<len; i++) {
|
||||
var layerState = this.layerStates[i];
|
||||
var layer = this.map.layers[i];
|
||||
if ( (layerState.name != layer.name) ||
|
||||
(layerState.inRange != layer.inRange) ||
|
||||
(layerState.id != layer.id) ||
|
||||
(layerState.visibility != layer.visibility) ) {
|
||||
redraw = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return redraw;
|
||||
},
|
||||
|
||||
redraw: function() {
|
||||
if (!this.checkRedraw()) {
|
||||
return this.div;
|
||||
}
|
||||
|
||||
this.div.innerHTML = '';
|
||||
var len = this.map.layers.length;
|
||||
this.layerStates = [];
|
||||
for (var i = 0; i < this.map.layers.length; i++) {
|
||||
var layer = this.map.layers[i];
|
||||
this.layerStates[i] = {
|
||||
'name': layer.name,
|
||||
'visibility': layer.visibility,
|
||||
'inRange': layer.inRange,
|
||||
'id': layer.id
|
||||
};
|
||||
}
|
||||
|
||||
var layers = this.map.layers.slice();
|
||||
if (!this.ascending) { layers.reverse(); }
|
||||
for (var i = 0; i < layers.length; i++) {
|
||||
var layer = layers[i];
|
||||
var baseLayer = layer.isBaseLayer;
|
||||
|
||||
if (layer.displayInLayerSwitcher && baseLayer) {
|
||||
var on = (baseLayer) ? (layer == this.map.baseLayer)
|
||||
: layer.getVisibility();
|
||||
var layerElem = document.createElement('a');
|
||||
layerElem.id = this.id + '_input_' + layer.name;
|
||||
layerElem.innerHTML = layer.name;
|
||||
layerElem.href = '#';
|
||||
|
||||
OpenLayers.Element.addClass(layerElem, 'basey');
|
||||
OpenLayers.Element.addClass(layerElem,
|
||||
'basey-' + (on ? 'on' : 'off'));
|
||||
|
||||
if (!baseLayer && !layer.inRange) {
|
||||
layerElem.disabled = true;
|
||||
}
|
||||
var context = {
|
||||
'layer': layer
|
||||
};
|
||||
OpenLayers.Event.observe(layerElem, 'mouseup',
|
||||
OpenLayers.Function.bindAsEventListener(
|
||||
this.onInputClick,
|
||||
context)
|
||||
);
|
||||
|
||||
this.div.appendChild(layerElem);
|
||||
}
|
||||
}
|
||||
|
||||
return this.div;
|
||||
},
|
||||
|
||||
onInputClick: function(e) {
|
||||
if (this.layer.isBaseLayer) {
|
||||
this.layer.map.setBaseLayer(this.layer);
|
||||
} else {
|
||||
this.layer.setVisibility(!this.layer.getVisibility());
|
||||
}
|
||||
OpenLayers.Event.stop(e);
|
||||
},
|
||||
|
||||
updateMap: function() {
|
||||
|
||||
// set the newly selected base layer
|
||||
for(var i=0, len=this.baseLayers.length; i<len; i++) {
|
||||
var layerEntry = this.baseLayers[i];
|
||||
if (layerEntry.inputElem.checked) {
|
||||
this.map.setBaseLayer(layerEntry.layer, false);
|
||||
}
|
||||
}
|
||||
|
||||
// set the correct visibilities for the overlays
|
||||
for(var i=0, len=this.dataLayers.length; i<len; i++) {
|
||||
var layerEntry = this.dataLayers[i];
|
||||
layerEntry.layer.setVisibility(layerEntry.inputElem.checked);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
loadContents: function() {
|
||||
//configure main div
|
||||
OpenLayers.Event.observe(this.div, 'mouseup',
|
||||
OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
|
||||
OpenLayers.Event.observe(this.div, 'click',
|
||||
this.ignoreEvent);
|
||||
OpenLayers.Event.observe(this.div, 'mousedown',
|
||||
OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
|
||||
OpenLayers.Event.observe(this.div, 'dblclick', this.ignoreEvent);
|
||||
},
|
||||
|
||||
ignoreEvent: function(evt) {
|
||||
OpenLayers.Event.stop(evt);
|
||||
},
|
||||
|
||||
mouseDown: function(evt) {
|
||||
this.isMouseDown = true;
|
||||
this.ignoreEvent(evt);
|
||||
},
|
||||
|
||||
mouseUp: function(evt) {
|
||||
if (this.isMouseDown) {
|
||||
this.isMouseDown = false;
|
||||
this.ignoreEvent(evt);
|
||||
}
|
||||
},
|
||||
|
||||
CLASS_NAME: "SimpleLayerSwitcher"
|
||||
});
|
||||
|
|
@ -1113,3 +1113,50 @@ abbr.geo {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Rules for the layer switcher */
|
||||
|
||||
.SimpleLayerSwitcher {
|
||||
position:absolute;
|
||||
top:10px;
|
||||
right:10px;
|
||||
background:#fff;
|
||||
border:1px solid #ccc;
|
||||
min-width:150px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a.basey {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
color:#838383;
|
||||
padding:2px 5px 2px 20px;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a.basey-on {
|
||||
color:#000;
|
||||
background-color: #fff;
|
||||
background-image: url('carat.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 7px 9px;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a.basey-off {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher:hover a {
|
||||
border-top:1px solid #eee;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher a:hover {
|
||||
background-color:#f5f5f5;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher:hover a:first-child {
|
||||
border-top:none;
|
||||
}
|
||||
|
||||
.SimpleLayerSwitcher:hover a.basey-off {
|
||||
display:block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@
|
|||
<% Editors::ALL_EDITORS.each do |editor| %>
|
||||
<li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")), {:controller => 'site', :action => 'edit', :editor => editor}, {:id => editor + 'anchor', :class => "geolink llz object"} %></li>
|
||||
<% end %>
|
||||
<% unless STATUS == :api_offline or STATUS == :database_offline %>
|
||||
<li><%= link_to_function(t('browse.start_rjs.data_layer_name'), 'toggleData()') %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -135,8 +135,10 @@ end
|
|||
map = createMap("map");
|
||||
|
||||
<% unless STATUS == :api_offline or STATUS == :database_offline %>
|
||||
map.dataLayer = new OpenLayers.Layer("<%= I18n.t 'browse.start_rjs.data_layer_name' %>", { "visibility": false });
|
||||
map.dataLayer.events.register("visibilitychanged", map.dataLayer, toggleData);
|
||||
map.dataLayer = new OpenLayers.Layer("<%= I18n.t 'browse.start_rjs.data_layer_name' %>", {
|
||||
visibility: false,
|
||||
displayInLayerSwitcher: false
|
||||
});
|
||||
map.addLayer(map.dataLayer);
|
||||
<% end %>
|
||||
|
||||
|
|
@ -187,11 +189,7 @@ end
|
|||
}
|
||||
|
||||
function toggleData() {
|
||||
if (map.dataLayer.visibility) {
|
||||
$.ajax({ url: "<%= url_for :controller => :browse, :action => :start %>" });
|
||||
} else if (map.dataLayer.active) {
|
||||
closeSidebar();
|
||||
}
|
||||
$.ajax({ url: "<%= url_for :controller => :browse, :action => :start %>" });
|
||||
}
|
||||
|
||||
function setPosition(lat, lon, zoom, min_lon, min_lat, max_lon, max_lat) {
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ en:
|
|||
view_data: "View data for current map view"
|
||||
manually_select: "Manually select a different area"
|
||||
start_rjs:
|
||||
data_layer_name: "Data"
|
||||
data_layer_name: "Browse Map Data"
|
||||
data_frame_title: "Data"
|
||||
zoom_or_select: "Zoom in or select an area of the map to view"
|
||||
drag_a_box: "Drag a box on the map to select an area"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue