JSFiddle - React, Tailwind, and code Playground
by Thomas B.
HTML
<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
Load a QGIS-Server-WMS-Layer to OpenLayer3
<div id="map"></div>
CSS
#map {
height: 256px;
width: 512px;
border:1px solid black;
}
JavaScript
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://qgiscloud.com/expedio/wfs_t/wms?',
ratio: 1,
params: {
'LAYERS': 'buffer, buffer_new',
'TRANSPARENT': 'true'
}
})
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: [-8238683.374712203, 4998174.938711717],
zoom: 15
})
});