JSFiddle - React, Tailwind, and code Playground

by StephenM

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.1.1/css/ol.css">
<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var mapQuestOSM = new ol.layer.Tile({
    source: new ol.source.MapQuest({ layer: 'osm' }),
    name: 'MapQuest'
});

var mapView = new ol.View({
    center: [0, 0],
    zoom: 1,
});

var sourceProjection = ol.proj.get('EPSG:4326');
var viewProjection = mapView.getProjection();

var polygon = new ol.geom.Polygon([[
    ol.proj.transform([-180, -85], sourceProjection, viewProjection),
    ol.proj.transform([180, -85], sourceProjection, viewProjection),
    ol.proj.transform([180, -60], sourceProjection, viewProjection),
    ol.proj.transform([-180, -60], sourceProjection, viewProjection)
]]);

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [ new ol.Feature({ geometry: polygon }) ]
    }),
});

var map = new ol.Map({
    target: 'map',
    layers: [ mapQuestOSM, vectorLayer ],
    view: mapView,
});