title: OpenLayers: Change layer source on click
body: <p>Seems quite simple, but I can't figure it out. The buttons labeled with "2005, "2010", and "2015" should change the displayed layer to that assigned to the corresponding variable. Right now, map displays just fine and the zoom button does its job, but the others don't do anything. The layers are different from each other, so there should be an observable change when the layer is switched out. Thanks for your comments and help. </p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;button id = "zoom" type="button"&gt;Zoom to Extent&lt;/button&gt;   
  &lt;button id = "2005" type="button"&gt;2005&lt;/button&gt; 
  &lt;button id = "2010" type="button"&gt;2010&lt;/button&gt; 
  &lt;button id = "2015" type="button"&gt;2015&lt;/button&gt;
  
  &lt;div style="width:100%; height:100%" id="map"&gt;&lt;/div&gt;
  &lt;script defer="defer" type="text/javascript"&gt;
      var map = new OpenLayers.Map('map');
      var GWP2005 = new OpenLayers.Layer.WMS(
          "Population Density",
          "http://sedac.ciesin.columbia.edu/geoserver/wms",
          {layers: 'gpw-v3:gpw-v3-population-density-future-estimates_2005'}
      );
      var GWP2010 = new OpenLayers.Layer.WMS(
          "Population Density",
          "http://sedac.ciesin.columbia.edu/geoserver/wms",
          {layers: 'gpw-v3:gpw-v3-population-density-future-estimates_2010'}
      );
      var GWP2015 = new OpenLayers.Layer.WMS(
          "Population Density",
          "http://sedac.ciesin.columbia.edu/geoserver/wms",
          {layers: 'gpw-v3:gpw-v3-population-density-future-estimates_2015'}
      );
      map.addLayers([GWP2005]);
      map.zoomToMaxExtent();
  
      var but_zoom = document.getElementById("zoom");
      but_zoom.addEventListener("click", function(){map.zoomToMaxExtent()}, false);
      var but_2005 = document.getElementById("2000");
      but_2005.addEventListener("click", function(){map.addLayers([GWP2005]); map.zoomToMaxExtent;}, false);
      var but_2010 = document.getElementById("2010");
      but_2010.addEventListener("click", function(){map.addLayers([GWP2010]); map.zoomToMaxExtent;}, false);
      var but_2015 = document.getElementById("2015");
      but_2015.addEventListener("click", function(){map.addLayers([GWP2015]); map.zoomToMaxExtent;}, false);
  &lt;/script&gt;
  </code></pre>