Merge pull request #4346 from adube/v2_4-685-fix-examples

685 - Fix ngeo examples
camptocamp · Nov 1, 2018 · ade3574 · ade3574
2 parents 99f5b48 + 5fefcaf
commit ade3574
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 40 deletions.
diff --git a/examples/bboxquery.js b/examples/bboxquery.js
@@ -3,6 +3,7 @@
  */
 const exports = {};
 
+import appURL from './url.js';
 import './bboxquery.css';
 import EPSG21781 from 'ngeo/proj/EPSG21781.js';
 
@@ -91,14 +92,14 @@ exports.MainController = function($scope, ngeoDataSources) {
 
   const informationLayer = new olLayerImage({
     'source': new olSourceImageWMS({
-      'url': 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+      'url': appURL.MAPSERVER_PROXY,
       params: {'LAYERS': 'information'}
     })
   });
 
   const busStopLayer = new olLayerImage({
     'source': new olSourceImageWMS({
-      'url': 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+      'url': appURL.MAPSERVER_PROXY,
       params: {'LAYERS': 'bus_stop'}
     })
   });
@@ -129,7 +130,8 @@ exports.MainController = function($scope, ngeoDataSources) {
     id: 1,
     name: 'bus_stop',
     visible: true,
-    wfsUrl: 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+    wfsFeatureNS: appURL.MAPSERVER_WFS_FEATURE_NS,
+    wfsUrl: appURL.MAPSERVER_PROXY,
     ogcLayers: [{
       name: 'bus_stop',
       queryable: true
@@ -140,7 +142,8 @@ exports.MainController = function($scope, ngeoDataSources) {
     id: 2,
     name: 'information',
     visible: true,
-    wfsUrl: 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+    wfsFeatureNS: appURL.MAPSERVER_WFS_FEATURE_NS,
+    wfsUrl: appURL.MAPSERVER_PROXY,
     ogcLayers: [{
       name: 'information',
       queryable: true

diff --git a/examples/common_dependencies.js b/examples/common_dependencies.js
@@ -2,6 +2,7 @@ import './common_dependencies.scss'
 import 'jquery';
 import 'angular';
 import 'angular-gettext';
+import 'bootstrap';
 
 import 'ol/ol.css';
 import 'bootstrap/dist/css/bootstrap.css';

diff --git a/examples/desktopgeolocation.html b/examples/desktopgeolocation.html
@@ -11,6 +11,10 @@
     <div class="container-fluid">
       <div id="map" ngeo-map="::ctrl.map"></div>
       <button ngeo-desktop-geolocation=""
+        aria-pressed="false"
+        autocomplete="off"
+        class="btn btn-primary"
+        data-toggle="button"
         ngeo-desktop-geolocation-map="::ctrl.map"
         ngeo-desktop-geolocation-options="::ctrl.desktopGeolocationOptions">
       </button>

diff --git a/examples/layerorder.html b/examples/layerorder.html
@@ -18,7 +18,7 @@
     <ul ngeo-sortable="ctrl.selectedLayers"
         ngeo-sortable-options="{handleClassName: 'sortable-handle', draggerClassName: 'sortable-dragger', currDragItemClassName: 'placeholder'}">
       <li ng-repeat="layer in ctrl.selectedLayers">
-        <span class="sortable-handle fa fa-reorder"></span>{{layer.get('name')}}
+        <span class="sortable-handle fa fa-bars"></span>{{layer.get('name')}}
       </li>
     </ul>
     <label>

diff --git a/examples/mapfishprint.html b/examples/mapfishprint.html
@@ -9,7 +9,9 @@
   </head>
   <body ng-controller="MainController as ctrl">
     <div id="map" ngeo-map="ctrl.map"></div>
-    <button ng-click="ctrl.print()">Print</button>
+    <button
+        class="btn btn-primary"
+        ng-click="ctrl.print()">Print</button>
     <span ng-bind="ctrl.printState"></span>
     <p id="desc">This example shows how to use <code><a href="../apidoc/ngeo.createPrintServiceFactory.html" title="Read our documentation">ngeo.Print</a></code> to print an OpenLayers map with MapFish Print v3.</p>
     <p>In this example the best print scale is chosen based on the current map resolution.</p>

diff --git a/examples/mapfishprint.js b/examples/mapfishprint.js
@@ -3,6 +3,7 @@
  */
 const exports = {};
 
+import appURL from './url.js';
 import './mapfishprint.css';
 import EPSG21781 from 'ngeo/proj/EPSG21781.js';
 
@@ -27,22 +28,6 @@ const appmodule = angular.module('app', [
 ]);
 
 
-/**
- * @const
- * @private
- */
-exports.WMS_URL_ = 'https://geomapfish-demo-dc.camptocamp.com/2.4/' +
-    'mapserv_proxy';
-
-
-/**
- * @const
- * @private
- */
-exports.PRINT_URL_ = 'https://geomapfish-demo-dc.camptocamp.com/2.4/' +
-    'printproxy';
-
-
 /**
  * @const
  * @private
@@ -96,7 +81,7 @@ exports.MainController = function($timeout, ngeoCreatePrint, ngeoPrintUtils) {
     layers: [
       new olLayerImage({
         source: new olSourceImageWMS({
-          url: exports.WMS_URL_,
+          url: appURL.MAPSERVER_PROXY,
           params: {
             'LAYERS': 'osm'
           },
@@ -137,7 +122,7 @@ exports.MainController = function($timeout, ngeoCreatePrint, ngeoPrintUtils) {
    * @type {ngeo.print.Service}
    * @private
    */
-  this.print_ = ngeoCreatePrint(exports.PRINT_URL_);
+  this.print_ = ngeoCreatePrint(appURL.PRINT_PROXY);
 
   /**
    * @type {ngeo.print.Utils}

diff --git a/examples/mapquery.js b/examples/mapquery.js
@@ -3,6 +3,7 @@
  */
 const exports = {};
 
+import appURL from './url.js';
 import './mapquery.css';
 import EPSG21781 from 'ngeo/proj/EPSG21781.js';
 
@@ -16,6 +17,8 @@ import ngeoMiscBtnComponent from 'ngeo/misc/btnComponent.js';
 import ngeoMiscToolActivate from 'ngeo/misc/ToolActivate.js';
 import ngeoMiscToolActivateMgr from 'ngeo/misc/ToolActivateMgr.js';
 import ngeoQueryMapQueryComponent from 'ngeo/query/mapQueryComponent.js';
+import ngeoQueryModule from 'ngeo/query/module.js';
+
 import olMap from 'ol/Map.js';
 import olView from 'ol/View.js';
 import olLayerImage from 'ol/layer/Image.js';
@@ -32,9 +35,15 @@ exports.module = angular.module('app', [
   ngeoMiscBtnComponent.name,
   ngeoMiscToolActivateMgr.module.name,
   ngeoQueryMapQueryComponent.name,
+  ngeoQueryModule.name,
 ]);
 
 
+exports.module.run(/* @ngInject */ ($templateCache) => {
+  $templateCache.put('partials/queryresult', require('./partials/queryresult.html'));
+});
+
+
 exports.module.value('ngeoQueryOptions', {
   'limit': 20
 });
@@ -47,7 +56,7 @@ exports.module.value('ngeoQueryOptions', {
  */
 exports.queryresultComponent = {
   controller: 'AppQueryresultController',
-  template: require('./partials/queryresult.html')
+  templateUrl: 'partials/queryresult'
 };
 
 exports.module.component('appQueryresult', exports.queryresultComponent);
@@ -96,14 +105,14 @@ exports.MainController = function($scope, ngeoDataSources, ngeoToolActivateMgr)
 
   const busStopLayer = new olLayerImage({
     'source': new olSourceImageWMS({
-      'url': 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+      'url': appURL.MAPSERVER_PROXY,
       params: {'LAYERS': 'bus_stop'}
     })
   });
 
   const informationLayer = new olLayerImage({
     'source': new olSourceImageWMS({
-      'url': 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+      'url': appURL.MAPSERVER_PROXY,
       params: {'LAYERS': 'information'}
     })
   });
@@ -134,7 +143,7 @@ exports.MainController = function($scope, ngeoDataSources, ngeoToolActivateMgr)
     id: 1,
     name: 'bus_stop',
     visible: true,
-    wmsUrl: 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+    wmsUrl: appURL.MAPSERVER_PROXY,
     ogcLayers: [{
       name: 'bus_stop',
       queryable: true
@@ -145,7 +154,7 @@ exports.MainController = function($scope, ngeoDataSources, ngeoToolActivateMgr)
     id: 2,
     name: 'information',
     visible: true,
-    wmsUrl: 'https://geomapfish-demo-dc.camptocamp.com/2.4/mapserv_proxy',
+    wmsUrl: appURL.MAPSERVER_PROXY,
     ogcLayers: [{
       name: 'information',
       queryable: true

diff --git a/examples/measure.css b/examples/measure.css
@@ -38,3 +38,6 @@
 .ngeo-tooltip-static:before {
   border-top-color: #ffcc33;
 }
+.custom-select {
+  width: 4rem;
+}
diff --git a/examples/measure.html b/examples/measure.html
@@ -12,7 +12,10 @@
     <app-measuretools app-measuretools-map="::ctrl.map" app-measuretools-lang="ctrl.lang"></app-measuretools>
     <p>Use the following selector to change the language used for the measure tooltips.</p>
     <label>Select language:</label>
-    <select ng-options="lang for lang in ['en', 'fr']" ng-model="ctrl.lang"></select>
+    <select
+      class="custom-select"
+      ng-options="lang for lang in ['en', 'fr']"
+      ng-model="ctrl.lang"></select>
     <p id="desc">This example shows how to use the <code><a href="../apidoc/ngeo.interaction.MeasureLength.html" title="Read our documentation">ngeo.interaction.MeasureLength</a></code>, <code><a href="../apidoc/ngeo.interaction.MeasureArea.html" title="Read our documentation">ngeo.interaction.MeasureArea</a></code>, and <code><a href="../apidoc/ngeo.interaction.MeasureAzimut.html" title="Read our documentation">ngeo.interaction.MeasureAzimut</a></code> interactions to create measure tools for an OpenLayers map.</p>
   </body>
 </html>
diff --git a/examples/modal.html b/examples/modal.html
@@ -9,11 +9,13 @@
   </head>
   <body ng-controller="MainController as ctrl">
     <p id="desc">This example shows how to use the <code><a href="../apidoc/ngeo.message.modalComponent.html" title="Read our documentation">ngeo-modal</a></code> directive to open a modal.</p>
-    <button ng-click="ctrl.modalShown = true">Show modal</button>
+    <button
+        class="btn btn-primary"
+        ng-click="ctrl.modalShown = true">Show modal</button>
     <ngeo-modal ng-model="ctrl.modalShown">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       </div>
       <div class="modal-body">
         ...

diff --git a/examples/partials/measuretools.html b/examples/partials/measuretools.html
@@ -1,5 +1,5 @@
 <div ngeo-btn-group class="btn-group">
-  <a ngeo-btn class="btn btn-default" ng-model="$ctrl.measureLength.active">Length</a>
-  <a ngeo-btn class="btn btn-default" ng-model="$ctrl.measureArea.active">Area</a>
-  <a ngeo-btn class="btn btn-default" ng-model="$ctrl.measureAzimut.active">Azimut</a>
+  <button ngeo-btn class="btn btn-primary" ng-model="$ctrl.measureLength.active">Length</button>
+  <button ngeo-btn class="btn btn-primary" ng-model="$ctrl.measureArea.active">Area</button>
+  <button ngeo-btn class="btn btn-primary" ng-model="$ctrl.measureAzimut.active">Azimut</button>
 </div>
diff --git a/examples/partials/queryresult.html b/examples/partials/queryresult.html
@@ -3,10 +3,13 @@ <h3>Total: {{ $ctrl.result.total }}</h3>
 <ul class="nav nav-tabs"
     role="tablist">
   <li ng-repeat="source in $ctrl.result.sources"
-      role="presentation"
-      ng-class="::{active: $index == 0}">
+      role="presentation">
     <a href="#{{ ::source.label }}"
        aria-controls="{{ ::source.label }}"
+       ng-attr-aria-selected="{{ $first }}"
+       class="nav-link"
+       id="{{ ::source.label }}-tab"
+       ng-class="::{active: $first}"
        role="tab"
        data-toggle="tab">
       <span>{{ ::source.label }}</span>
@@ -20,9 +23,10 @@ <h3>Total: {{ $ctrl.result.total }}</h3>
 
 <div class="tab-content">
   <div ng-repeat="source in $ctrl.result.sources"
+       aria-labelledby="{{ ::source.label }}-tab"
        role="tabpanel"
-       class="tab-pane"
-       ng-class="::{active: $index == 0}"
+       class="tab-pane fade"
+       ng-class="::{active: $first, show: $first}"
        id="{{ ::source.label }}">
     <div ng-switch="source.features.length">
       <div ng-switch-when="0">

diff --git a/examples/search.js b/examples/search.js
@@ -3,6 +3,7 @@
  */
 const exports = {};
 
+import appURL from './url.js';
 import './search.css';
 import googAsserts from 'goog/asserts.js';
 
@@ -162,7 +163,7 @@ exports.SearchController.prototype.createVectorLayer_ = function() {
  * @private
  */
 exports.SearchController.prototype.createAndInitBloodhound_ = function(ngeoSearchCreateGeoJSONBloodhound) {
-  const url = 'https://geomapfish-demo-dc.camptocamp.com/2.4/fulltextsearch?query=%QUERY';
+  const url = appURL.SEARCH;
   const bloodhound = ngeoSearchCreateGeoJSONBloodhound(url, undefined, olProj.get('EPSG:3857'), EPSG21781);
   bloodhound.initialize();
   return bloodhound;

diff --git a/examples/url.js b/examples/url.js
@@ -0,0 +1,36 @@
+/**
+ * @module app.url
+ */
+const exports = {};
+
+/**
+ * Base url for the GeoMapFish demo server.
+ * @type {string}
+ */
+exports.GMF_DEMO = 'https://geomapfish-demo-dc.camptocamp.com/2.4/';
+
+/**
+ * WFS feature namespace for MapServer
+ * @type {string}
+ */
+exports.MAPSERVER_WFS_FEATURE_NS = 'http://mapserver.gis.umn.edu/mapserver';
+
+/**
+ * MapServer proxy
+ * @type {string}
+ */
+exports.MAPSERVER_PROXY = `${exports.GMF_DEMO}mapserv_proxy`;
+
+/**
+ * MapServer proxy
+ * @type {string}
+ */
+exports.PRINT_PROXY = `${exports.GMF_DEMO}printproxy`;
+
+/**
+ * Search service
+ * @type {string}
+ */
+exports.SEARCH = `${exports.GMF_DEMO}fulltextsearch?query=%QUERY`;
+
+export default exports;