DigitizeButton example

This demonstrates the use of DigitizeButton with different interactions.

    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 OlSourceOsm from 'ol/source/osm';
import olProj from 'ol/proj';

import {
  DigitizeButton,
  ToggleGroup
} from '@terrestris/react-geo';

//
// ***************************** SETUP *****************************************
//
const map = new OlMap({
  layers: [
    new OlLayerTile({
      name: 'OSM',
      source: new OlSourceOsm()
    })
  ],
  view: new OlView({
    center: olProj.fromLonLat([37.40570, 8.81566]),
    zoom: 4
  })
});

//
// ***************************** SETUP END *************************************
//

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

    <div className="example-block">
      <span>Select a digitize type:</span>
      <ToggleGroup
        orientation="horizontal">

        <DigitizeButton
          name="drawPoint"
          map={map}
          drawType="Point"
        >
        Draw point
        </DigitizeButton>

        <DigitizeButton
          name="drawLine"
          map={map}
          drawType="LineString"
        >
        Draw line
        </DigitizeButton>

        <DigitizeButton
          name="drawPolygon"
          map={map}
          drawType="Polygon"
        >
        Draw polygon
        </DigitizeButton>

        <DigitizeButton
          name="drawCircle"
          map={map}
          drawType="Circle"
        >
        Draw circle
        </DigitizeButton>

        <DigitizeButton
          name="drawRectangle"
          map={map}
          drawType="Rectangle"
        >
        Draw rectangle
        </DigitizeButton>

        <DigitizeButton
          name="drawText"
          map={map}
          drawType="Text"
        >
        Draw text label
        </DigitizeButton>

        <DigitizeButton
          name="selectAndModify"
          map={map}
          editType="Edit"
        >
        Select and modify features
        </DigitizeButton>

        <DigitizeButton
          name="copyFeature"
          map={map}
          editType="Copy"
        >
        Copy features
        </DigitizeButton>

        <DigitizeButton
          name="deleteFeature"
          map={map}
          editType="Delete"
        >
        Delete features
        </DigitizeButton>

      </ToggleGroup>

    </div>

  </div>,

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

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