Demos

Standard toolbar

This example shows the standard toolbar with the default settings. For example, selecting a polygon and selecting the "Measure Area" control will display its area in squared meters. A stand alone is provided here.

  <script>
    const map = new ol.Map({...});
    const toolbar = new olturf.Toolbar();
    map.addControl(toolbar);
  </script>

Multiple toolbars

This example shows how to use the prefix and style options to use multiple toolbars. A stand alone is provided here.

  <style>
    .olturf-toolbar-measurement {
      background-color: initial;
      left: 4.5em;
      padding: initial;
      top: 0.5em;
    }
    .olturf-toolbar-grids {
      background-color: initial;
      left: 0.5em;
      padding: initial;
      top: 6.5em;
    }
    .olturf-toolbar-grids .olturf-control {
      float: none;
    }
  </style>
  ...
  <script>
    const map = new ol.Map({...});
    const toolbar = new olturf.Toolbar({
      olturf: {
        controls: olturf.toolbars.measurement(),
        style: 'olturf-toolbar-measurement'
      }
    });
    map.addControl(toolbar);

    const toolfoo = new olturf.Toolbar({
      olturf: {
        controls: olturf.toolbars.grids(),
        prefix: 'olturf-grids',
        style: 'olturf-toolbar-grids'
      }
    });
    map.addControl(toolfoo);
  </script>

Custom handler

This example shows how to pass an optional constructor argument to provide a custom handler for proccesing Turf command outputs. For example, selecting a polygon and selecting the "Measure Area" control will display a custom alert message.

  <script>
    const map = new ol.Map({...});
    const toolbar = new olturf.Toolbar({
      olturf: {
        handler: {
          callback: function(name, inputs, output) {
            alert('Custom handler for command "' + name + '"');
          }
        }
      }
    });
    map.addControl(toolbar);
  </script>