Add gmf-drawfeature directive and example

camptocamp · Apr 4, 2016 · be13c5e · be13c5e
1 parent 69003a2
commit be13c5e
Show file tree

Hide file tree

Showing 5 changed files with 617 additions and 0 deletions.
diff --git a/contribs/gmf/examples/drawfeature.html b/contribs/gmf/examples/drawfeature.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+  <head>
+    <title>Draw Feature Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" href="../../../node_modules/openlayers/css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.css" type="text/css">
+
+    <style>
+      gmf-map > div {
+        width: 600px;
+        height: 400px;
+      }
+      gmf-drawfeature div {
+        margin: 10px 0;
+      }
+      .gmf-drawfeature-circle:before {
+        content: 'Circle'
+      }
+      .gmf-drawfeature-linestring:before {
+        content: 'LineString'
+      }
+      .gmf-drawfeature-point:before {
+        content: 'Point'
+      }
+      .gmf-drawfeature-polygon:before {
+        content: 'Polygon'
+      }
+      .gmf-drawfeature-rectangle:before {
+        content: 'Rectangle'
+      }
+      .gmf-drawfeature-text:before {
+        content: 'Text'
+      }
+      .tooltip {
+        position: relative;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        color: white;
+        padding: 4px 8px;
+        opacity: 0.7;
+        white-space: nowrap;
+      }
+      .tooltip-measure {
+        opacity: 1;
+        font-weight: bold;
+      }
+      .tooltip-static {
+        display: none;
+      }
+      .tooltip-measure:before,
+      .tooltip-static:before {
+        border-top: 6px solid rgba(0, 0, 0, 0.5);
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        content: "";
+        position: absolute;
+        bottom: -6px;
+        margin-left: -7px;
+        left: 50%;
+      }
+      .tooltip-static:before {
+        border-top-color: #ffcc33;
+      }
+    </style>
+  </head>
+  <body ng-controller="MainController as ctrl">
+    <gmf-map gmf-map-map="ctrl.map"></gmf-map>
+    <gmf-drawfeature
+        gmf-drawfeature-active="ctrl.drawActive"
+        gmf-drawfeature-map="ctrl.map">
+    </gmf-drawfeature>
+    <input type="checkbox"
+       ng-model="ctrl.dummyActive" /> Dummy
+
+    <p id="desc">
+      This example shows how to use the <code>gmf-drawfeature</code>
+      directive to draw vector features on the map.
+    </p>
+    <script src="../../../node_modules/jquery/dist/jquery.js"></script>
+    <script src="../../../node_modules/angular/angular.js"></script>
+    <script src="../../../node_modules/angular-animate/angular-animate.js"></script>
+    <script src="../../../node_modules/angular-touch/angular-touch.js"></script>
+    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="../../../node_modules/angular-gettext/dist/angular-gettext.js"></script>
+    <script src="/@?main=drawfeature.js"></script>
+    <script src="default.js"></script>
+    <script src="../../../utils/watchwatchers.js"></script>
+  </body>
+</html>
diff --git a/contribs/gmf/examples/drawfeature.js b/contribs/gmf/examples/drawfeature.js
@@ -0,0 +1,81 @@
+goog.provide('gmf-drawfeature');
+
+goog.require('gmf.Features');
+goog.require('gmf.drawfeatureDirective');
+goog.require('gmf.mapDirective');
+goog.require('ngeo.ToolActivate');
+goog.require('ngeo.ToolActivateMgr');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+/** @const **/
+var app = {};
+
+
+/** @type {!angular.Module} **/
+app.module = angular.module('app', ['gmf']);
+
+
+/**
+ * @param {!angular.Scope} $scope Angular scope.
+ * @param {ngeo.ToolActivateMgr} ngeoToolActivateMgr Ngeo ToolActivate manager
+ *     service.
+ * @param {ol.Collection.<ol.Feature>} gmfFeatures Collection of features.
+ * @constructor
+ */
+app.MainController = function($scope, ngeoToolActivateMgr, gmfFeatures) {
+
+  /**
+   * @type {!angular.Scope}
+   * @private
+   */
+  this.scope_ = $scope;
+
+  var vector = new ol.layer.Vector({
+    source: new ol.source.Vector({
+      wrapX: false,
+      features: gmfFeatures
+    })
+  });
+
+  /**
+   * @type {ol.Map}
+   * @export
+   */
+  this.map = new ol.Map({
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.OSM()
+      }),
+      vector
+    ],
+    view: new ol.View({
+      center: [0, 0],
+      zoom: 3
+    })
+  });
+
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.drawActive = false;
+
+  var drawToolActivate = new ngeo.ToolActivate(this, 'drawActive');
+  ngeoToolActivateMgr.registerTool('mapTools', drawToolActivate, false);
+
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.dummyActive = true;
+
+  var dummyToolActivate = new ngeo.ToolActivate(this, 'dummyActive');
+  ngeoToolActivateMgr.registerTool('mapTools', dummyToolActivate, true);
+};
+
+
+app.module.controller('MainController', app.MainController);