olturf library has two dependencies that must be
included, OpenLayers and Turf. Therefore, the following is the
minimum needed to set up an olturf web application.
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/olturf/dist/olturf.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/@turf/turf@5.1.6/turf.min.js"></script>
<script src="https://unpkg.com/olturf/dist/olturf.min.js"></script>
Using the olturf library is as simple as creating a new
instance of a olturf.Toolbar control and then adding it
to an existing ol.Map. The default toolbar provides
reasonable defaults for it's layout and commands. By default the
toolbar is displayed across the top with all available Turf commands
enabled. For commands requiring inputs a popup form is displayed. If
the Turf command returns a feature it is added to the map. If a
value is returned it is displayed in a popup message.
Below is the standard toolbar that is displayed when no options are provided.
<script>
const toolbar = new olturf.Toolbar();
const map = new ol.Map({...});
map.addControl(toolbar);
</script>olturf.Toolbar(options) constructor takes an
optional argument that allows the user to override the default
settings like the styling of the toolbar and providing custom
processing of Turf command outputs. The
options argument is a
ol.control.Control options object with an additional
olturf property. For a complete description see the
olturf.Toolbar
documentation.
options = {
olturf: {
controls : ['area', ...], // list of controls to add to toolbar
handler : { // callback to handle Turf commands output
callback : function(name, inputs, output) {...}
},
prefix : 'olturf-foo', // prefix to apply to toolbar annd control IDs.
style : 'olturf-bar' // style to apply to toolbar
}
};