0

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.

Any suggestions would be appreciated.

1

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:

  • Thanks, Its great help. I will try to impliment Geoext. But I may be unable to explain my question sorry for this. Actully I want to add combo overlay on map like this jsfiddle.net/4zNH6. In example i have set absolute position but is it possible to do same thing using openlayer control?? – Amit Jan 29 '14 at 13:17
  • @Amit you're welcome! but I don't understand, your jsfiddle example shows how to do it, so it works as you want, doesn't it? – Gery Jan 29 '14 at 14:20
  • @Amit just to add I don't think there is a "combo" control in OL, something like "OpenLayers.Control.Combo" class if that's what you mean. Here you have the controls: http://docs.openlayers.org/library/controls.html – Gery Jan 29 '14 at 14:48
  • Ohh.. If there is no OpenLayers.Control.Combo then the only way to add combo on map is by applying style , am i right?? If you have some usefull links regarding overlay html element on map it will great help. Thanks a lot Gery . – Amit Jan 30 '14 at 6:58
  • @Amit you're welcome! yeah you're right, you'd need to play with html and Javascript/CSS to style in the way you want. I think GeoExt can be a better solution, check the examples, and with GeoExt you will connect things easily between the client (OpenLayers), the server-side (GeoServer or MapServer) and the backend (PostGis/PostgreSQL) of your application. – Gery Jan 30 '14 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.