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.

1 Answer 1

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:

5
  • 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, 2014 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, 2014 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, 2014 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, 2014 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, 2014 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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