AddWmsPanel example

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([]);