Merge pull request #955 from adube/edit-feature-style

Add gmf feature style directive
camptocamp · Apr 4, 2016 · 69003a2 · 69003a2
2 parents 5a67a39 + 2cde160
commit 69003a2
Show file tree

Hide file tree

Showing 7 changed files with 1,230 additions and 2 deletions.
diff --git a/contribs/gmf/examples/featurestyle.html b/contribs/gmf/examples/featurestyle.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+  <head>
+    <title>Feature Style 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-featurestyle {
+        display: block;
+        margin: 20px;
+        width: 260px;
+      }
+      gmf-featurestyle .form-horizontal .control-label {
+        text-align: left;
+      }
+      .gmf-featurestyle-name {
+        font-weight: bold;
+        font-size: 16pt;
+      }
+      .gmf-featurestyle-name:not(:focus) {
+        border: none;
+        box-shadow: none;
+        -webkit-box-shadow: none;
+        padding: 0;
+      }
+      gmf-featurestyle input[type=range] {
+        padding: 6px 12px;
+      }
+      .palette {
+        border-collapse: separate;
+        border-spacing: 0px;
+      }
+      .palette tr {
+        cursor: default;
+      }
+      .palette td {
+        position: relative;
+        padding: 0px;
+        text-align: center;
+        vertical-align: middle;
+        font-size: 1px;
+        cursor: pointer;
+      }
+      .palette td > div {
+        position: relative;
+        height: 12px;
+        width: 12px;
+        border: 1px solid #fff;
+        box-sizing: content-box;
+      }
+      .palette td:hover > div::after {
+        display: block;
+        content: '';
+        background: inherit;
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        top: -10px;
+        left: -10px;
+        border: 2px solid #fff;
+        -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px 0;
+        -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px 0;
+        box-shadow: rgba(0,0,0,0.3) 0 1px 3px 0;
+        z-index: 11;
+      }
+      .palette td.selected > div::after {
+        border: 2px solid #444;
+        margin: 0;
+        content: '';
+        display: block;
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        left: -3px;
+        top: -3px;
+        box-sizing: content-box;
+        z-index: 10;
+      }
+    </style>
+  </head>
+  <body ng-controller="MainController as ctrl">
+    <gmf-map gmf-map-map="ctrl.map"></gmf-map>
+    <gmf-featurestyle
+      gmf-featurestyle-feature="ctrl.selectedFeature">
+    </gmf-featurestyle>
+
+    <p id="desc">
+      This example shows how to use the <code>gmf-featurestyle</code>
+      directive to style a vector feature. Click on a feature to show the
+      directive.
+    </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=featurestyle.js"></script>
+    <script src="default.js"></script>
+    <script src="../../../utils/watchwatchers.js"></script>
+  </body>
+</html>
diff --git a/contribs/gmf/examples/featurestyle.js b/contribs/gmf/examples/featurestyle.js
@@ -0,0 +1,221 @@
+goog.provide('gmf-featurestyle');
+
+goog.require('gmf.featurestyleDirective');
+goog.require('gmf.mapDirective');
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.geom.Circle');
+goog.require('ol.geom.Polygon');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+/** @const **/
+var app = {};
+
+
+/** @type {!angular.Module} **/
+app.module = angular.module('app', ['gmf']);
+
+app.module.constant('ngeoMeasureDecimals', 2);
+
+
+/**
+ * @constructor
+ * @param {!angular.Scope} $scope Angular scope.
+ * @param {ngeo.FeatureHelper} ngeoFeatureHelper Gmf feature helper service.
+ */
+app.MainController = function($scope, ngeoFeatureHelper) {
+
+  /**
+   * @type {!angular.Scope}
+   * @private
+   */
+  this.scope_ = $scope;
+
+  // create features
+  var features = new ol.format.GeoJSON().readFeatures({
+    'type': 'FeatureCollection',
+    'features': [{
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Point',
+        'coordinates': [-8458215, 6672646]
+      },
+      'properties': {
+        'color': '#009D57',
+        'name': 'Point 1',
+        'size': '6'
+      }
+    }, {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Point',
+        'coordinates': [-8007848, 6209744]
+      },
+      'properties': {
+        'angle': '0',
+        'color': '#000000',
+        'isText': true,
+        'name': 'Text 1',
+        'size': '16'
+      }
+    }, {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'LineString',
+        'coordinates': [
+          [-8321240, 6523441],
+          [-8103547, 6726458],
+          [-8091318, 6408480],
+          [-7973910, 6631065]
+        ]
+      },
+      'properties': {
+        'color': '#0BA9CC',
+        'name': 'LineString 1',
+        'stroke': '4'
+      }
+    }, {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Polygon',
+        'coordinates': [
+          [
+            [-8512027, 6359560],
+            [-8531595, 6080718],
+            [-8267428, 6031798],
+            [-8238077, 6247045],
+            [-8512027, 6359560]
+          ]
+        ]
+      },
+      'properties': {
+        'color': '#4186F0',
+        'name': 'Polygon 1',
+        'opacity': '0.5',
+        'showMeasure': true,
+        'stroke': '1'
+      }
+    }, {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Polygon',
+        'coordinates': [
+          [
+            [-7952508, 6096617],
+            [-8051570, 5959642],
+            [-7848554, 5926621],
+            [-7754383, 6025683],
+            [-7952508, 6096617]
+          ]
+        ]
+      },
+      'properties': {
+        'color': '#CCCCCC',
+        'name': 'Polygon 2',
+        'opacity': '1',
+        'stroke': '3'
+      }
+    }, {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'Polygon',
+        'coordinates': [
+          [
+            [-7874848, 6496535],
+            [-7874848, 6384020],
+            [-7730535, 6384020],
+            [-7730535, 6496535],
+            [-7874848, 6496535]
+          ]
+        ]
+      },
+      'properties': {
+        'color': '#000000',
+        'isRectangle': true,
+        'name': 'Rectangle 1',
+        'opacity': '0.5',
+        'stroke': '2'
+      }
+    }]
+  });
+
+  features.push(new ol.Feature({
+    geometry: ol.geom.Polygon.fromCircle(
+        new ol.geom.Circle([-7691093, 6166327], 35000), 64),
+    color: '#000000',
+    isCircle: true,
+    name: 'Circle 1',
+    opacity: '0.5',
+    stroke: '2'
+  }));
+
+  var view = new ol.View({
+    center: [-8174482, 6288627],
+    zoom: 6
+  });
+
+  ngeoFeatureHelper.setProjection(view.getProjection());
+
+  // set style
+  features.forEach(function(feature) {
+    ngeoFeatureHelper.setStyle(feature);
+  }, this);
+
+  /**
+   * @type {ol.Map}
+   * @export
+   */
+  this.map = new ol.Map({
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.OSM()
+      }),
+      new ol.layer.Vector({
+        source: new ol.source.Vector({
+          wrapX: false,
+          features: features
+        })
+      })
+    ],
+    view: view
+  });
+
+  /**
+   * @type {?ol.Feature}
+   * @export
+   */
+  this.selectedFeature = null;
+
+  this.map.on('singleclick', this.handleMapSingleClick_, this);
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} evt MapBrowser event
+ * @private
+ */
+app.MainController.prototype.handleMapSingleClick_ = function(evt) {
+  var pixel = evt.pixel;
+
+  var feature = this.map.forEachFeatureAtPixel(pixel, function(feature) {
+    return feature;
+  });
+
+  if (feature) {
+    if (this.selectedFeature !== feature) {
+      this.selectedFeature = feature;
+    }
+  } else {
+    this.selectedFeature = null;
+  }
+
+  this.scope_.$apply();
+
+};
+
+
+app.module.controller('MainController', app.MainController);