Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to place a simple drop down box above the open street maps. Can some one guide me how to achieve this... I know we need to make use of open layers.... 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 sure of how to add a drop down box with values of any simple array..... Please help me I am stuck for 2 days... Thank You

share|improve this question
you have a new too many , is that your exact code ? – Glenn Plas Oct 17 '12 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 '12 at 12:57

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 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.

share|improve this answer
+1 for "just create a standard JavaScript dropdown box." – CaptDragon Oct 17 '12 at 13:09
are you sure.. because i am thinking there should be some way to do this...just positive – DomincJune Oct 17 '12 at 13:12
I checked the samples and the docs, I don't really see a dropdown recipe. – Glenn Plas Oct 17 '12 at 14:07
Thank you Glenn.... Cant i make use of OpenLayers.Control.LayerSwitcher and customize it.... just a thought... – DomincJune Oct 17 '12 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 '12 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>
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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