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",

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

  • you have a new too many , is that your exact code ?
    – Glenn Plas
    Oct 17, 2012 at 12:52
  • Apologies i edited it,....I meant to say that i used the above line of code to create button... Is there something similar to create a drop down list
    – DomincJune
    Oct 17, 2012 at 12:57

2 Answers 2


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.

  • 1
    +1 for "just create a standard JavaScript dropdown box."
    – CaptDragon
    Oct 17, 2012 at 13:09
  • are you sure.. because i am thinking there should be some way to do this...just positive
    – DomincJune
    Oct 17, 2012 at 13:12
  • I checked the samples and the docs, I don't really see a dropdown recipe.
    – Glenn Plas
    Oct 17, 2012 at 14:07
  • Thank you Glenn.... Cant i make use of OpenLayers.Control.LayerSwitcher and customize it.... just a thought...
    – DomincJune
    Oct 17, 2012 at 14:16
  • You just want the dropdown to contain a list of available layers , nothing more ? Then I think you can do this. Let me test a few things here.
    – Glenn Plas
    Oct 17, 2012 at 19:54

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


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 = layer;

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

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.