Quick Base Map Buttons UX
This user extension will create shortcut base map buttons in the upper right-hand corner of the map. The buttons can be configured in the Mapbook and turn on/off multiple layers. This UX requires GeoMOOSE 2.4.
1. Add the following code to GeoMOOSE, see adding a user extension.
CustomUi = new OpenLayers.Class(GeoMOOSE.UX.Extension, {
afterMapbookLoad: function() {
//LK Adds baselayer buttons to the upper right corner of map
if(parseBoolean(CONFIGURATION.basemapButtons.show,true)) {
var baseMapButtons = document.createElement('div');
baseMapButtons.id = "set-layers";
for ( var i=0 ; i<CONFIGURATION.basemapButtons.buttons.length ; i++ ) {
var button = document.createElement('button');
button.innerHTML = CONFIGURATION.basemapButtons.buttons[i].title;
button.layer = CONFIGURATION.basemapButtons.buttons[i].layers;
button.onclick = this.setBaseLayers;
baseMapButtons.appendChild(button);
}
document.getElementById('header').parentNode.appendChild(baseMapButtons);
}
},
setBaseLayers: function() {
var baseLayers = CONFIGURATION.basemapButtons.baseLayers;
GeoMOOSE.turnLayerOff(baseLayers);
GeoMOOSE.turnLayerOn(this.layer);
},
CLASS_NAME: "CustomUi"
});
GeoMOOSE.UX.register("CustomUi");
var customUi = new CustomUi();
//Creates the configuration object
CONFIGURATION.basemapButtons = {'show':'false',
'baseLayers':' ',
'buttons': []
};
2. Update you skin CSS file with:
#set-layers {
z-index: 10005;
position: absolute;
right:270px;
top:120px;
}
3. Change the <configuration> tag in the Mapbook. The layers refer to map_source/layer.
<param name="basemapButtons.show">true</param> <!-- default is false -->
<param name="basemapButtons.baseLayers">basemap/all:oregon/images</param> <!-- include all layers that should be turned on/off -->
<param name="basemapButtons.buttons"><![CDATA[
{'title':'Basemap','layers':'basemap/all'},{'title':'Photo','layers':'oregon/images'}
]]></param> <!-- Set the button text and what layers to turn on when selected -->
