I think you'd need to use GeoExt with Openlayers, check this out:
http://jsfiddle.net/ACrcn/1/
Code:
var data = new GeoExt.data.FeatureStore({
fields: ["STATE_NAME", "STATE_ABBR"],
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.Script({
callbackKey: "format_options",
callbackPrefix: "callback:",
url: "http://demo.opengeo.org/geoserver/wfs",
params: {
service: "WFS",
version: "1.1.0",
request: "GetFeature",
typeName: "topp:states",
srsName: "EPSG:3857",
outputFormat: "json"
}
})
}),
autoLoad: true
});
var combo = new Ext.form.ComboBox({
store: data,
displayField: "STATE_NAME",
valueField: "feature",
emptyText: "Select a state",
mode: "local",
triggerAction: "all",
renderTo: document.body
});
new Ext.Button({
text: "Show on map",
handler: function() {
result.removeAllFeatures();
result.addFeatures([combo.getValue()]);
result.map.zoomToExtent(result.getDataExtent());
},
renderTo: document.body
});
var result = new OpenLayers.Layer.Vector();
new GeoExt.MapPanel({
layers: [new OpenLayers.Layer.OSM(), result],
center: [0,0],
width: 256,
height: 256,
renderTo: document.body
});
See more at:
If you just want to display a static legend you can just put your request into an img-tag:
<div id="legend">
<img src="http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=cite:censustractsum&STYLE=basicstyle9">
</div>
see http://jsfiddle.net/expedio/od5eLpb9/
Best Answer
Just put the <div id="legende">...</div> in <div id="map"> like below:
Load a QGIS-Server-WMS-Layer to OpenLayer3 <div id="map"><div id="legende"> <h2>Legend:</h2> <div class="udiv_legende" id="legende_1"> <img src="http://qgiscloud.com/expedio/wfs_t/wms?Service=WMS&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=12&HEIGHT=12&LAYER=buffer"> <br> <br> </div> </div></div>and add the styling as:
#legende{ position: absolute; z-index: 100000; }Now you further set the size and position of lengends in CSS only. All the Best