JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<link rel="stylesheet" href="http://acanimal.github.io/thebookofopenlayers3/styles/b0d5f35e.vendor.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/yeti/bootstrap.min.css">
<link rel="stylesheet" href="http://acanimal.github.io/thebookofopenlayers3/styles/3c6c5ed2.main.css">
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<script src="http://ol3js.org/en/master/build/ol.js"></script>
            <div id="map" class="map"></div>

<button onclick="map.getView().fitExtent(source.getExtent(),map.getSize());">click</button>

JavaScript

// Vector layer from a GeoJson file url
            var gjsonFile = new ol.layer.Vector({
                source: new ol.source.GeoJSON({
                    url: 'data/world_cities.json',
                    projection: 'EPSG:3857'
                }) 
            });

            // Vector layer from a geojson object
            var gjsonObject = new ol.layer.Vector({
                source: new ol.source.GeoJSON({
                    object: {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Polygon',
                            'coordinates': [[[3000000, 6000000], [4000000, 4000000], [5000000, 6000000]]]
                        }
                    }
                })
            });

            // Vector layer from a geojson string
            var gjsonString = new ol.layer.Vector({
                source: new ol.source.GeoJSON({
                    text: '{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-5000000,-1000000],[-4000000,1000000],[-3000000,-1000000]]]}}'
                })
            });

            // NOTE: This layer is made to force a cross domain error.
            // We will get an error similar to: 
            //   XMLHttpRequest cannot load http://ol3js.org/en/master/examples/data/topojson/world-110m.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.
            var topoJson = new ol.layer.Vector({
                source: new ol.source.TopoJSON({
                    projection: 'EPSG:3857',
                    url: 'http://ol3js.org/en/master/examples/data/topojson/world-110m.json'
                })
            });

            // Create the map
            var map = new ol.Map({
                target: 'map',  // The DOM element that will contains the map
                renderer: 'canvas', // Force the renderer to be used
                layers: [
      ...