In this example layers of a WMS can be added to a map.
The capabilities of this WMS are fetched and parsed to OL layer instances using the CapabilitiesUtil
.
An AddWmsPanel
shows a list of the parsed layers and each checked layer (or the entire set) can be added to the map.
import React from 'react';
import { render } from 'react-dom';
import { message } from 'antd';
import { AddWmsPanel, SimpleButton, CapabilitiesUtil } from '@terrestris/react-geo';
import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerTile from 'ol/layer/tile';
import OlSourceOsm from 'ol/source/osm';
import OlProjection from 'ol/proj';
//
// ***************************** SETUP *****************************************
//
const defaultView = new OlView({
center: OlProjection.fromLonLat([7.40570, 53.81566]),
zoom: 4
});
const map = new OlMap({
layers: [
new OlLayerTile({
name: 'OSM',
source: new OlSourceOsm()
})
],
view: defaultView
});
//
// ***************************** SETUP END *************************************
//
// Please note: CORS headers must be set on server providing capabilities document. Otherwise proxy needed.
const WMS_CAPABILITIES_URL = 'https://ows.terrestris.de/osm/service?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities';
/**
* fetch capabilities document onClick and re-render on success
*/
const onClick = () => {
CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL)
.then(CapabilitiesUtil.getLayersFromWmsCapabilties)
.then((layers) => {
doRender(layers);
})
.catch(() => message.error('Could not parse capabilities document.'));
};
/**
* wrapper function for render
*/
const doRender = (wmsLayers) => {
render(
<div>
<div id="map" />
<div className="example-block">
<SimpleButton
onClick={onClick}
>
Fetch capabilities of OWS terrestris
</SimpleButton>
<AddWmsPanel
key="1"
map={map}
wmsLayers={wmsLayers}
draggable={true}
t={t => t}
width={500}
height={400}
x={0}
y={100}
/>
</div>
</div>,
// Target element
document.getElementById('exampleContainer'),
// Callback
() => {
map.setTarget('map');
}
);
};
doRender([]);