[OpenLayers-Users] Query Tool?
jvanulde
jvanulde at NRCAN.GC.CA
Wed Dec 24 22:20:48 EST 2008
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--tp21147764p21156930.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
More information about the Users
mailing list