[GIS] How to create a simple drop down box in OpenLayers

openlayers-2openstreetmapwidget

I am trying to place a simple drop down box above the OpenStreetMap map. Can some one guide me how to achieve this… I know we need to make use of OpenLayers…

I tried to create a button with below code: 

var button1= new OpenLayers.Control.Button({
         title: "First Button",
         text: "Button1",
         trigger:addComp,
      });
panel.addControls([button1]);

It worked fine, but not how can I add a drop down box with values of any simple array?

Best Answer

I'm sure someone will correct me if I'm wrong but I'm not sure you can do this with the OpenLayers api. You can only have three different types of controls with OpenLayers:

  • OpenLayers.Control.TYPE_BUTTON
  • OpenLayers.Control.TYPE_TOGGLE
  • OpenLayers.Control.TYPE_TOOL

(see http://dev.openlayers.org/docs/files/OpenLayers/Control-js.html) and none of these really fit with a dropdown box control.

What you can do instead is just create a standard JavaScript dropdown box. You can place this on top of the OpenLayers control and modify the map as the user selects different values.

Related Question