camptocamp · RBcote · Aug 27, 2019 · Aug 13, 2019 · Aug 27, 2019
diff --git a/examples/mapswipe.css b/examples/mapswipe.css
@@ -0,0 +1,8 @@
+#map {
+    width: 100%;
+    height: 400px;
+  }
+
+.swipe-input {
+  width: 100%;
+}
diff --git a/examples/mapswipe.html b/examples/mapswipe.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+  <head>
+    <title>Map swipe 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">
+  </head>
+  <body ng-controller="MainController as ctrl">
+   <div id="map" ngeo-map="::ctrl.map"></div>
+   <ngeo-mapswipe map="::ctrl.map" layer="::ctrl.openSeaMapLayer"></ngeo-mapswipe>
+    <p id="desc">This example shows how to use the <code><a href="../apidoc/ngeo.map.swipe.html" title="Read our documentation">ngeo-Mapswipe</a></code> component to insert an input type range and swipe a map.</p>
+    <script type="text/javascript" src="dist/vendor.js"></script>
+  </body>
+</html>
diff --git a/examples/mapswipe.js b/examples/mapswipe.js
@@ -0,0 +1,60 @@
+/**
+ */
+import './mapswipe.css';
+import angular from 'angular';
+import ngeoMapswipeModule from 'ngeo/map/swipe.js';
+import ngeoMapModule from 'ngeo/map/module.js';
+import olLayerTile from 'ol/layer/Tile.js';
+import olMap from 'ol/Map.js';
+import olSourceOSM, {ATTRIBUTION} from 'ol/source/OSM.js';
+import olView from 'ol/View.js';
+
+/** @type {angular.IModule} **/
+const module = angular.module('app', [
+  'gettext',
+  ngeoMapModule.name,
+  ngeoMapswipeModule.name
+]);
+
+/**
+ * @constructor
+ * @ngInject
+ */
+function MainController() {
+
+  const openStreetMapLayer = new olLayerTile({
+    source: new olSourceOSM()
+  });
+
+  /**
+   * @type {import('ol/layer/Tile.js').default}
+   */
+  this.openSeaMapLayer = new olLayerTile({
+    source: new olSourceOSM({
+      attributions: [
+        'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
+        ATTRIBUTION
+      ],
+      opaque: false,
+      url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
+    })
+  });
+
+  /**
+   * @type {import('ol/Map.js').default}
+   */
+  this.map = new olMap({
+    layers: [
+      openStreetMapLayer,
+      this.openSeaMapLayer
+    ],
+    view: new olView({
+      center: [-244780.24508882355, 5986452.183179816],
+      zoom: 15
+    })
+  });
+}
+
+module.controller('MainController', MainController);
+
+export default module;
diff --git a/src/map/swipe.html b/src/map/swipe.html
@@ -0,0 +1,4 @@
+<div>
+    <label>Swipe</label>
+  <input id="swipe" type="range" class="swipe-input">
+</div>
diff --git a/src/map/swipe.js b/src/map/swipe.js
@@ -0,0 +1,157 @@
+import angular from 'angular';
+import * as olEvents from 'ol/events.js';
+import RenderEvent from 'ol/render/Event.js';
+/**
+ * @type {angular.IModule}
+ * @hidden
+ */
+const module = angular.module('ngeoMapswipe', []);
+
+module.run(
+  /**
+   * @ngInject
+   * @param {angular.ITemplateCacheService} $templateCache
+   */
+  $templateCache => {
+    // @ts-ignore: webpack
+    $templateCache.put('ngeo/src/map/swipe', require('./swipe.html'));
+  }
+);
+
+module.value(
+  'ngeoMapswipeTemplateUrl',
+  /**
+   * @param {angular.IAttributes} $attrs Attributes.
+   * @return {string} The template url.
+   */
+  $attrs => {
+    const templateUrl = $attrs.ngeoMapswipeTemplateUrl;
+    return templateUrl !== undefined ? templateUrl : 'ngeo/src/map/swipe';
+  }
+);
+
+/**
+ * @param {angular.IAttributes} $attrs Attributes.
+ * @param {function(angular.IAttributes): string} ngeoMapswipeTemplateUrl Template function.
+ * @return {string} Template URL.
+ * @ngInject
+ * @private
+ * @hidden
+ */
+function ngeoMapswipeTemplateUrl($attrs, ngeoMapswipeTemplateUrl) {
+  return ngeoMapswipeTemplateUrl($attrs);
+}
+
+/**
+ * The controller for the Mapswipe component.
+ */
+class SwipeController {
+  /**
+   * @param {angular.IScope} $scope Angular scope.
+   * @param {JQuery} $element Element.
+   * @param {angular.auto.IInjectorService} $injector Main injector.
+   * @constructor
+   * @private
+   * @hidden
+   * @ngInject
+   * @ngdoc controller
+   * @ngname ngeoMapswipeController
+   */
+  constructor($scope, $element, $injector) {
+    /**
+     * @type {import('ol/Map.js').default}
+     */
+    this.map;
+
+    /**
+     * @type {import('ol/layer/Tile.js').default}
+     */
+    this.layer;
+
+    /**
+     * @type {angular.IScope}
+     * @private
+     */
+    this.scope_ = $scope;
+
+    /**
+     * @type {number}
+     */
+    this.swipeValue = 50;
+
+    /**
+     * @type {JQuery}
+     * @private
+     */
+    this.swipeInput_ = $element.find('.swipe-input');
+
+    /**
+     * @type {olEvents.EventsKey[]}
+     * @private
+     */
+    this.layerKeys_ = [];
+  }
+
+  /**
+   * Init the controller
+   */
+  $onInit() {
+    this.layerKeys_.push(olEvents.listen(this.layer, 'prerender', this.handleLayerPrerender_, this));
+    this.layerKeys_.push(olEvents.listen(this.layer, 'postrender', this.handleLayerPostrender_, this));
+
+    this.swipeInput_.on('input change', event => {
+      this.swipeValue = Number($(event.target).val());
+      this.map.render();
+    });
+  }
+
+  /**
+   * @param {?Event|import("ol/events/Event.js").default} evt OpenLayers object event.
+   * @private
+   */
+  handleLayerPrerender_(evt) {
+    if (!(evt instanceof RenderEvent)) {
+      return;
+    }
+    const ctx = evt.context;
+    if (!ctx) {
+      return;
+    }
+    const width = ctx.canvas.width * (this.swipeValue / 100);
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, width, ctx.canvas.height);
+    ctx.clip();
+  }
+
+  /**
+   * @param {?Event|import("ol/events/Event.js").default} evt OpenLayers object event.
+   * @private
+   */
+  handleLayerPostrender_(evt) {
+    if (evt instanceof RenderEvent) {
+      const ctx = evt.context;
+      if (!ctx) {
+        return;
+      }
+      ctx.restore();
+    }
+  }
+
+  $onDestroy() {
+    this.layerKeys_.forEach(olEvents.unlistenByKey);
+    this.layerKeys_.length = 0;
+    this.swipeInput_.off();
+  }
+}
+
+module.component('ngeoMapswipe', {
+  controller: SwipeController,
+  bindings: {
+    map: '<',
+    layer: '<'
+  },
+  templateUrl: ngeoMapswipeTemplateUrl
+});
+
+export default module;