Legend example

This example demonstrates the Legend.

    import React from 'react';
import { render } from 'react-dom';

import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerTile from 'ol/layer/tile';
import OlSourceTileWMS from 'ol/source/tilewms';
import olProj from 'ol/proj';

import { Legend } from '@terrestris/react-geo';


//
// ***************************** SETUP *****************************************
//

const background = new OlLayerTile({
  name: 'OSM-WMS',
  source: new OlSourceTileWMS({
    url: 'https://ows.terrestris.de/osm-gray/service',
    params: {'LAYERS': 'OSM-WMS', 'TILED': true},
    serverType: 'geoserver'
  })
});

const usa = new OlLayerTile({
  name: 'States (USA)',
  source: new OlSourceTileWMS({
    url: 'https://ahocevar.com/geoserver/wms',
    params: {'LAYERS': 'usa:states', 'TILED': true},
    serverType: 'geoserver'
  })
});

const places =  new OlLayerTile({
  name: 'Places',
  legendUrl: 'https://www.koeln.de/files/images/Karnevalstrikot_Spieler_270.jpg',
  source: new OlSourceTileWMS({
    url: 'https://ahocevar.com/geoserver/wms',
    params: {'LAYERS': 'ne:ne_10m_populated_places', 'TILED': true, 'TRANSPARENT': 'true'},
    serverType: 'geoserver'
  })
});

const map = new OlMap({
  layers: [
    background,
    usa,
    places
  ],
  view: new OlView({
    center: olProj.fromLonLat([-98.583333, 39.833333]),
    zoom: 4
  })
});

const extraParams = {
  HEIGHT: 10,
  WIDTH: 10
};
//
// ***************************** SETUP END *************************************
//

render(
  <div>
    <div id="map" style={{
      height: '200px'
    }} />

    <div className="example-block">
      <span>{`Layer ${background.get('name')}:`}</span>
      <Legend layer={background} />
    </div>

    <div className="example-block">
      <span>{`Layer ${usa.get('name')} with "extraParams":`}</span>
      <Legend layer={usa} extraParams={extraParams} />
    </div>

    <div className="example-block">
      <span>{`Layer ${places.get('name')} with custom "legendUrl":`}</span>
      <Legend layer={places} />
    </div>
  </div>,

  // Target
  document.getElementById('exampleContainer'),

  // Callback
  () => {
    map.setTarget('map');
  }
);