diff --git a/examples/draw-freehand.html b/examples/draw-freehand.html new file mode 100644 index 0000000000..76f830b287 --- /dev/null +++ b/examples/draw-freehand.html @@ -0,0 +1,22 @@ +--- +layout: example.html +title: Freehand Drawing +shortdesc: Example using the ol.interaction.Draw interaction in freehand mode. +docs: > + This example demonstrates the `ol.interaction.Draw` in freehand mode. During + freehand drawing, points are added while dragging. Set `freehand: true` to + enable freehand mode. Note that freehand mode can be conditionally enabled + by using the `freehandCondition` option. For example to toggle freehand mode + with the `Shift` key, use `freehandCondition: ol.events.condition.shiftKeyOnly`. +tags: "draw, edit, freehand, vector" +--- +
+ diff --git a/examples/draw-freehand.js b/examples/draw-freehand.js new file mode 100644 index 0000000000..01ef780b00 --- /dev/null +++ b/examples/draw-freehand.js @@ -0,0 +1,52 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.interaction.Draw'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); + +var raster = new ol.layer.Tile({ + source: new ol.source.OSM() +}); + +var source = new ol.source.Vector({wrapX: false}); + +var vector = new ol.layer.Vector({ + source: source +}); + +var map = new ol.Map({ + layers: [raster, vector], + target: 'map', + view: new ol.View({ + center: [-11000000, 4600000], + zoom: 4 + }) +}); + +var typeSelect = document.getElementById('type'); + +var draw; // global so we can remove it later +function addInteraction() { + var value = typeSelect.value; + if (value !== 'None') { + draw = new ol.interaction.Draw({ + source: source, + type: /** @type {ol.geom.GeometryType} */ (typeSelect.value), + freehand: true + }); + map.addInteraction(draw); + } +} + + +/** + * Handle change event. + */ +typeSelect.onchange = function() { + map.removeInteraction(draw); + addInteraction(); +}; + +addInteraction();