CODEWITHSUNDEEP
javascripthtmlmapsopenlayers
am4pper
am4pper

Reputation: 13

OpenLayers: Change layer source on click

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.

Here's the code:

<button id = "zoom" type="button">Zoom to Extent</button>   
<button id = "2005" type="button">2005</button> 
<button id = "2010" type="button">2010</button> 
<button id = "2015" type="button">2015</button>

<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
    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);
</script>

Upvotes: 1

Views: 2823

Answers (1)

bentrm
bentrm

Reputation: 1078

You can add all layers to the map at once at init and give them the property "isBaseLayer: true". This makes them mutually exclusive and you can switch between them by calling setBaseLayer on the map.

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' },
        { isBaseLayer: true }
    );

map.addLayers([
    GWP2005,
    // other layers
]);

var but_2005 = document.getElementById("layer-2005");
but_2005.addEventListener("click", function(){ 
     map.setBaseLayer(GWP2005); 
     map.zoomToMaxExtent(); }, 
false);

Upvotes: 3

Related Questions