JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.10.1/css/ol.css">
<script src="http://openlayers.org/en/v3.10.1/build/ol.js"></script>
<script src="http://spin.js.org/spin.js"></script>
<body onload="init()">
     <h2>OpenLayers GeoServer Access-Control-Allow-Origin</h2>

    <div>One url has CORS enabled the other one not.</div><br />
    <div id="ladedingens"></div>
    <div>
        <form class="form">
            <label for="year" class="control-label input-group"><b>Choose GeoSERVER URL</b></label>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default">
                    <input name="url" id="url_1" value="1" type="radio" checked="checked">URL1(CORS)</label>
                <label class="btn btn-default">
                    <input name="url" id="url_2" value="0" type="radio">URL2(no CORS)</label>
            </div>
        </form>
    </div>
    <div id="error"><code>XMLHttpRequest cannot load http://suite.opengeo.org/geoserver/usa/ows?service=wfs&version=2.0.0&request=GetFeature&typeNames=usa:states&maxFeatures&outputFormat=application/json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.</code>

    </div>
    <div id="map" class="map"></div>
</body>

CSS

html, body {
     height: 100%;
     width: 100%;
 }
 #map {
     height: 80%;
     width: 100%;
 }
 #error {
     color:red;
     border:1px solid red;
     margin:5px;
     padding:5px;
     overflow:hidden;
 }
 #ladedingens {
     width:10%;
     margin:auto;
     top:40%;
     z-index:10000;
 }

JavaScript

var countrieslayer, map, createPolygonStyleFunction, spinner, target;

  function init() {

      $("#error").hide();
      loading_indicator();

      createPolygonStyleFunction = function () {
          return function (feature, resolution) {
              var style = new ol.style.Style({
                  stroke: new ol.style.Stroke({
                      color: 'blue',
                      width: 1
                  }),
                  fill: new ol.style.Fill({
                      color: 'rgba(0, 0, 255, 0.1)'
                  })
              });
              return [style];
          };
      };

      vectorSource = new ol.source.Vector({
          // No 'Access-Control-Allow-Origin' header is present on the requested resource.

          // url: 'http://suite.opengeo.org/geoserver/usa/ows?service=wfs&version=2.0.0&request=GetFeature&typeNames=usa:states&maxFeatures&outputFormat=application/json',



          // this URL is working:
          url: 'http://demo.opengeo.org/geoserver/topp/ows?service=wfs&version=2.0.0&request=GetFeature&typeNames=topp:states&maxFeatures&outputFormat=application/json',

          format: new ol.format.GeoJSON()
      });
      countrieslayer = new ol.layer.Vector({
          source: vectorSource,
          style: createPolygonStyleFunction()
      });
      map = new ol.Map({
          target: 'map',
          layers: [
          new ol.layer.Tile({
              source: new ol.source.MapQuest({
                  layer: 'sat'
              })
          })],
          view: new ol.View({
              center: ol.proj.fromLonLat([-95.8506355, 37.163851]),
              zoom: 4
          })
      });

      var listenerKey = vectorSource.on('change', function (e) {
          if (vectorSource.getState() == 'ready') {
              // hide loading icon
              // and unregister the "change" listener 
              ol.Observable.unByKey(listenerKey);
              vectorSource.unByKey(listenerKey);
              //...