OpenLayers Toggle Layer Visibility

by licano

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
    <form>
        <input type="button" onclick="hideLayer(vlayer)" value="Hide Layer">
        <input type="button" onclick="toggleLayer(vlayer)" value="Toggle VectorLayer Visibility">
            <input type="button" onclick="toggleLayer(road)" value="Toggle BaseLayer Visibility">
    </form>
    <div id="map"></div>
</body>

CSS

#map {
    width: 600px;
    height: 600px;
}

JavaScript

var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var lon = -71.147;
var lat = 42.472;
var map, vlayer,road;

function init() {
    map = new ol.Map('map', {
        controls: [new ol.Control.PanZoom()]
    });
    road = new ol.Layer.Bing({
        key: apiKey,
        type: "Road"
    });

    vlayer = new ol.Layer.Vector("Editable", {

    });
    map.addLayers([road, vlayer]);



    loadPointsfromGeojson();


}

function hideLayer(layerName) {
    layerName.setVisibility(false);
}

function toggleLayer(layerName) {
    if (layerName.getVisibility() == true) {
        layerName.setVisibility(false);
    } else {
        layerName.setVisibility(true);
    }
}


function loadPointsfromGeojson() {
    var featurecollection = {
        "type": "FeatureCollection",
            "crs": {
            "type": "name",
                "properties": {
                "name": "urn:ogc:def:crs:EPSG::3857"
            }
        },

            "features": [{
            "type": "Feature",
                "properties": {
                "name": "stoneham"
            },
                "geometry": {
                "type": "Polygon",
                    "coordinates": [
                    [
                        [-7920271.1061104629, 5233681.5452001588],
                        [-7918608.6007452607, 5229630.382701044],
                        [-7915818.6492128521, 5230566.7362975413],
                        [-7915035.1696729297, 5232840.7378890244],
                        [-7916449.2546962043, 5234082.8395986576],
                        [-7918895.2396013308, 5234273.9321693694],
                        [-7919888.9209690373, 5234254.8229123009],
                        [-7920271.1061104629, 5233681.5452001588]
                    ]
                ]
            }
        }, {
            "type": "Feature",
                "properties": {
                "name": "melrose"
            },
                "geometry": {
                "type":...