[GIS] OpenLayers map add combo in panel

geoexthtmljqueryopenlayers-2style

I just want to add combo box on OpenLayers map panel. I don't know how to add combo to the OpenLayers panel so currently I have set absolute location to combobox, like this http://jsfiddle.net/4zNH6/

<div id="map">
    <select id="combo">
    <option value="hyderabad">Hyderabad</option>
    <option value="pune">Pune</option>
    <option value="bangalore">Bangalore</option>
  </select>
</div>

#combo{
    position:absolute; 
    left:10px; 
    top:10px; 
    z-index:10000; 
    width:100px; 
    height:20px; 
    background-color:#FFFFFF;
}

Is this a right approach to place element on map??= or is it possible to add element in panel(OpenLayers.Control.Panel)?? and then add panel in map.

Best Answer

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:

Related Question