Thanks Bart! That worked perfectly! In case anyone else is interested, below is a solution (code) for adding a horizontal (or vertical toolbar) that includes navigation history, query, pan, zoom, and zoom-to-extent controls:
----------------------- Here are the CSS classes needed: ----------------------- <style> .olControlPanel { margin: 0px; padding: 0px; background-color: #fff; border-right: solid 1px #999; border-bottom: solid 1px #999; } .olControlPanel div { display:block; width: 24px; height: 24px; float: left; /* remove this if you want a vertical toolbar */ margin: 2px; } .olControlPanel .olControlPanMapItemActive { background-image: url("../img/pan-on.png"); } .olControlPanel .olControlPanMapItemInactive { background-image: url("../img/pan-off.png"); } .olControlPanel .olControlZoomBoxItemInactive { background-image: url("../img/drag-rectangle-off.png"); } .olControlPanel .olControlZoomBoxItemActive { background-image: url("../img/drag-rectangle-on.png"); } .olControlPanel .olControlZoomToMaxExtentItemInactive { background-image: url("../img/zoom-world-mini.png"); } .olControlPanel .olControlFeatureInfoItemActive { background-image: url("../img/query_mode_on.png"); } .olControlPanel .olControlFeatureInfoItemInactive { background-image: url("../img/query_mode_off.png"); } .olControlPanel .olControlZoomOutBoxItemActive { background-image: url("../img/zoom_out_on.png"); } .olControlPanel .olControlZoomOutBoxItemInactive { background-image: url("../img/zoom_out_off.png"); } </style> ----------------------- Add controls: [] in your map options like this (thanks Bart!): ----------------------- var mapOptions = { controls: [] }; ----------------------- Add the controls to your map as follows: ----------------------- map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.Scale()); map.addControl(new OpenLayers.Control.ScaleLine()); var zoomBox = new OpenLayers.Control.ZoomBox({ title: "Zoom in box" }); var navHistory = new OpenLayers.Control.NavigationHistory(); navHistory.previous.title = "View history backward"; navHistory.next.title = "View history forward"; map.addControl(navHistory); // build the featureInfo control (aka query tool/button) featureInfo = new OpenLayers.Control({ displayClass: "olControlFeatureInfo", title: "Query map features" }); // register events to the featureInfo control featureInfo.events.register("activate", featureInfo, function() { toggleQueryMode(); }); featureInfo.events.register("deactivate", featureInfo, function() { toggleQueryMode(); }); // create the panel where the controls will be added var panel = new OpenLayers.Control.Panel({ defaultControl: zoomBox }); panel.addControls([ zoomBox, new OpenLayers.Control.ZoomBox({ title:"Zoom out box", displayClass: 'olControlZoomOutBox', out: true }), new OpenLayers.Control.DragPan({title:'Drag map', displayClass: 'olControlPanMap'}), featureInfo, new OpenLayers.Control.ZoomToMaxExtent({title: "zoom to map extent"}), navHistory.previous, navHistory.next ]); // add the panel to the map map.addControl(panel); ----------------------- If you want to add the featureInfo control you will need the following: ----------------------- // create a new event handler for single click featureInfo query queryEventHandler = new OpenLayers.Handler.Click({ 'map': map }, { 'click': function(e) { doGetFeatureInfo(e); } }); ----------------------- If you want to add the featureInfo control you will also need the following functions: ----------------------- // toggle the queryEventHandler active state function toggleQueryMode() { if(featureInfo.active) { queryEventHandler.activate(); } else { queryEventHandler.deactivate(); } } // construct a GetFeatureInfo request and sent it to a new window function doGetFeatureInfo(evt) { var layerId = layerSwitcher.activeLayer; if(evt && featureInfo.active) { var activeLayer = map.getLayer(layerId); if(activeLayer) { var url = activeLayer.getFullRequestString({ REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: activeLayer.map.getExtent().toBBOX(), X: evt.xy.x, Y: evt.xy.y, INFO_FORMAT: 'text/html', QUERY_LAYERS: activeLayer.params.LAYERS, WIDTH: activeLayer.map.size.w, HEIGHT: activeLayer.map.size.h }); var popupWindow = window.open( url, "GetFeatureInfo", "width=550,height=350,status=yes,scrollbars=yes,resizable=yes"); if(popupWindow) { popupWindow.focus(); } else { return true; } } else { alert("You must select a layer first!"); } } } ----------------------- You can see a demo of this here: http://dev.openlayers.org/sandbox/jvanulden/openlayers/examples/extended-layerswitcher.html Cheers! BTW - if you have any suggestions on how this solution can be improved please let me know. -- View this message in context: http://www.nabble.com/Query-Tool--tp21147764p21156929.html Sent from the OpenLayers Users mailing list archive at Nabble.com. _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users