Skip to content

Latest commit

 

History

History
170 lines (120 loc) · 4.14 KB

README.md

File metadata and controls

170 lines (120 loc) · 4.14 KB
Raw

ol-touch-draw

A simplified touch-friendly drawing interaction for OpenLayers 6

ol_touch_draw_demo

Getting started

All-in-one example

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-touch-draw/dist/ol-touch-draw.umd.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol-touch-draw/dist/ol-touch-draw.css" type="text/css">
    <title>OpenLayers ol-touch-draw example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var vectorSource = new ol.source.Vector();

      vectorSource.addFeature(new ol.Feature(
          new ol.geom.LineString([
            [-20, 0],
            [20, 0],
          ])
      ));

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Vector({
            source: vectorSource
          }),
        ],
        view: new ol.View({
          center: [0, 0],
          zoom: 20
        })
      });
      map.addInteraction(new olTouchDraw.default({ source: vectorSource }));
    </script>
  </body>
</html>

Via NPM

npm i ol-touch-draw
import TouchDraw from 'ol-touch-draw';

...

map.addInteraction(new TouchDraw({ source: vectorSource }));

API

Table of Contents

TouchDrawOptions

Type: Object

Properties

  • source VectorSource? Source used as both a reference and destination. If this options is provided, the referenceSource and destinationSource options should not be.
  • referenceSource VectorSource? Reference source used to calculate proposed drawing handles.
  • destinationSource VectorSource? Destination source for the drawn features.

DefaultTouchDrawUnitConversions

Default units and their meter conversions for touch draw dimensions.

TouchDraw

Extends PointerInteraction

Parameters

setMap

Parameters
  • map ol.PluggableMap Map.

changed

Type: PointerInteraction.Options

constructor

Parameters

  • opt_options Object? Control options.

TouchDrawEventType

Type: string

TouchDrawEvent#drawstart

Triggered upon feature draw start

TouchDrawEvent#drawend

Triggered upon feature draw end

TouchDrawEvent#drawabort

Triggered upon feature draw abortion

TouchDrawEvent

Extends Event

Parameters

feature

The feature being drawn.

Type: Feature