JSFiddle - React, Tailwind, and code Playground

by licano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css">
<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 = "Atu1T4WrEbznvJNJnZRx8e63tbvwa_B28VeVdJtB-SJbPz-va53P_4cWvu3GRSiv";
var lon = -71.147;
var lat = 42.472;
var map, vlayer, road;

function init() {
    map = new ol.Map({
    	target:'map',
      
    });
    road = new ol.layer.Tile({
    	source:new ol.source.BingMaps({
      	key:apiKey,
        imagerySet:'Aerial'
        })
   });

    vlayer = new ol.layer.Vector( {

    });
    console.log(vlayer);
    map.addLayer(road);//, vlayer]);
    map.addLayer(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"
...