I am using OpenLayers and GeoExt with Geoext.ux layertreebuilder to manage GML vector layers. The GeoExt and GeoExt ux are used strictly for grouping and managing the layers within the layertreepanel. Within the layer tree I need to be able to click a layer title and:
- zoom to the layer extents
- collapse the layer tree panel
- expand the overview map
- highlight the layer
- display an OpenLayers Feature popup
I have been able to make items 1-3 work, but can't for the life of me figure out 4 and 5.
Any help at all will be GREATLY appreciated! Constructive criticism is well received also!
I am very new to all of this so please take the following code example with a big block of salt!
layers.push(new OpenLayers.Layer.Bing({ name:"Bing Road Map", key: apiKey, type: "Road", isBaseLayer: true, isDefault:true, 'displayInLayerSwitcher':false, buffer:0 }));
map = new OpenLayers.Map({
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 25,
});
map.addControl(new OpenLayers.Control.PanZoomBar());
var ovoptions = {minRatio: 8, maxRatio: 32};
var navmap = new OpenLayers.Control.OverviewMap(ovoptions);
map.addControl(navmap);
mapPanel = new GeoExt.MapPanel({
renderTo: "map",
width:595,
height:430,
map: map
});
var fpControl = new OpenLayers.Control.FeaturePopups();
var format = new OpenLayers.Format.GML.v3(); var layerarray = ["layer1","layer2","layer3"];
for (i = 0; i < layerarray.length; ++i) {
var layers = layerarray[i];
layerarray[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Polygon(format.featurelayer));
layers.push((layers) = new OpenLayers.Layer.Vector((layers), {styleMap:(stylemap_businesses), visibility: true, group: "Group Name", strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "openlayers/"+layers+".xml",
featureType: 'geo_rest',
format: new OpenLayers.Format.GML.v3({
extractStyles: true,
extractAttributes: true,
extractGeometry:true,
getExtent:true,
getZoomForExtent: true,
getBounds:true,
})
})}));
fpControl.addLayer((layers), {
templates: {
hover:"<div class='hovPop'><div class='bldgname''>${.mtbname}</div><h2>${.name}</h2><div class='popclick'>click map for details</div></div>",
hoverList:"<div class='hovPop'>${html}<br><div class='popclick'>click map for details</div></div>",
hoverItem: "<div class='hovPopItem'><div class='bldgname''>${.mtbname}</div><ul><li>${.name} - ${.floor} floor</li></ul></div>",
single: "<div class='selPop'><div><img src='openlayers/${.img1}_logo.png' /><br></div><h2>${.name}</h2>${.desc}<br>${.addr}<br>${.city} ${.state}<br>${.zip}<br>${.phone}<br><br><a href=\"${.website}\" target='_blank'>visit our website</a></div>",
item: "<div class='selPopItem'><li><a href=\"#\" ${showPopup()}>${.name}</a><br></li></div>"
}});
};
(rest).addFeatures(layersarray);
mapPanel.map.addLayers(all_layers);
mapPanel.items.get(0);
map.addControl(fpControl);
var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());
var treeConfig = [{ nodeType: "gx_baselayercontainer" }, { nodeType: "gx_overlaylayercontainer", expanded: false, loader: { baseAttrs: { uiProvider: "layernodeui" } } }];
tree = new GeoExt.ux.tree.LayerTreeBuilder({
header:true,
title:"Layer Tree Header Title",
titleCollapse:true,
baseLayersText:"Base Maps",
otherLayersText: "Non-grouped layers title",
renderTo:'cat-tabs',
width: 225,
height:425,
useArrows: false,
collapsible: true,
collapsed:true,
collapseFirst:true,
collapseMode: "mini",
singleExpand:true,
hlColor:'000000',
dir: "desc",
animate: true,
stateful: true,
autoScroll: true,
lines: false,
rootVisible: false,
vectorLegendNodes: false,
clickableTitle: true,
selectOnClick: true,
trackMouseOver:true,
titleClick:true,
mouseOver:'highlight',
listeners:{
click:
function (node,e)
{
map.zoomToExtent(node.layer.getDataExtent());
tree.collapse(100);
navmap.maximizeControl(150);
fpControl.addLayers(map.getLayersByName(node.text));
}}})