diff --git a/csComp/directives/Accessibility/Accessibility.tpl.html b/csComp/directives/Accessibility/Accessibility.tpl.html
new file mode 100644
index 000000000..a116f5ffc
--- /dev/null
+++ b/csComp/directives/Accessibility/Accessibility.tpl.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/csComp/directives/Accessibility/Accessibility.ts b/csComp/directives/Accessibility/Accessibility.ts
new file mode 100644
index 000000000..4bdc5526a
--- /dev/null
+++ b/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
+ }
+ }
+ ]);
+}
diff --git a/csComp/directives/Accessibility/AccessibilityCtrl.ts b/csComp/directives/Accessibility/AccessibilityCtrl.ts
new file mode 100644
index 000000000..433122786
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/csComp/tsconfig.json b/csComp/tsconfig.json
index 7381d4ed3..5b873d575 100644
--- a/csComp/tsconfig.json
+++ b/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",