Made a start with an accessibility editor

csComp/directives/Accessibility/Accessibility.tpl.html

@@ -0,0 +1,19 @@
+<div data-ng-cloak class="rightpanel-content" style="width:100%">
+    <h4 class="rightpanel-header">
+        <i class="layersIcon rightpanel-header-icon" />Bereikbaarheid parameters
+    </h4>
+
+    <div data-ng-cloak style="margin:5px;overflow-y:auto">
+        <div>
+            <div class="controls">
+                <label class="editor-title input-xlarge" for="walkSpeed">Walk speed</label>
+                <input id="walkSpeed" name="textinput" type="number" placeholder="Walk speed" class="input-xlarge editor-text-input" ng-model="vm.walkSpeed">
+            </div>
+
+            <div class="controls" style="margin-top:10px">
+                <button class="btn" ng-click="vm.refreshAccessibility()">Refresh layer</button>
+            </div>
+        </div>
+
+    </div>
+</div>

csComp/directives/Accessibility/Accessibility.ts

@@ -0,0 +1,38 @@
+module Accessibility {
+    /**
+      * Config
+      */
+    var moduleName = 'csComp';
+
+    /**
+      * Module
+      */
+    export var myModule;
+    try {
+        myModule = angular.module(moduleName);
+    } catch (err) {
+        // named module does not exist, so create one
+        myModule = angular.module(moduleName, []);
+    }
+
+    /**
+      * Directive to display a feature's properties in a panel.
+      *
+      * @seealso          : http://www.youtube.com/watch?v=gjJ5vLRK8R8&list=UUGD_0i6L48hucTiiyhb5QzQ
+      * @seealso          : http://plnkr.co/edit/HyBP9d?p=preview
+      */
+    myModule.directive('accessibility', ['$compile',
+        function($compile): ng.IDirective {
+            return {
+                terminal: true,       // do not compile any other internal directives
+                restrict: 'E',        // E = elements, other options are A=attributes and C=classes
+                scope: {},         // isolated scope, separated from parent. Is however empty, as this directive is self contained by using the messagebus.
+                templateUrl: 'directives/Accessibility/Accessibility.tpl.html',
+
+                replace: true,   // Remove the directive from the DOM
+                transclude: true,   // Add elements and attributes to the template
+                controller: AccessibilityCtrl
+            }
+        }
+    ]);
+}

csComp/directives/Accessibility/AccessibilityCtrl.ts

@@ -0,0 +1,60 @@
+module Accessibility {
+
+    export interface IAccessibilityScope extends ng.IScope {
+        vm: AccessibilityCtrl;
+    }
+
+    export class AccessibilityCtrl {
+        private scope: IAccessibilityScope;
+        public layer: csComp.Services.ProjectLayer;
+        private walkSpeed: number;
+
+        // $inject annotation.
+        // It provides $injector with information about dependencies to be injected into constructor
+        // it is better to have it close to the constructor, because the parameters must match in count and type.
+        // See http://docs.angularjs.org/guide/di
+        public static $inject = [
+            '$scope',
+            '$http',
+            'mapService',
+            'layerService',
+            'messageBusService',
+            'dashboardService'
+        ];
+
+        // dependencies are injected via AngularJS $injector
+        // controller's name is registered in Application.ts and specified from ng-controller attribute in index.html
+        constructor(
+            private $scope: IAccessibilityScope,
+            private $http: ng.IHttpService,
+            private $mapService: csComp.Services.MapService,
+            private $layerService: csComp.Services.LayerService,
+            private $messageBusService: csComp.Services.MessageBusService,
+            private $dashboardService: csComp.Services.DashboardService
+            ) {
+            this.scope = $scope;
+            $scope.vm = this;
+            this.layer = $scope.$parent["data"];
+        }
+
+        public refreshAccessibility() {
+            var urlParams = this.layer.url.split('&');
+            var locationIndex = -1;
+            urlParams.some((param, index) => {
+                if (param.substring(0,9) === 'walkSpeed') {
+                    locationIndex = index;
+                    return true;
+                }
+                return false;
+            });
+            urlParams[locationIndex] = 'walkSpeed=' + this.walkSpeed;
+            this.layer.url = urlParams.join('&');
+            if (!this.layer.enabled) {
+                this.$layerService.addLayer(this.layer);
+            } else {
+                if (this.layer.layerSource) this.layer.layerSource.refreshLayer(this.layer);
+            }
+            this.$layerService.visual.rightPanelVisible = true;
+        }
+    }
+}

csComp/tsconfig.json

@@ -43,6 +43,8 @@
         "./classes/map.ts",
         "./classes/project.ts",
         "./classes/typeresource.ts",
+        "./directives/Accessibility/Accessibility.ts",
+        "./directives/Accessibility/AccessibilityCtrl.ts",
         "./directives/BaseMapList/BaseMapList.ts",
         "./directives/BaseMapList/BaseMapListCtrl.ts",
         "./directives/Charts/BarChart.ts",