How to create a simple drop down box in OpenLayers?

Question

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?

Answer 1

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.

Answer 2

Check out this tutorial, it's beginner style but it has some good stuff in part 3 concerning what you are trying to do.

http://vasir.net/blog/openlayers/openlayers-tutorial-part-3-controls/

Otherwise, add something like this, you don't have to use the default layer switcher, with some css knowledge you can do it yourself.

<script type="text/javascript">
var activeLayer = null;
function changeLayer()
{
   var layer = map.getLayersByName(this.value)[0];
   if(activeLayer != null) {
     activeLayer.setVisibility(false);
   }
   layer.setVisibility(true);
   activeLayer = layer;
}
</script>

<select onchange="changeLayer()">
<option value="layer1">Layer 1</option>
<option value="layer2">Layer 2</option>
<option value="layer3">Layer 3</option>
</select>