[OpenLayers-Users] Query Tool?

[jvanulde]

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.