1 files changed, 71 insertions, 0 deletions
diff --git a/misc/openlayers/examples/mobile-drawing.js b/misc/openlayers/examples/mobile-drawing.js
new file mode 100644
index 0000000..bac903c
--- /dev/null
+++ b/misc/openlayers/examples/mobile-drawing.js
@@ -0,0 +1,71 @@
+function init() {
+
+    // create a vector layer for drawing
+    var vector = new OpenLayers.Layer.Vector('Vector Layer', {
+        styleMap: new OpenLayers.StyleMap({
+            temporary: OpenLayers.Util.applyDefaults({
+                pointRadius: 16
+            }, OpenLayers.Feature.Vector.style.temporary),
+            'default': OpenLayers.Util.applyDefaults({
+                pointRadius: 16,
+                strokeWidth: 3,
+            }, OpenLayers.Feature.Vector.style['default']),
+            select: OpenLayers.Util.applyDefaults({
+                pointRadius: 16,
+                strokeWidth: 3
+            }, OpenLayers.Feature.Vector.style.select)
+        })
+    });
+
+    // OpenLayers' EditingToolbar internally creates a Navigation control, we
+    // want a TouchNavigation control here so we create our own editing toolbar
+    var toolbar = new OpenLayers.Control.Panel({
+        displayClass: 'olControlEditingToolbar'
+    });
+    toolbar.addControls([
+        // this control is just there to be able to deactivate the drawing
+        // tools
+        new OpenLayers.Control({
+            displayClass: 'olControlNavigation'
+        }),
+        new OpenLayers.Control.ModifyFeature(vector, {
+            vertexRenderIntent: 'temporary',
+            displayClass: 'olControlModifyFeature'
+        }),
+        new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Point, {
+            displayClass: 'olControlDrawFeaturePoint'
+        }),
+        new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path, {
+            displayClass: 'olControlDrawFeaturePath'
+        }),
+        new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Polygon, {
+            displayClass: 'olControlDrawFeaturePolygon'
+        })
+    ]);
+
+    var osm = new OpenLayers.Layer.OSM();
+    osm.wrapDateLine = false;
+
+    map = new OpenLayers.Map({
+        div: 'map',
+        projection: 'EPSG:900913',
+        numZoomLevels: 18,
+        controls: [
+            new OpenLayers.Control.TouchNavigation({
+                dragPanOptions: {
+                    enableKinetic: true
+                }
+            }),
+            new OpenLayers.Control.Zoom(),
+            toolbar
+        ],
+        layers: [osm, vector],
+        center: new OpenLayers.LonLat(0, 0),
+        zoom: 1,
+        theme: null
+    });
+
+    // activate the first control to render the "navigation icon"
+    // as active
+    toolbar.controls[0].activate();
+}