Add routing service and directive

contribs/gmf/apps/desktop_alt/index.html

@@ -86,6 +86,10 @@
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Import Layer'|translate}}">
               <span class="fa fa-upload"></span>
             </button>
+            <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.routingfeatureActive"
+                    data-toggle="tooltip" data-placement="left" data-original-title="{{'Routing'|translate}}">
+              <span class="fa fa-map-signs"></span>
+            </button>
           </div>
           <br/>
           <br/>
@@ -228,6 +232,17 @@
               </gmf-importdatasource>
             </div>
           </div>
+          <div ng-show="mainCtrl.routingfeatureActive" class="row">
+            <div class="col-sm-12">
+              <div class="gmf-app-tools-content-heading">
+                {{'Routing'|translate}}
+                <a class="btn close" ng-click="mainCtrl.routingfeatureActive = false">&times;</a>
+              </div>
+              <ngeo-routing
+                  ngeo-routing-map="mainCtrl.map">
+              </ngeo-routing>
+            </div>
+          </div>
         </div>
       </div>
       <div class="gmf-app-map-container" ng-class="{'gmf-app-infobar-active': mainCtrl.showInfobar}">
@@ -398,6 +413,19 @@
         module.constant('gmfTreeUrl', 'https://geomapfish-demo.camptocamp.com/2.3/wsgi/themes?version=2&background=background&interface=desktop');
         module.constant('gmfLayersUrl', 'https://geomapfish-demo.camptocamp.com/2.3/wsgi/layers/');
         module.constant('gmfShortenerCreateUrl', '');
+        module.constant('ngeoRoutingOptions', {
+          'backendUrl': 'http://routing.osm.ch/',
+          'profiles': [
+            {label : 'Car', profile: 'routed-car'},
+            {label : 'Bike (City)', profile: 'routed-bike'},
+            {label : 'Bike (Touring)', profile: 'routed-bike-touring'},
+            {label : 'Foot', profile: 'routed-foot'},
+            {label : 'Hiking', profile: 'routed-hiking'}
+          ]
+        });
+        module.constant('ngeoNominatimSearchDefaultParams', {
+          'countrycodes': 'CH'
+        });
         module.constant('gmfSearchGroups', ['osm','district']);
         // Requires that the gmfSearchGroups is specified
         module.constant('gmfSearchActions', [

contribs/gmf/apps/desktop_alt/js/controller.js

@@ -11,6 +11,7 @@ goog.require('gmf.controllers.AbstractDesktopController');
 goog.require('gmf.import.module');
 goog.require('ngeo.googlestreetview.module');
 goog.require('ngeo.statemanager.WfsPermalink');
+goog.require('ngeo.routing.module');
 goog.require('ngeo.proj.EPSG2056');
 goog.require('ngeo.proj.EPSG21781');
 goog.require('ol');
@@ -20,6 +21,7 @@ app.desktop_alt.module = angular.module('AppDesktopAlt', [
   app.module.name,
   gmf.controllers.AbstractDesktopController.module.name,
   gmf.import.module.name,
+  ngeo.routing.module.name,
   ngeo.googlestreetview.module.name,
   ngeo.statemanager.WfsPermalink.module.name,
 ]);

contribs/gmf/less/desktop.less

@@ -19,6 +19,7 @@
 @import 'fullscreenpopup.less';
 @import 'print.less';
 @import 'importdatasource.less';
+@import 'routing.less';
 
 @map-tools-size: 3rem;
 @button-size: 4rem;

contribs/gmf/less/routing.less

@@ -0,0 +1,48 @@
+.ngeo-routing-error {
+  color: darkred;
+}
+
+.ngeo-routing-start .fa-map-marker {
+  color: #6BE62E;
+  text-shadow: -1px 0 #4CB01E, 0 1px #4CB01E, 1px 0 #4CB01E, 0 -1px #4CB01E;
+}
+
+.ngeo-routing-destination .fa-map-marker {
+  color: #FF3E13;
+  text-shadow: -1px 0 #CD3412, 0 1px #CD3412, 1px 0 #CD3412, 0 -1px #CD3412;
+}
+
+.ngeo-routing-vias .fa-map-marker {
+  color: #767676;
+  text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
+}
+
+.ngeo-nominatim-input {
+  height: 30px;
+}
+
+/**
+ * Typeahead
+ */
+.tt-menu {
+  background-color: #fff;
+  border: 1px solid #ccc;
+}
+
+.tt-suggestion.tt-is-under-cursor, .tt-suggestion:hover {
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
+
+.ngeo-nominatim-input .twitter-typeahead {
+  width: 100%;
+  background: #fff;
+}
+
+.ngeo-routing-vias .form-inline .input-group .form-control {
+  width: 185px;
+}

contribs/gmf/src/controllers/AbstractDesktopController.js

@@ -108,6 +108,12 @@ gmf.controllers.AbstractDesktopController = function(config, $scope, $injector)
    */
   this.editFeatureActive = false;
 
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.routingfeatureActive = false;
+
   /**
    * @type {boolean}
    * @export

examples/routing.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+<head>
+  <title>Routing 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">
+  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" type="text/css">
+  <style>
+    #map {
+      width: 600px;
+      height: 400px;
+    }
+    @media (max-width: 768px) {
+      #map {
+        height: 200px;
+        width: 200px;
+      }
+    }
+    .ngeo-routing-error {
+      color: darkred;
+    }
+
+    .ngeo-routing-start .fa-map-marker {
+      color: #6BE62E;
+      text-shadow: -1px 0 #4CB01E, 0 1px #4CB01E, 1px 0 #4CB01E, 0 -1px #4CB01E;
+    }
+
+    .ngeo-routing-destination .fa-map-marker {
+      color: #FF3E13;
+      text-shadow: -1px 0 #CD3412, 0 1px #CD3412, 1px 0 #CD3412, 0 -1px #CD3412;
+    }
+
+    .ngeo-routing-vias .fa-map-marker {
+      color: #767676;
+      text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
+    }
+
+    .ngeo-nominatim-input {
+      height: 30px;
+    }
+
+    .tt-menu {
+      background-color: #fff;
+      border: 1px solid #ccc;
+    }
+
+    .tt-suggestion.tt-is-under-cursor, .tt-suggestion:hover {
+      color: #fff;
+      background-color: #0097cf;
+    }
+
+    .tt-suggestion p {
+      margin: 0;
+    }
+
+    .ngeo-nominatim-input .twitter-typeahead {
+      width: 100%;
+    }
+
+    .ngeo-routing-vias .form-inline .input-group .form-control {
+      width: 185px;
+    }
+  </style>
+</head>
+<body ng-controller="MainController as mainCtrl">
+<div class="container">
+  <div class="row">
+    <div class="col-md-7">
+      <div id="map" ngeo-map="mainCtrl.map"></div>
+    </div>
+    <div class="col-md-5">
+      <ngeo-routing ngeo-routing-map="mainCtrl.map">
+      </ngeo-routing>
+    </div>
+  </div>
+</div>
+
+<p id="desc">This example shows how to use ngeo's routing component (<code><a href="../apidoc/ngeo.routingComponent.html" title="Read our documentation">ngeo-routingComponent</a></code>)..</p>
+<script src="../node_modules/jquery/dist/jquery.js"></script>
+<script src="../node_modules/angular/angular.js"></script>
+<script src="../node_modules/angular-gettext/dist/angular-gettext.js"></script>
+<script src="../node_modules/angular-ui-date/dist/date.js"></script>
+<script src="../node_modules/angular-float-thead/angular-floatThead.js"></script>
+<script src="../node_modules/floatthead/dist/jquery.floatThead.min.js"></script>
+<script src="../node_modules/proj4/dist/proj4.js"></script>
+<script src="../node_modules/corejs-typeahead/dist/typeahead.bundle.js"></script>
+<script src="/@?main=routing.js"></script>
+<script src="default.js"></script>
+<script src="../utils/watchwatchers.js"></script>
+</body>
+</html>

examples/routing.js

@@ -0,0 +1,52 @@
+/**
+ * This example shows the ngeo routing directive.
+ */
+
+goog.provide('app.routing');
+
+goog.require('ngeo.map.module');
+goog.require('ngeo.routing.module');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+/** @type {!angular.Module} **/
+app.routing.module = angular.module('app', [
+  'gettext',
+  ngeo.map.module.name,
+  ngeo.routing.module.name
+]);
+
+
+/**
+ * The application's main directive.
+ * @constructor
+ * @ngInject
+ */
+app.routing.MainController = function() {
+
+  /**
+   * @type {ol.Map}
+   * @export
+   */
+  this.map = new ol.Map({
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.OSM()
+      })
+    ],
+    view: new ol.View({
+      center: [931010.1535989442, 5961705.842297254],
+      zoom: 9
+    })
+  });
+
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.routingfeatureActive = true;
+};
+
+app.routing.module.controller('MainController', app.routing.MainController);

externs/typeahead.js

@@ -139,7 +139,7 @@ let TypeaheadTemplates;
 
 /**
  * @typedef {{
- *   source: function(string,function(Array.<BloodhoundDatum>)),
+ *   source: function(string,function(Array.<BloodhoundDatum>),(function(Array.<BloodhoundDatum>)|undefined)),
  *   async: (boolean|undefined),
  *   name: (string|undefined),
  *   limit: (number|undefined),

options/ngeox.js

@@ -2605,3 +2605,55 @@ ngeox.CreatePrint;
  * }}
  */
 ngeox.FilterCondition;
+
+
+/**
+ * Format a duration in seconds to a more readable form.
+ * Arguments:
+ * - duration The duration in seconds.
+ * @typedef {function(number): string}
+ */
+ngeox.duration;
+
+
+
+/**
+ * @typedef {{
+ *     name: (string),
+ *     coordinate: (ol.Coordinate)
+ * }}
+ */
+ngeox.NominatimSearchResult;
+
+/**
+ * @typedef {{
+ *     display_name: (string),
+ *     lon: (number),
+ *     lat: (number)
+ * }}
+ */
+ngeox.NominatimSearchResponseResult;
+
+/**
+ * @typedef {{
+ *     feature: (?ol.Feature),
+ *     onSelect: (function(ngeox.NominatimSearchResult))
+ * }}
+ */
+ngeox.RoutingVia;
+
+/**
+ * @typedef {{
+ *     label: (string),
+ *     profile: (string)
+ * }}
+ */
+ngeox.RoutingProfile;
+
+/**
+ * @typedef {{
+ *     backendUrl: (string|undefined),
+ *     profiles: (Array.<ngeox.RoutingProfile>|undefined)
+ * }}
+ */
+ngeox.RoutingOptions;