From 1a64c625a5e08e5f89b58bc04c38b3fb11a1e596 Mon Sep 17 00:00:00 2001
From: Glenn Vorhes <gavorhes@wisc.edu>
Date: Sat, 23 Sep 2017 12:26:23 -0500
Subject: [PATCH] remove ie console message

---
 dist/_tests/demos/animate.d.ts          |   0
 dist/_tests/demos/animate.js            |  65 ++++++++
 dist/_tests/demos/animate.js.map        |   1 +
 dist/_tests/demos/another.d.ts          |   0
 dist/_tests/demos/another.js            |   6 +
 dist/_tests/demos/another.js.map        |   1 +
 dist/_tests/demos/compare-test.d.ts     |   0
 dist/_tests/demos/compare-test.js       |  41 +++++
 dist/_tests/demos/compare-test.js.map   |   1 +
 dist/_tests/demos/itsMap.d.ts           |   0
 dist/_tests/demos/itsMap.js             |  22 +++
 dist/_tests/demos/itsMap.js.map         |   1 +
 dist/_tests/demos/my_little_test.d.ts   |   0
 dist/_tests/demos/my_little_test.js     |  33 ++++
 dist/_tests/demos/my_little_test.js.map |   1 +
 dist/_tests/demos/range_media.d.ts      |   0
 dist/_tests/demos/range_media.js        |   9 +
 dist/_tests/demos/range_media.js.map    |   1 +
 dist/_tests/demos/reacttst.d.ts         |   0
 dist/_tests/demos/reacttst.jsx          |  16 ++
 dist/_tests/demos/reacttst.jsx.map      |   1 +
 dist/_tests/demos/simple_map.d.ts       |   0
 dist/_tests/demos/simple_map.js         |  27 +++
 dist/_tests/demos/simple_map.js.map     |   1 +
 dist/_tests/demos/slider-test.d.ts      |  23 +++
 dist/_tests/demos/slider-test.js        | 186 +++++++++++++++++++++
 dist/_tests/demos/slider-test.js.map    |   1 +
 dist/reactComponents/Slider.d.ts        |  31 ++--
 dist/reactComponents/Slider.jsx         |  39 ++++-
 dist/reactComponents/Slider.jsx.map     |   2 +-
 src/_tests/demos/animate.ts             |  86 ++++++++++
 src/_tests/demos/another.ts             |   6 +
 src/_tests/demos/compare-test.ts        |  58 +++++++
 src/_tests/demos/itsMap.ts              |  27 +++
 src/_tests/demos/my_little_test.ts      |  45 +++++
 src/_tests/demos/range_media.ts         |  14 ++
 src/_tests/demos/reacttst.tsx           |  17 ++
 src/_tests/demos/simple_map.ts          |  36 ++++
 src/_tests/demos/slider-test.ts         | 209 ++++++++++++++++++++++++
 src/reactComponents/Slider.tsx          |  86 ++++++----
 webpack.config.js                       |   2 +-
 41 files changed, 1042 insertions(+), 53 deletions(-)
 create mode 100644 dist/_tests/demos/animate.d.ts
 create mode 100644 dist/_tests/demos/animate.js
 create mode 100644 dist/_tests/demos/animate.js.map
 create mode 100644 dist/_tests/demos/another.d.ts
 create mode 100644 dist/_tests/demos/another.js
 create mode 100644 dist/_tests/demos/another.js.map
 create mode 100644 dist/_tests/demos/compare-test.d.ts
 create mode 100644 dist/_tests/demos/compare-test.js
 create mode 100644 dist/_tests/demos/compare-test.js.map
 create mode 100644 dist/_tests/demos/itsMap.d.ts
 create mode 100644 dist/_tests/demos/itsMap.js
 create mode 100644 dist/_tests/demos/itsMap.js.map
 create mode 100644 dist/_tests/demos/my_little_test.d.ts
 create mode 100644 dist/_tests/demos/my_little_test.js
 create mode 100644 dist/_tests/demos/my_little_test.js.map
 create mode 100644 dist/_tests/demos/range_media.d.ts
 create mode 100644 dist/_tests/demos/range_media.js
 create mode 100644 dist/_tests/demos/range_media.js.map
 create mode 100644 dist/_tests/demos/reacttst.d.ts
 create mode 100644 dist/_tests/demos/reacttst.jsx
 create mode 100644 dist/_tests/demos/reacttst.jsx.map
 create mode 100644 dist/_tests/demos/simple_map.d.ts
 create mode 100644 dist/_tests/demos/simple_map.js
 create mode 100644 dist/_tests/demos/simple_map.js.map
 create mode 100644 dist/_tests/demos/slider-test.d.ts
 create mode 100644 dist/_tests/demos/slider-test.js
 create mode 100644 dist/_tests/demos/slider-test.js.map
 create mode 100644 src/_tests/demos/animate.ts
 create mode 100644 src/_tests/demos/another.ts
 create mode 100644 src/_tests/demos/compare-test.ts
 create mode 100644 src/_tests/demos/itsMap.ts
 create mode 100644 src/_tests/demos/my_little_test.ts
 create mode 100644 src/_tests/demos/range_media.ts
 create mode 100644 src/_tests/demos/reacttst.tsx
 create mode 100644 src/_tests/demos/simple_map.ts
 create mode 100644 src/_tests/demos/slider-test.ts

diff --git a/dist/_tests/demos/animate.d.ts b/dist/_tests/demos/animate.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/animate.js b/dist/_tests/demos/animate.js
new file mode 100644
index 0000000..b711cad
--- /dev/null
+++ b/dist/_tests/demos/animate.js
@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var quickMap_1 = require("../../olHelpers/quickMap");
+var LayerRealEarthTile_1 = require("../../layers/LayerRealEarthTile");
+var media_control_1 = require("../../domUtil/media-control");
+var $ = require("jquery");
+var LayerBaseVectorEsri_1 = require("../../layers/LayerBaseVectorEsri");
+var LayerEsriMapServer_1 = require("../../layers/LayerEsriMapServer");
+var nexrhresStatic = new LayerRealEarthTile_1.default({
+    products: 'nexrhres',
+    id: 'nexrhres-static',
+    opacity: 0.6,
+    animate: true,
+    name: 'Hybrid Reflectivity',
+    // maxZoom: 10,
+    timeLoadCallback: function (f) {
+        console.log(f);
+    }
+});
+var d = new Date();
+var endTime = d.getTime();
+d.setHours(d.getHours() - 4);
+var startTime = d.getTime();
+var rangeStep = Math.round((endTime - startTime) / 8);
+var media = new media_control_1.MediaControl($('#control'), function (v) {
+    nexrhresStatic.setLayerTime(v);
+}, {
+    min: startTime,
+    max: endTime,
+    val: endTime,
+    step: rangeStep,
+    playInterval: 750,
+    showAsDate: true
+});
+var map = quickMap_1.quickMap();
+map.addLayer(nexrhresStatic.olLayer);
+var coordinationLayer = new LayerBaseVectorEsri_1.LayerBaseVectorEsri('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/GLRTOC/GlrtocCoordination/MapServer/0', {
+    visible: true,
+    autoLoad: true,
+    name: 'Coordination',
+    useEsriStyle: true
+});
+map.addLayer(coordinationLayer.olLayer);
+var oakRidgeLayers = [
+    ['Cameras', 'cameras33'],
+    ['HAR', 'HAR33'],
+    ['DMS', 'MessageSigns33'],
+    //['State Summary', 'statesummary'],
+    ['Traffic Control', 'TrafficControl33'],
+    ['Traffic Detection', 'TrafficDetectionMulti'],
+    ['Weather', 'Weather33']
+];
+for (var i = 0; i < oakRidgeLayers.length; i++) {
+    var oakRidgeLayer = new LayerEsriMapServer_1.LayerEsriMapServer("http://itsdpro.ornl.gov/arcgis/rest/services/ITSPublic/" + oakRidgeLayers[i][1] + "/MapServer", {
+        id: oakRidgeLayers[i][1],
+        name: oakRidgeLayers[i][0],
+        visible: true,
+        minZoom: 7,
+        zIndex: 20,
+        addPopup: true,
+        legendCollapse: true
+    });
+    map.addLayer(oakRidgeLayer.olLayer);
+}
+//# sourceMappingURL=animate.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/animate.js.map b/dist/_tests/demos/animate.js.map
new file mode 100644
index 0000000..58c67da
--- /dev/null
+++ b/dist/_tests/demos/animate.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sourceRoot":"","sources":["../../../src/_tests/demos/animate.ts"],"names":[],"mappings":";;AAAA,qDAAkD;AAClD,sEAAiE;AACjE,6DAAyE;AACzE,0BAA6B;AAC7B,wEAAqE;AACrE,sEAAmE;AAEnE,IAAI,cAAc,GAAG,IAAI,4BAAkB,CAAC;IACpC,QAAQ,EAAE,UAAU;IACpB,EAAE,EAAE,iBAAiB;IACrB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,qBAAqB;IAC3B,eAAe;IACf,gBAAgB,EAAE,UAAU,CAAC;QACzB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;CACJ,CACJ,CAAC;AAGF,IAAI,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;AACnB,IAAI,OAAO,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC;AAC1B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;AAC7B,IAAI,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC;AAC5B,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAEtD,IAAI,KAAK,GAAG,IAAI,4BAAY,CACxB,CAAC,CAAC,UAAU,CAAC,EACb,UAAC,CAAS;IACN,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;AACnC,CAAC,EACD;IACI,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,SAAS;IACf,YAAY,EAAE,GAAG;IACjB,UAAU,EAAE,IAAI;CACnB,CACJ,CAAC;AAGF,IAAI,GAAG,GAAG,mBAAQ,EAAE,CAAC;AACrB,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAGrC,IAAI,iBAAiB,GAAG,IAAI,yCAAmB,CAC3C,0GAA0G,EAC1G;IACI,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACrB,CACJ,CAAC;AAEF,GAAG,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAEpC,IAAI,cAAc,GAAG;IACjB,CAAC,SAAS,EAAE,WAAW,CAAC;IACxB,CAAC,KAAK,EAAE,OAAO,CAAC;IAChB,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACzB,oCAAoC;IACpC,CAAC,iBAAiB,EAAE,kBAAkB,CAAC;IACvC,CAAC,mBAAmB,EAAE,uBAAuB,CAAC;IAC9C,CAAC,SAAS,EAAE,WAAW,CAAC;CAC3B,CAAC;AAGF,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;IAC7C,IAAI,aAAa,GAAG,IAAI,uCAAkB,CACtC,4DAA0D,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAY,EAC1F;QACI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1B,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,IAAI;QACd,cAAc,EAAE,IAAI;KACvB,CACJ,CAAC;IACF,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC","sourcesContent":["import {quickMap} from '../../olHelpers/quickMap';\r\nimport LayerRealEarthTile from \"../../layers/LayerRealEarthTile\";\r\nimport {MediaControl, changeFunction} from \"../../domUtil/media-control\";\r\nimport $ = require('jquery');\r\nimport {LayerBaseVectorEsri} from \"../../layers/LayerBaseVectorEsri\";\r\nimport {LayerEsriMapServer} from \"../../layers/LayerEsriMapServer\";\r\n\r\nlet nexrhresStatic = new LayerRealEarthTile({\r\n        products: 'nexrhres',\r\n        id: 'nexrhres-static',\r\n        opacity: 0.6,\r\n        animate: true,\r\n        name: 'Hybrid Reflectivity',\r\n        // maxZoom: 10,\r\n        timeLoadCallback: function (f) {\r\n            console.log(f);\r\n        }\r\n    }\r\n);\r\n\r\n\r\nlet d = new Date();\r\nlet endTime = d.getTime();\r\nd.setHours(d.getHours() - 4);\r\nlet startTime = d.getTime();\r\nlet rangeStep = Math.round((endTime - startTime) / 8);\r\n\r\nlet media = new MediaControl(\r\n    $('#control'),\r\n    (v: number) => {\r\n        nexrhresStatic.setLayerTime(v);\r\n    },\r\n    {\r\n        min: startTime,\r\n        max: endTime,\r\n        val: endTime,\r\n        step: rangeStep,\r\n        playInterval: 750,\r\n        showAsDate: true\r\n    }\r\n);\r\n\r\n\r\nlet map = quickMap();\r\nmap.addLayer(nexrhresStatic.olLayer);\r\n\r\n\r\nlet coordinationLayer = new LayerBaseVectorEsri(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/GLRTOC/GlrtocCoordination/MapServer/0',\r\n    {\r\n        visible: true,\r\n        autoLoad: true,\r\n        name: 'Coordination',\r\n        useEsriStyle: true\r\n    }\r\n);\r\n\r\nmap.addLayer(coordinationLayer.olLayer);\r\n\r\n    let oakRidgeLayers = [\r\n        ['Cameras', 'cameras33'],\r\n        ['HAR', 'HAR33'],\r\n        ['DMS', 'MessageSigns33'],\r\n        //['State Summary', 'statesummary'],\r\n        ['Traffic Control', 'TrafficControl33'],\r\n        ['Traffic Detection', 'TrafficDetectionMulti'],\r\n        ['Weather', 'Weather33']\r\n    ];\r\n\r\n\r\n    for (let i = 0; i < oakRidgeLayers.length; i++) {\r\n        let oakRidgeLayer = new LayerEsriMapServer(\r\n            `http://itsdpro.ornl.gov/arcgis/rest/services/ITSPublic/${oakRidgeLayers[i][1]}/MapServer`,\r\n            {\r\n                id: oakRidgeLayers[i][1],\r\n                name: oakRidgeLayers[i][0],\r\n                visible: true,\r\n                minZoom: 7,\r\n                zIndex: 20,\r\n                addPopup: true,\r\n                legendCollapse: true\r\n            }\r\n        );\r\n        map.addLayer(oakRidgeLayer.olLayer);\r\n    }\r\n\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/another.d.ts b/dist/_tests/demos/another.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/another.js b/dist/_tests/demos/another.js
new file mode 100644
index 0000000..8080833
--- /dev/null
+++ b/dist/_tests/demos/another.js
@@ -0,0 +1,6 @@
+/**
+ * Created by gavorhes on 9/22/2016.
+ */
+console.log('here is another');
+console.log('here is another');
+//# sourceMappingURL=another.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/another.js.map b/dist/_tests/demos/another.js.map
new file mode 100644
index 0000000..ddf4782
--- /dev/null
+++ b/dist/_tests/demos/another.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"another.js","sourceRoot":"","sources":["../../../src/_tests/demos/another.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAC/B,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["/**\r\n * Created by gavorhes on 9/22/2016.\r\n */\r\n\r\nconsole.log('here is another');\r\nconsole.log('here is another');"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/compare-test.d.ts b/dist/_tests/demos/compare-test.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/compare-test.js b/dist/_tests/demos/compare-test.js
new file mode 100644
index 0000000..0214af1
--- /dev/null
+++ b/dist/_tests/demos/compare-test.js
@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Created by gavorhes on 6/1/2016.
+ */
+var quickMap_1 = require("../../olHelpers/quickMap");
+var layerSwipe_1 = require("../../olHelpers/layerSwipe");
+var LayerEsriMapServer_1 = require("../../layers/LayerEsriMapServer");
+var map = quickMap_1.quickMap();
+var swiper = new layerSwipe_1.default(map);
+var wisDotRegions = new LayerEsriMapServer_1.LayerEsriMapServer('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/Metamanager_regions/MapServer', {
+    minZoom: 6,
+    maxZoom: 12,
+    name: 'WisDOT Regions'
+});
+var metamanagerSegments = new LayerEsriMapServer_1.LayerEsriMapServer('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/MM_All_Segments/MapServer', {
+    minZoom: 7,
+    visible: true,
+    name: 'Metamanager Segments'
+});
+var truckSpeed2014 = new LayerEsriMapServer_1.LayerEsriMapServer('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/NPMRDS/compareDynamic/MapServer', {
+    minZoom: 7,
+    visible: true,
+    name: 'truck2014',
+    showLayers: [8]
+});
+var truckSpeed2015 = new LayerEsriMapServer_1.LayerEsriMapServer('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/NPMRDS/compareDynamic/MapServer', {
+    minZoom: 7,
+    visible: true,
+    name: 'truck2015',
+    showLayers: [9]
+});
+map.addLayer(wisDotRegions.olLayer);
+map.addLayer(truckSpeed2014.olLayer);
+map.addLayer(truckSpeed2015.olLayer);
+map.addLayer(metamanagerSegments.olLayer);
+swiper.addLeftLayer(wisDotRegions);
+swiper.addRightLayer(metamanagerSegments);
+swiper.addLeftLayer(truckSpeed2014);
+swiper.addRightLayer(truckSpeed2015);
+//# sourceMappingURL=compare-test.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/compare-test.js.map b/dist/_tests/demos/compare-test.js.map
new file mode 100644
index 0000000..1f8b632
--- /dev/null
+++ b/dist/_tests/demos/compare-test.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"compare-test.js","sourceRoot":"","sources":["../../../src/_tests/demos/compare-test.ts"],"names":[],"mappings":";;AAAA;;GAEG;AACH,qDAAkD;AAClD,yDAAoD;AACpD,sEAAmE;AAEnE,IAAI,GAAG,GAAG,mBAAQ,EAAE,CAAC;AAGrB,IAAI,MAAM,GAAG,IAAI,oBAAU,CAAC,GAAG,CAAC,CAAC;AAGjC,IAAI,aAAa,GAAG,IAAI,uCAAkB,CACtC,8GAA8G,EAC9G;IACI,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,gBAAgB;CACzB,CAAC,CAAC;AAEP,IAAI,mBAAmB,GAAG,IAAI,uCAAkB,CAC5C,0GAA0G,EAC1G;IACI,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,sBAAsB;CAC/B,CAAC,CAAC;AAEP,IAAI,cAAc,GAAG,IAAI,uCAAkB,CACvC,oGAAoG,EACpG;IACI,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,CAAC,CAAC,CAAC;CAClB,CAAC,CAAC;AAEP,IAAI,cAAc,GAAG,IAAI,uCAAkB,CACvC,oGAAoG,EACpG;IACI,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,CAAC,CAAC,CAAC;CAClB,CAAC,CAAC;AAEP,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACpC,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACrC,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACrC,GAAG,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAG1C,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;AACnC,MAAM,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;AAE1C,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;AACpC,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC","sourcesContent":["/**\r\n * Created by gavorhes on 6/1/2016.\r\n */\r\nimport {quickMap} from '../../olHelpers/quickMap';\r\nimport LayerSwipe from '../../olHelpers/layerSwipe';\r\nimport {LayerEsriMapServer} from '../../layers/LayerEsriMapServer';\r\n\r\nlet map = quickMap();\r\n\r\n\r\nlet swiper = new LayerSwipe(map);\r\n\r\n\r\nlet wisDotRegions = new LayerEsriMapServer(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/Metamanager_regions/MapServer',\r\n    {\r\n        minZoom: 6,\r\n        maxZoom: 12,\r\n        name: 'WisDOT Regions'\r\n    });\r\n\r\nlet metamanagerSegments = new LayerEsriMapServer(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/MM_All_Segments/MapServer',\r\n    {\r\n        minZoom: 7,\r\n        visible: true,\r\n        name: 'Metamanager Segments'\r\n    });\r\n\r\nlet truckSpeed2014 = new LayerEsriMapServer(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/NPMRDS/compareDynamic/MapServer',\r\n    {\r\n        minZoom: 7,\r\n        visible: true,\r\n        name: 'truck2014',\r\n        showLayers: [8]\r\n    });\r\n\r\nlet truckSpeed2015 = new LayerEsriMapServer(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/NPMRDS/compareDynamic/MapServer',\r\n    {\r\n        minZoom: 7,\r\n        visible: true,\r\n        name: 'truck2015',\r\n        showLayers: [9]\r\n    });\r\n\r\nmap.addLayer(wisDotRegions.olLayer);\r\nmap.addLayer(truckSpeed2014.olLayer);\r\nmap.addLayer(truckSpeed2015.olLayer);\r\nmap.addLayer(metamanagerSegments.olLayer);\r\n\r\n\r\nswiper.addLeftLayer(wisDotRegions);\r\nswiper.addRightLayer(metamanagerSegments);\r\n\r\nswiper.addLeftLayer(truckSpeed2014);\r\nswiper.addRightLayer(truckSpeed2015);\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/itsMap.d.ts b/dist/_tests/demos/itsMap.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/itsMap.js b/dist/_tests/demos/itsMap.js
new file mode 100644
index 0000000..77c3114
--- /dev/null
+++ b/dist/_tests/demos/itsMap.js
@@ -0,0 +1,22 @@
+/**
+ * Created by gavorhes on 12/18/2015.
+ */
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ItsLayerCollection_1 = require("../../collections/ItsLayerCollection");
+var LayerLegend_1 = require("../../collections/LayerLegend");
+var quickMap_1 = require("../../olHelpers/quickMap");
+var map = quickMap_1.default();
+window['map'] = map;
+var itsLayerCollection = new ItsLayerCollection_1.default(map);
+var layerArray = [
+    {
+        groupName: 'ITS Inventory Layers',
+        collapse: false,
+        addCheck: true,
+        items: itsLayerCollection.layers
+    }
+];
+var legend = new LayerLegend_1.default(layerArray, 'legend-container', {});
+console.log('it works');
+//# sourceMappingURL=itsMap.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/itsMap.js.map b/dist/_tests/demos/itsMap.js.map
new file mode 100644
index 0000000..a88ab24
--- /dev/null
+++ b/dist/_tests/demos/itsMap.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"itsMap.js","sourceRoot":"","sources":["../../../src/_tests/demos/itsMap.ts"],"names":[],"mappings":"AAAA;;GAEG;;;AAGH,2EAAsE;AACtE,6DAAwD;AACxD,qDAAgD;AAEhD,IAAI,GAAG,GAAG,kBAAQ,EAAE,CAAC;AAErB,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;AAEpB,IAAI,kBAAkB,GAAG,IAAI,4BAAkB,CAAC,GAAG,CAAC,CAAC;AAErD,IAAI,UAAU,GAAG;IACb;QACI,SAAS,EAAE,sBAAsB;QACjC,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,kBAAkB,CAAC,MAAM;KACnC;CACJ,CAAC;AAEF,IAAI,MAAM,GAAG,IAAI,qBAAW,CAAC,UAAU,EAAE,kBAAkB,EAAE,EAAE,CAAC,CAAC;AAEjE,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC","sourcesContent":["/**\r\n * Created by gavorhes on 12/18/2015.\r\n */\r\n\r\n\r\nimport ItsLayerCollection from '../../collections/ItsLayerCollection';\r\nimport LayerLegend from '../../collections/LayerLegend';\r\nimport quickMap from '../../olHelpers/quickMap';\r\n\r\nlet map = quickMap();\r\n\r\nwindow['map'] = map;\r\n\r\nlet itsLayerCollection = new ItsLayerCollection(map);\r\n\r\nlet layerArray = [\r\n    {\r\n        groupName: 'ITS Inventory Layers',\r\n        collapse: false,\r\n        addCheck: true,\r\n        items: itsLayerCollection.layers\r\n    }\r\n];\r\n\r\nlet legend = new LayerLegend(layerArray, 'legend-container', {});\r\n\r\nconsole.log('it works');\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/my_little_test.d.ts b/dist/_tests/demos/my_little_test.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/my_little_test.js b/dist/_tests/demos/my_little_test.js
new file mode 100644
index 0000000..7117456
--- /dev/null
+++ b/dist/_tests/demos/my_little_test.js
@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// let g = new
+var media_control_1 = require("../../domUtil/media-control");
+//
+//
+console.log('eat this fish');
+console.log('eat this fish');
+console.log('eat this bird');
+//
+// let g = new ol3.source.Vector();
+//
+// console.log(olx);
+console.log('i am here5');
+function me(eat) {
+    if (eat === void 0) { eat = 1; }
+    console.log(eat, 'one');
+}
+me(1);
+var control = new media_control_1.MediaControl('map');
+//
+//
+// console.log(ol3);
+//
+//
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log('here');
+//
+//# sourceMappingURL=my_little_test.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/my_little_test.js.map b/dist/_tests/demos/my_little_test.js.map
new file mode 100644
index 0000000..1fddec5
--- /dev/null
+++ b/dist/_tests/demos/my_little_test.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"my_little_test.js","sourceRoot":"","sources":["../../../src/_tests/demos/my_little_test.ts"],"names":[],"mappings":";;AACA,cAAc;AAKd,6DAAwD;AACxD,EAAE;AACF,EAAE;AAGF,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC7B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC7B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAE7B,EAAE;AACF,mCAAmC;AACnC,EAAE;AACF,oBAAoB;AAGpB,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAI1B,YAAa,GAAe;IAAf,oBAAA,EAAA,OAAe;IACxB,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC5B,CAAC;AAED,EAAE,CAAC,CAAC,CAAC,CAAC;AAEN,IAAI,OAAO,GAAG,IAAI,4BAAY,CAAC,KAAK,CAAC,CAAC;AAEtC,EAAE;AACF,EAAE;AACF,oBAAoB;AACpB,EAAE;AACF,EAAE;AACF,0CAA0C;AAC1C,0CAA0C;AAC1C,0CAA0C;AAC1C,0CAA0C;AAC1C,0CAA0C;AAC1C,uBAAuB;AACvB,EAAE","sourcesContent":["import ol = require('custom-ol');\r\n// let g = new\r\n\r\n\r\n\r\n\r\nimport {MediaControl} from '../../domUtil/media-control'\r\n//\r\n//\r\n\r\n\r\nconsole.log('eat this fish');\r\nconsole.log('eat this fish');\r\nconsole.log('eat this bird');\r\n\r\n//\r\n// let g = new ol3.source.Vector();\r\n//\r\n// console.log(olx);\r\n\r\n\r\nconsole.log('i am here5');\r\n\r\n\r\n\r\nfunction me (eat: number = 1){\r\n    console.log(eat, 'one');\r\n}\r\n\r\nme(1);\r\n\r\nvar control = new MediaControl('map');\r\n\r\n//\r\n//\r\n// console.log(ol3);\r\n//\r\n//\r\n// console.log(definedAndNotNull(\"fish\"));\r\n// console.log(definedAndNotNull(\"fish\"));\r\n// console.log(definedAndNotNull(\"fish\"));\r\n// console.log(definedAndNotNull(\"fish\"));\r\n// console.log(definedAndNotNull(\"fish\"));\r\n// console.log('here');\r\n//\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/range_media.d.ts b/dist/_tests/demos/range_media.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/range_media.js b/dist/_tests/demos/range_media.js
new file mode 100644
index 0000000..abe7b34
--- /dev/null
+++ b/dist/_tests/demos/range_media.js
@@ -0,0 +1,9 @@
+/**
+ * Created by gavorhes on 10/10/2016.
+ */
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var day_range_1 = require("../../domUtil/day-range");
+var $ = require("jquery");
+var dayRange = new day_range_1.DayRange($('#day-range'), 10);
+//# sourceMappingURL=range_media.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/range_media.js.map b/dist/_tests/demos/range_media.js.map
new file mode 100644
index 0000000..4e3fc7d
--- /dev/null
+++ b/dist/_tests/demos/range_media.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"range_media.js","sourceRoot":"","sources":["../../../src/_tests/demos/range_media.ts"],"names":[],"mappings":"AAAA;;GAEG;;;AAEH,qDAAiD;AACjD,0BAA6B;AAE7B,IAAI,QAAQ,GAAG,IAAI,oBAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC","sourcesContent":["/**\r\n * Created by gavorhes on 10/10/2016.\r\n */\r\n\r\nimport {DayRange} from '../../domUtil/day-range';\r\nimport $ = require('jquery');\r\n\r\nlet dayRange = new DayRange($('#day-range'), 10);\r\n\r\n\r\n\r\n\r\n\r\n\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/reacttst.d.ts b/dist/_tests/demos/reacttst.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/reacttst.jsx b/dist/_tests/demos/reacttst.jsx
new file mode 100644
index 0000000..420ebc5
--- /dev/null
+++ b/dist/_tests/demos/reacttst.jsx
@@ -0,0 +1,16 @@
+/**
+ * Created by gavorhes on 9/22/2016.
+ */
+// import * as React from "react";
+// import * as ReactDOM from "react/lib/";
+//
+// import { Hello } from "../_scratch/Hello";
+//
+// console.log('I am in a tsx file for some reason');
+//
+// ReactDOM.render(
+//     <Hello compiler="TypeScript" framework="React" />,
+//     document.getElementById("example")
+// );
+//
+//# sourceMappingURL=reacttst.jsx.map
\ No newline at end of file
diff --git a/dist/_tests/demos/reacttst.jsx.map b/dist/_tests/demos/reacttst.jsx.map
new file mode 100644
index 0000000..2c1ea81
--- /dev/null
+++ b/dist/_tests/demos/reacttst.jsx.map
@@ -0,0 +1 @@
+{"version":3,"file":"reacttst.jsx","sourceRoot":"","sources":["../../../src/_tests/demos/reacttst.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,kCAAkC;AAClC,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,qDAAqD;AACrD,EAAE;AACF,mBAAmB;AACnB,yDAAyD;AACzD,yCAAyC;AACzC,KAAK;AACL,EAAE","sourcesContent":["/**\r\n * Created by gavorhes on 9/22/2016.\r\n */\r\n\r\n// import * as React from \"react\";\r\n// import * as ReactDOM from \"react/lib/\";\r\n//\r\n// import { Hello } from \"../_scratch/Hello\";\r\n//\r\n// console.log('I am in a tsx file for some reason');\r\n//\r\n// ReactDOM.render(\r\n//     <Hello compiler=\"TypeScript\" framework=\"React\" />,\r\n//     document.getElementById(\"example\")\r\n// );\r\n//\r\n\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/simple_map.d.ts b/dist/_tests/demos/simple_map.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/dist/_tests/demos/simple_map.js b/dist/_tests/demos/simple_map.js
new file mode 100644
index 0000000..f7028c4
--- /dev/null
+++ b/dist/_tests/demos/simple_map.js
@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Created by gavorhes on 9/23/2016.
+ */
+var quickMap_1 = require("../../olHelpers/quickMap");
+var LayerEsriMapServer_1 = require("../../layers/LayerEsriMapServer");
+var LayerLegend_1 = require("../../collections/LayerLegend");
+var map = quickMap_1.quickMap();
+var wisDotRegions = new LayerEsriMapServer_1.LayerEsriMapServer('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/Metamanager_regions/MapServer');
+var sixYearPlan = new LayerEsriMapServer_1.LayerEsriMapServer('http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/SixYearPlan/MapServer', { name: 'Six Year Plan', legendCollapse: true });
+map.addLayer(wisDotRegions.olLayer);
+map.addLayer(sixYearPlan.olLayer);
+var layerArray = [
+    wisDotRegions,
+    sixYearPlan
+    // tipConfig.tipSegmentLayer,
+    // tipConfig.metamanagerSegments,
+    // {
+    //     groupName: 'ITS Inventory Layers',
+    //     collapse: true,
+    //     addCheck: false,
+    //     items: tipConfig.itsLayerCollection.layers
+    // }
+];
+var legend = new LayerLegend_1.default(layerArray, 'legend-container', {});
+//# sourceMappingURL=simple_map.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/simple_map.js.map b/dist/_tests/demos/simple_map.js.map
new file mode 100644
index 0000000..24f68c2
--- /dev/null
+++ b/dist/_tests/demos/simple_map.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"simple_map.js","sourceRoot":"","sources":["../../../src/_tests/demos/simple_map.ts"],"names":[],"mappings":";;AAAA;;GAEG;AACH,qDAAkD;AAClD,sEAAmE;AACnE,6DAAwD;AAGxD,IAAI,GAAG,GAAG,mBAAQ,EAAE,CAAC;AAErB,IAAI,aAAa,GAAG,IAAI,uCAAkB,CACtC,8GAA8G,CAAC,CAAC;AAEpH,IAAI,WAAW,GAAG,IAAI,uCAAkB,CACpC,sGAAsG,EAAE,EAAC,IAAI,EAAE,eAAe,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC,CAAC;AAE3J,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACpC,GAAG,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAElC,IAAI,UAAU,GAAG;IACb,aAAa;IACb,WAAW;IACX,6BAA6B;IAC7B,iCAAiC;IACjC,IAAI;IACJ,yCAAyC;IACzC,sBAAsB;IACtB,uBAAuB;IACvB,iDAAiD;IACjD,IAAI;CACP,CAAC;AAEF,IAAI,MAAM,GAAG,IAAI,qBAAW,CAAC,UAAU,EAAE,kBAAkB,EAAE,EAAE,CAAC,CAAC","sourcesContent":["/**\r\n * Created by gavorhes on 9/23/2016.\r\n */\r\nimport {quickMap} from '../../olHelpers/quickMap';\r\nimport {LayerEsriMapServer} from \"../../layers/LayerEsriMapServer\";\r\nimport LayerLegend from '../../collections/LayerLegend';\r\n\r\n\r\nlet map = quickMap();\r\n\r\nlet wisDotRegions = new LayerEsriMapServer(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/Metamanager_regions/MapServer');\r\n\r\nlet sixYearPlan = new LayerEsriMapServer(\r\n    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/SixYearPlan/MapServer', {name: 'Six Year Plan', legendCollapse: true});\r\n\r\nmap.addLayer(wisDotRegions.olLayer);\r\nmap.addLayer(sixYearPlan.olLayer);\r\n\r\nlet layerArray = [\r\n    wisDotRegions,\r\n    sixYearPlan\r\n    // tipConfig.tipSegmentLayer,\r\n    // tipConfig.metamanagerSegments,\r\n    // {\r\n    //     groupName: 'ITS Inventory Layers',\r\n    //     collapse: true,\r\n    //     addCheck: false,\r\n    //     items: tipConfig.itsLayerCollection.layers\r\n    // }\r\n];\r\n\r\nlet legend = new LayerLegend(layerArray, 'legend-container', {});\r\n\r\n\r\n\r\n"]}
\ No newline at end of file
diff --git a/dist/_tests/demos/slider-test.d.ts b/dist/_tests/demos/slider-test.d.ts
new file mode 100644
index 0000000..c08d028
--- /dev/null
+++ b/dist/_tests/demos/slider-test.d.ts
@@ -0,0 +1,23 @@
+/// <reference types="jquery" />
+/// <reference types="jqueryui" />
+/**
+ * Created by gavorhes on 6/22/2016.
+ */
+import { TipSliders, TipPresetConfig, TipSliderConfig } from '../../collections/Sliders';
+import ol = require('custom-ol');
+import 'jquery-ui';
+export interface ITipConfig {
+    slidersConfig: Array<TipSliderConfig>;
+    presetConfig: Array<TipPresetConfig>;
+    tipSegmentLayerMinZoom: number;
+    sliders: TipSliders;
+    _map: ol.Map;
+    $loadingGif: JQuery;
+    $presetSelector: JQuery;
+    $regionSelector: JQuery;
+    $versionSelector: JQuery;
+    itsLayerCollection: any;
+    tipSegmentLayer: any;
+    metamanagerSegments: any;
+}
+export declare const tipConfig: ITipConfig;
diff --git a/dist/_tests/demos/slider-test.js b/dist/_tests/demos/slider-test.js
new file mode 100644
index 0000000..9f652e1
--- /dev/null
+++ b/dist/_tests/demos/slider-test.js
@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Created by gavorhes on 6/22/2016.
+ */
+var Sliders_1 = require("../../collections/Sliders");
+var $ = require("jquery");
+require("jquery-ui");
+exports.tipConfig = {
+    $loadingGif: $('#loading-gif'),
+    $presetSelector: $('#preset-selector'),
+    $regionSelector: $('#region-selector'),
+    $versionSelector: $('#version-selector'),
+    tipSegmentLayerMinZoom: 10,
+    slidersConfig: [
+        {
+            label: 'AADT',
+            yearOptions: [
+                { label: '1', column: 'aadtyr_1' }
+            ]
+        },
+        {
+            label: 'AADT Future',
+            yearOptions: [
+                { label: '5', column: 'aadtyr_5' },
+                { label: '10', column: 'aadtyr_10' },
+                { label: '15', column: 'aadtyr_15' },
+                { label: '20', column: 'aadtyr_20' }
+            ]
+        },
+        {
+            label: 'Growth',
+            yearOptions: [
+                { label: '5', column: 'growth_5' },
+                { label: '10', column: 'growth_10' },
+                { label: '15', column: 'growth_15' },
+                { label: '20', column: 'growth_20' }
+            ]
+        },
+        {
+            label: 'Truck',
+            yearOptions: [
+                { label: '1', column: 'trkdyr_1' },
+                { label: '20', column: 'trkdyr_20' }
+            ]
+        },
+        {
+            label: 'LOS',
+            yearOptions: [
+                { label: '1', column: 'losyr_1' }
+            ]
+        },
+        {
+            label: 'LOS Future',
+            yearOptions: [
+                { label: '5', column: 'losyr_5' },
+                { label: '10', column: 'losyr_10' },
+                { label: '15', column: 'losyr_15' },
+                { label: '20', column: 'losyr_20' }
+            ]
+        },
+        {
+            label: 'Crash Rate',
+            yearOptions: [
+                { label: 1, column: 'crash_rate' }
+            ]
+        },
+        {
+            label: 'Severity',
+            yearOptions: [
+                { label: 1, column: 'crash_severity' }
+            ]
+        },
+        {
+            label: 'Weather',
+            yearOptions: [
+                { label: 1, column: 'weather' }
+            ]
+        },
+        {
+            label: 'Event',
+            yearOptions: [
+                { label: 1, column: 'event' }
+            ]
+        }
+    ],
+    presetConfig: [
+        {
+            label: 'Default TIP',
+            presets: [
+                { column: 'aadtyr_1', value: 10.0 },
+                { column: 'aadtyr_20', value: 7.0 },
+                { column: 'growth_20', value: 7.0 },
+                { column: 'trkdyr_1', value: 4.0 },
+                { column: 'losyr_1', value: 12.0 },
+                { column: 'losyr_20', value: 12.0 },
+                { column: 'crash_rate', value: 15.0 },
+                { column: 'crash_severity', value: 13.0 },
+                { column: 'weather', value: 9.0 },
+                { column: 'event', value: 11.0 }
+            ]
+        },
+        {
+            label: 'Safety',
+            presets: [
+                { column: 'aadtyr_1', value: 20.0 },
+                { column: 'aadtyr_20', value: 0.0 },
+                { column: 'growth_20', value: 0.0 },
+                { column: 'trkdyr_1', value: 0.0 },
+                { column: 'losyr_1', value: 0.0 },
+                { column: 'losyr_20', value: 0.0 },
+                { column: 'crash_rate', value: 40.0 },
+                { column: 'crash_severity', value: 40.0 },
+                { column: 'weather', value: 0.0 },
+                { column: 'event', value: 0.0 }
+            ]
+        },
+        {
+            label: 'Mobility Present',
+            presets: [
+                { column: 'aadtyr_1', value: 25.0 },
+                { column: 'aadtyr_20', value: 25.0 },
+                { column: 'growth_20', value: 0.0 },
+                { column: 'trkdyr_1', value: 25.0 },
+                { column: 'losyr_1', value: 25.0 },
+                { column: 'losyr_20', value: 0.0 },
+                { column: 'crash_rate', value: 0.0 },
+                { column: 'crash_severity', value: 0.0 },
+                { column: 'weather', value: 0.0 },
+                { column: 'event', value: 0.0 }
+            ]
+        },
+        {
+            label: 'Mobility Future',
+            presets: [
+                { column: 'aadtyr_1', value: 0.0 },
+                { column: 'aadtyr_20', value: 25.0 },
+                { column: 'growth_20', value: 25.0 },
+                { column: 'trkdyr_1', value: 25.0 },
+                { column: 'losyr_1', value: 0.0 },
+                { column: 'losyr_20', value: 25.0 },
+                { column: 'crash_rate', value: 0.0 },
+                { column: 'crash_severity', value: 0.0 },
+                { column: 'weather', value: 0.0 },
+                { column: 'event', value: 0.0 }
+            ]
+        },
+        {
+            label: 'Service',
+            presets: [
+                { column: 'aadtyr_1', value: 30.0 },
+                { column: 'aadtyr_20', value: 0.0 },
+                { column: 'growth_20', value: 10.0 },
+                { column: 'trkdyr_1', value: 0.0 },
+                { column: 'losyr_1', value: 30.0 },
+                { column: 'losyr_20', value: 30.0 },
+                { column: 'crash_rate', value: 0.0 },
+                { column: 'crash_severity', value: 0.0 },
+                { column: 'weather', value: 0.0 },
+                { column: 'event', value: 0.0 }
+            ]
+        },
+        {
+            label: 'Freight Performance',
+            presets: [
+                { column: 'aadtyr_1', value: 20.0 },
+                { column: 'aadtyr_20', value: 0.0 },
+                { column: 'growth_20', value: 0.0 },
+                { column: 'trkdyr_1', value: 60.0 },
+                { column: 'losyr_1', value: 20.0 },
+                { column: 'losyr_20', value: 0.0 },
+                { column: 'crash_rate', value: 0.0 },
+                { column: 'crash_severity', value: 0.0 },
+                { column: 'weather', value: 0.0 },
+                { column: 'event', value: 0.0 }
+            ]
+        }
+    ]
+};
+exports.tipConfig.$presetSelector.append('<option value="0" disabled=>Custom</option>');
+var sliders = new Sliders_1.TipSliders(exports.tipConfig.slidersConfig, exports.tipConfig.presetConfig, 'slider-container', exports.tipConfig.$presetSelector, exports.tipConfig.$regionSelector, exports.tipConfig.$regionSelector, function (chg) { console.log(chg); });
+// sliders.changedCallback = (chg) => {console.log(chg)};
+window['glob'] = sliders;
+window['hat'] = sliders;
+window['bird'] = sliders;
+//# sourceMappingURL=slider-test.js.map
\ No newline at end of file
diff --git a/dist/_tests/demos/slider-test.js.map b/dist/_tests/demos/slider-test.js.map
new file mode 100644
index 0000000..64f9671
--- /dev/null
+++ b/dist/_tests/demos/slider-test.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"slider-test.js","sourceRoot":"","sources":["../../../src/_tests/demos/slider-test.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by gavorhes on 6/22/2016.\r\n */\r\nimport {TipSliders, TipPresetConfig, TipSliderConfig} from '../../collections/Sliders';\r\nimport $ = require('jquery');\r\nimport ol = require('custom-ol');\r\nimport 'jquery-ui';\r\n\r\n\r\n\r\nexport interface ITipConfig{\r\n    slidersConfig: Array<TipSliderConfig>;\r\n    presetConfig: Array<TipPresetConfig>;\r\n    tipSegmentLayerMinZoom: number;\r\n    sliders: TipSliders;\r\n    _map: ol.Map;\r\n    $loadingGif: JQuery;\r\n    $presetSelector: JQuery;\r\n    $regionSelector: JQuery;\r\n    $versionSelector: JQuery;\r\n    itsLayerCollection: any;\r\n    tipSegmentLayer: any;\r\n    metamanagerSegments: any;\r\n}\r\n\r\nexport const tipConfig = {\r\n    $loadingGif: $('#loading-gif'),\r\n    $presetSelector: $('#preset-selector'),\r\n    $regionSelector: $('#region-selector'),\r\n    $versionSelector: $('#version-selector'),\r\n    tipSegmentLayerMinZoom: 10,\r\n    slidersConfig: [\r\n            {\r\n                label: 'AADT',\r\n                yearOptions: [\r\n                    {label: '1', column: 'aadtyr_1'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'AADT Future',\r\n                yearOptions: [\r\n                    {label: '5', column: 'aadtyr_5'},\r\n                    {label: '10', column: 'aadtyr_10'},\r\n                    {label: '15', column: 'aadtyr_15'},\r\n                    {label: '20', column: 'aadtyr_20'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Growth',\r\n                yearOptions: [\r\n                    {label: '5', column: 'growth_5'},\r\n                    {label: '10', column: 'growth_10'},\r\n                    {label: '15', column: 'growth_15'},\r\n                    {label: '20', column: 'growth_20'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Truck',\r\n                yearOptions: [\r\n                    {label: '1', column: 'trkdyr_1'},\r\n                    {label: '20', column: 'trkdyr_20'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'LOS',\r\n                yearOptions: [\r\n                    {label: '1', column: 'losyr_1'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'LOS Future',\r\n                yearOptions: [\r\n                    {label: '5', column: 'losyr_5'},\r\n                    {label: '10', column: 'losyr_10'},\r\n                    {label: '15', column: 'losyr_15'},\r\n                    {label: '20', column: 'losyr_20'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Crash Rate',\r\n                yearOptions: [\r\n                    {label: 1, column: 'crash_rate'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Severity',\r\n                yearOptions: [\r\n                    {label: 1, column: 'crash_severity'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Weather',\r\n                yearOptions: [\r\n                    {label: 1, column: 'weather'}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Event',\r\n                yearOptions: [\r\n                    {label: 1, column: 'event'}\r\n                ]\r\n            }\r\n        ] as Array<TipSliderConfig>,\r\n    presetConfig: [\r\n            {\r\n                label: 'Default TIP',\r\n                presets: [\r\n                    {column: 'aadtyr_1', value: 10.0},\r\n                    {column: 'aadtyr_20', value: 7.0},\r\n                    {column: 'growth_20', value: 7.0},\r\n                    {column: 'trkdyr_1', value: 4.0},\r\n                    {column: 'losyr_1', value: 12.0},\r\n                    {column: 'losyr_20', value: 12.0},\r\n                    {column: 'crash_rate', value: 15.0},\r\n                    {column: 'crash_severity', value: 13.0},\r\n                    {column: 'weather', value: 9.0},\r\n                    {column: 'event', value: 11.0}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Safety',\r\n                presets: [\r\n                    {column: 'aadtyr_1', value: 20.0},\r\n                    {column: 'aadtyr_20', value: 0.0},\r\n                    {column: 'growth_20', value: 0.0},\r\n                    {column: 'trkdyr_1', value: 0.0},\r\n                    {column: 'losyr_1', value: 0.0},\r\n                    {column: 'losyr_20', value: 0.0},\r\n                    {column: 'crash_rate', value: 40.0},\r\n                    {column: 'crash_severity', value: 40.0},\r\n                    {column: 'weather', value: 0.0},\r\n                    {column: 'event', value: 0.0}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Mobility Present',\r\n                presets: [\r\n                    {column: 'aadtyr_1', value: 25.0},\r\n                    {column: 'aadtyr_20', value: 25.0},\r\n                    {column: 'growth_20', value: 0.0},\r\n                    {column: 'trkdyr_1', value: 25.0},\r\n                    {column: 'losyr_1', value: 25.0},\r\n                    {column: 'losyr_20', value: 0.0},\r\n                    {column: 'crash_rate', value: 0.0},\r\n                    {column: 'crash_severity', value: 0.0},\r\n                    {column: 'weather', value: 0.0},\r\n                    {column: 'event', value: 0.0}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Mobility Future',\r\n                presets: [\r\n                    {column: 'aadtyr_1', value: 0.0},\r\n                    {column: 'aadtyr_20', value: 25.0},\r\n                    {column: 'growth_20', value: 25.0},\r\n                    {column: 'trkdyr_1', value: 25.0},\r\n                    {column: 'losyr_1', value: 0.0},\r\n                    {column: 'losyr_20', value: 25.0},\r\n                    {column: 'crash_rate', value: 0.0},\r\n                    {column: 'crash_severity', value: 0.0},\r\n                    {column: 'weather', value: 0.0},\r\n                    {column: 'event', value: 0.0}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Service',\r\n                presets: [\r\n                    {column: 'aadtyr_1', value: 30.0},\r\n                    {column: 'aadtyr_20', value: 0.0},\r\n                    {column: 'growth_20', value: 10.0},\r\n                    {column: 'trkdyr_1', value: 0.0},\r\n                    {column: 'losyr_1', value: 30.0},\r\n                    {column: 'losyr_20', value: 30.0},\r\n                    {column: 'crash_rate', value: 0.0},\r\n                    {column: 'crash_severity', value: 0.0},\r\n                    {column: 'weather', value: 0.0},\r\n                    {column: 'event', value: 0.0}\r\n                ]\r\n            },\r\n            {\r\n                label: 'Freight Performance',\r\n                presets: [\r\n                    {column: 'aadtyr_1', value: 20.0},\r\n                    {column: 'aadtyr_20', value: 0.0},\r\n                    {column: 'growth_20', value: 0.0},\r\n                    {column: 'trkdyr_1', value: 60.0},\r\n                    {column: 'losyr_1', value: 20.0},\r\n                    {column: 'losyr_20', value: 0.0},\r\n                    {column: 'crash_rate', value: 0.0},\r\n                    {column: 'crash_severity', value: 0.0},\r\n                    {column: 'weather', value: 0.0},\r\n                    {column: 'event', value: 0.0}\r\n                ]\r\n            }\r\n        ] as Array<TipPresetConfig>\r\n\r\n} as ITipConfig;\r\n\r\ntipConfig.$presetSelector.append('<option value=\"0\" disabled=>Custom</option>');\r\n\r\nlet sliders = new TipSliders(tipConfig.slidersConfig, tipConfig.presetConfig, 'slider-container',\r\n    tipConfig.$presetSelector, tipConfig.$regionSelector, tipConfig.$regionSelector, (chg) => {console.log(chg)});\r\n\r\n// sliders.changedCallback = (chg) => {console.log(chg)};\r\n\r\nwindow['glob'] = sliders;\r\nwindow['hat'] = sliders;\r\nwindow['bird'] = sliders;\r\n\r\n"]}
\ No newline at end of file
diff --git a/dist/reactComponents/Slider.d.ts b/dist/reactComponents/Slider.d.ts
index a7a5615..016f96f 100644
--- a/dist/reactComponents/Slider.d.ts
+++ b/dist/reactComponents/Slider.d.ts
@@ -10,24 +10,29 @@ export interface iSlider {
     value?: number;
 }
 export declare class Slider extends React.Component<iSlider, null> {
-    uid: string;
-    startUid: string;
-    endUid: string;
-    intervalUid: string;
-    el: HTMLInputElement;
-    startButton: HTMLButtonElement;
-    endButton: HTMLButtonElement;
-    intervalSelect: HTMLSelectElement;
-    interval: number;
-    running: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
+    private uid;
+    private startUid;
+    private endUid;
+    private previousUid;
+    private nextUid;
+    private intervalUid;
+    private el;
+    private previousButton;
+    private nextButton;
+    private startButton;
+    private endButton;
+    private intervalSelect;
+    private interval;
+    private running;
+    private minVal;
+    private maxVal;
+    private step;
     constructor(props: iSlider, context: Object);
     componentDidMount(): void;
     updateRunning(): void;
     startAnimate(): void;
     stopAnimate(): void;
     restartAnimate(): void;
+    increment(v: number): void;
     render(): JSX.Element;
 }
diff --git a/dist/reactComponents/Slider.jsx b/dist/reactComponents/Slider.jsx
index 657cf30..1650370 100644
--- a/dist/reactComponents/Slider.jsx
+++ b/dist/reactComponents/Slider.jsx
@@ -24,6 +24,8 @@ var Slider = (function (_super) {
         _this.startUid = makeGuid_1.default();
         _this.endUid = makeGuid_1.default();
         _this.intervalUid = makeGuid_1.default();
+        _this.previousUid = makeGuid_1.default();
+        _this.nextUid = makeGuid_1.default();
         _this.running = false;
         return _this;
     }
@@ -35,6 +37,8 @@ var Slider = (function (_super) {
         this.step = parseFloat(this.el.step);
         this.startButton = document.getElementById(this.startUid);
         this.endButton = document.getElementById(this.endUid);
+        this.previousButton = document.getElementById(this.previousUid);
+        this.nextButton = document.getElementById(this.nextUid);
         this.intervalSelect = document.getElementById(this.intervalUid);
         if (get_browser_1.get_browser().name.toUpperCase().indexOf('IE') > -1) {
             this.el.onchange = function (e) {
@@ -44,6 +48,8 @@ var Slider = (function (_super) {
     };
     Slider.prototype.updateRunning = function () {
         this.startButton.disabled = this.running;
+        this.nextButton.disabled = this.running;
+        this.previousButton.disabled = this.running;
         this.el.disabled = this.running;
         this.endButton.disabled = !this.running;
     };
@@ -59,7 +65,6 @@ var Slider = (function (_super) {
             }
             _this.el.value = val.toString();
             _this.props.change(val);
-            console.log(parseFloat(_this.el.value));
         }, parseInt(this.intervalSelect.value));
     };
     Slider.prototype.stopAnimate = function () {
@@ -73,13 +78,21 @@ var Slider = (function (_super) {
             this.startAnimate();
         }
     };
+    Slider.prototype.increment = function (v) {
+        var val = parseFloat(this.el.value);
+        val = v > 0 ? val + this.step : val - this.step;
+        this.el.value = val.toString();
+        this.props.change(val);
+    };
     Slider.prototype.render = function () {
         var _this = this;
         var attrs = {
             id: this.uid,
             min: 0,
             type: 'range',
-            onChange: function (evt) { _this.props.change(parseFloat(evt.target.value)); },
+            onChange: function (evt) {
+                _this.props.change(parseFloat(evt.target.value));
+            },
             style: { width: '100%' },
             max: "100",
             step: '0.1',
@@ -92,25 +105,33 @@ var Slider = (function (_super) {
         }
         if (this.props.value) {
             delete attrs.defaultValue;
-            // attrs['value'] = this.props.value.toString()
         }
         else {
             delete attrs.value;
-            // attrs['defaultValue'] = "0";
         }
         var start = null;
         var stop = null;
+        var previous = null;
+        var next = null;
         var intervalSelect = null;
         if (this.props.animate) {
-            start = <button id={this.startUid} onClick={function () {
+            previous = <button id={this.previousUid} className="react-slider-previous" onClick={function () {
+                _this.increment(-1);
+            }}>Previous</button>;
+            next = <button id={this.nextUid} className="react-slider-next" onClick={function () {
+                _this.increment(1);
+            }}>Next</button>;
+            start = <button id={this.startUid} className="react-slider-start" onClick={function () {
                 _this.startAnimate();
             }}>Start</button>;
-            stop = <button id={this.endUid} onClick={function () {
+            stop = <button id={this.endUid} className="react-slider-stop" onClick={function () {
                 _this.stopAnimate();
             }}>Stop</button>;
             intervalSelect = <span>
             <label>Interval (s)</label>
-            <select defaultValue="200" id={this.intervalUid} onChange={function () { _this.restartAnimate(); }}>
+            <select defaultValue="200" id={this.intervalUid} onChange={function () {
+                _this.restartAnimate();
+            }}>
                 <option value="100">0.1</option>
                 <option value="200">0.2</option>
                 <option value="300">0.3</option>
@@ -125,8 +146,8 @@ var Slider = (function (_super) {
             </span>;
         }
         return <div>
-             <input {...attrs}/>
-            {start}{stop}{intervalSelect}
+            <input {...attrs}/>
+            {previous}{start}{stop}{next}{intervalSelect}
         </div>;
     };
     return Slider;
diff --git a/dist/reactComponents/Slider.jsx.map b/dist/reactComponents/Slider.jsx.map
index 2f7d483..aac8c37 100644
--- a/dist/reactComponents/Slider.jsx.map
+++ b/dist/reactComponents/Slider.jsx.map
@@ -1 +1 @@
-{"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/reactComponents/Slider.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAEH,iDAAsC;AACtC,6CAAwC;AAExC,mDAAgD;AAShD;IAA4B,0BAA8B;IAetD,gBAAY,KAAc,EAAE,OAAe;QAA3C,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAMxB;QALG,KAAI,CAAC,GAAG,GAAG,kBAAQ,EAAE,CAAC;QACtB,KAAI,CAAC,QAAQ,GAAG,kBAAQ,EAAE,CAAC;QAC3B,KAAI,CAAC,MAAM,GAAG,kBAAQ,EAAE,CAAC;QACzB,KAAI,CAAC,WAAW,GAAG,kBAAQ,EAAE,CAAC;QAC9B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;;IACzB,CAAC;IAED,kCAAiB,GAAjB;QAAA,iBAcC;QAbG,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAqB,CAAC;QAChE,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAsB,CAAC;QAC/E,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAsB,CAAC;QAC3E,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAsB,CAAC;QAErF,EAAE,CAAC,CAAC,yBAAW,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA,CAAC;YACrD,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,UAAC,CAAC;gBACjB,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;YACpD,CAAC,CAAA;QACL,CAAC;IACL,CAAC;IAED,8BAAa,GAAb;QACI,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QACzC,IAAI,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC5C,CAAC;IAED,6BAAY,GAAZ;QAAA,iBAcC;QAbG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;YACxB,IAAI,GAAG,GAAG,UAAU,CAAC,KAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;YACpC,GAAG,IAAI,KAAI,CAAC,IAAI,CAAC;YACjB,EAAE,CAAC,CAAC,GAAG,GAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC;gBACpB,GAAG,GAAG,KAAI,CAAC,MAAM,CAAA;YACrB,CAAC;YAED,KAAI,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC/B,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3C,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,4BAAW,GAAX;QACI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,+BAAc,GAAd;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA,CAAC;YACd,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IAED,uBAAM,GAAN;QAAA,iBA6DC;QA5DG,IAAI,KAAK,GAAG;YACR,EAAE,EAAE,IAAI,CAAC,GAAG;YACZ,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,UAAC,GAAkC,IAAM,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,CAAA,CAAC;YACnG,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC;YACtB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAE,GAAG;YAC1D,YAAY,EAAE,GAAG;SACpB,CAAC;QAEF,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA,CAAC;YAClB,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QACrB,CAAC;QAED,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA,CAAC;YAClB,OAAO,KAAK,CAAC,YAAY,CAAC;YAC1B,+CAA+C;QACnD,CAAC;QAAC,IAAI,CAAC,CAAC;YACJ,OAAO,KAAK,CAAC,KAAK,CAAC;YACnB,+BAA+B;QACnC,CAAC;QAGD,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,cAAc,GAAG,IAAI,CAAC;QAE1B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACrB,KAAK,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;gBACxC,KAAI,CAAC,YAAY,EAAE,CAAA;YACvB,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAElB,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;gBACrC,KAAI,CAAC,WAAW,EAAE,CAAA;YACtB,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAEjB,cAAc,GAAG,CAAC,IAAI,CACtB;YAAA,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAC1B;YAAA,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAO,KAAI,CAAC,cAAc,EAAE,CAAA,CAAA,CAAC,CAAC,CACrF;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,CAC/B;gBAAA,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CACpC;YAAA,EAAE,MAAM,CACR;YAAA,EAAE,IAAI,CAAC,CAAC;QACZ,CAAC;QAED,MAAM,CAAC,CAAC,GAAG,CACN;aAAA,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,EAClB;YAAA,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,CAChC;QAAA,EAAE,GAAG,CAAC,CAAA;IACV,CAAC;IAEL,aAAC;AAAD,CAAC,AA1ID,CAA4B,qBAAK,CAAC,SAAS,GA0I1C;AA1IY,wBAAM","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\nimport {React} from './reactAndRedux';\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\nimport {get_browser} from '../util/get_browser';\r\n\r\nexport interface iSlider {\r\n    change: (d: number) => any;\r\n    steps?: number;\r\n    animate?: boolean;\r\n    value?: number;\r\n}\r\n\r\nexport class Slider extends React.Component<iSlider, null>{\r\n    uid: string;\r\n    startUid: string;\r\n    endUid: string;\r\n    intervalUid: string;\r\n    el: HTMLInputElement;\r\n    startButton: HTMLButtonElement;\r\n    endButton: HTMLButtonElement;\r\n    intervalSelect: HTMLSelectElement;\r\n    interval: number;\r\n    running: boolean;\r\n    minVal: number;\r\n    maxVal: number;\r\n    step: number;\r\n\r\n    constructor(props: iSlider, context: Object) {\r\n        super(props, context);\r\n        this.uid = makeGuid();\r\n        this.startUid = makeGuid();\r\n        this.endUid = makeGuid();\r\n        this.intervalUid = makeGuid();\r\n        this.running = false;\r\n    }\r\n\r\n    componentDidMount() {\r\n        this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n        this.minVal = parseFloat(this.el.min);\r\n        this.maxVal = parseFloat(this.el.max);\r\n        this.step = parseFloat(this.el.step);\r\n        this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n        this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;\r\n        this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n\r\n        if (get_browser().name.toUpperCase().indexOf('IE') > -1){\r\n            this.el.onchange = (e) => {\r\n                this.props.change(parseFloat(e.target['value']))\r\n            }\r\n        }\r\n    }\r\n\r\n    updateRunning() {\r\n        this.startButton.disabled = this.running;\r\n        this.el.disabled = this.running;\r\n        this.endButton.disabled = !this.running;\r\n    }\r\n\r\n    startAnimate() {\r\n        this.running = true;\r\n        this.updateRunning();\r\n        this.interval = setInterval(() => {\r\n            let val = parseFloat(this.el.value);\r\n            val += this.step;\r\n            if (val > this.maxVal) {\r\n                val = this.minVal\r\n            }\r\n\r\n            this.el.value = val.toString();\r\n            this.props.change(val);\r\n            console.log(parseFloat(this.el.value));\r\n        }, parseInt(this.intervalSelect.value));\r\n    }\r\n\r\n    stopAnimate() {\r\n        clearInterval(this.interval);\r\n        this.running = false;\r\n        this.updateRunning();\r\n    }\r\n\r\n    restartAnimate(){\r\n        if (this.running){\r\n            this.stopAnimate();\r\n            this.startAnimate();\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let attrs = {\r\n            id: this.uid,\r\n            min: 0,\r\n            type: 'range',\r\n            onChange: (evt: ChangeEvent<HTMLInputElement>) => {this.props.change(parseFloat(evt.target.value))},\r\n            style: {width: '100%'},\r\n            max: \"100\",\r\n            step: '0.1',\r\n            value: this.props.value ? this.props.value.toString(): '0',\r\n            defaultValue: \"0\"\r\n        };\r\n\r\n        if (this.props.steps){\r\n            attrs.max = this.props.steps.toString();\r\n            attrs.step = '1';\r\n        }\r\n\r\n        if (this.props.value){\r\n            delete attrs.defaultValue;\r\n            // attrs['value'] = this.props.value.toString()\r\n        } else {\r\n            delete attrs.value;\r\n            // attrs['defaultValue'] = \"0\";\r\n        }\r\n\r\n\r\n        let start = null;\r\n        let stop = null;\r\n        let intervalSelect = null;\r\n\r\n        if (this.props.animate) {\r\n            start = <button id={this.startUid} onClick={() => {\r\n                this.startAnimate()\r\n            }}>Start</button>;\r\n\r\n            stop = <button id={this.endUid} onClick={() => {\r\n                this.stopAnimate()\r\n            }}>Stop</button>;\r\n\r\n            intervalSelect = <span>\r\n            <label>Interval (s)</label>\r\n            <select defaultValue=\"200\" id={this.intervalUid} onChange={() => {this.restartAnimate()}}>\r\n                <option value=\"100\">0.1</option>\r\n                <option value=\"200\">0.2</option>\r\n                <option value=\"300\">0.3</option>\r\n                <option value=\"400\">0.4</option>\r\n                <option value=\"500\">0.5</option>\r\n                <option value=\"600\">0.6</option>\r\n                <option value=\"700\">0.7</option>\r\n                <option value=\"800\">0.8</option>\r\n                <option value=\"900\">0.9</option>\r\n                <option value=\"1000\">1.0</option>\r\n            </select>\r\n            </span>;\r\n        }\r\n\r\n        return <div>\r\n             <input {...attrs}/>\r\n            {start}{stop}{intervalSelect}\r\n        </div>\r\n    }\r\n\r\n}"]}
\ No newline at end of file
+{"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/reactComponents/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\nimport {React} from './reactAndRedux';\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\nimport {get_browser} from '../util/get_browser';\r\n\r\nexport interface iSlider {\r\n    change: (d: number) => any;\r\n    steps?: number;\r\n    animate?: boolean;\r\n    value?: number;\r\n}\r\n\r\nexport class Slider extends React.Component<iSlider, null> {\r\n    private uid: string;\r\n    private startUid: string;\r\n    private endUid: string;\r\n    private previousUid: string;\r\n    private nextUid: string;\r\n    private intervalUid: string;\r\n    private el: HTMLInputElement;\r\n    private previousButton: HTMLButtonElement;\r\n    private nextButton: HTMLButtonElement;\r\n    private startButton: HTMLButtonElement;\r\n    private endButton: HTMLButtonElement;\r\n    private intervalSelect: HTMLSelectElement;\r\n    private interval: number;\r\n    private running: boolean;\r\n    private minVal: number;\r\n    private maxVal: number;\r\n    private step: number;\r\n\r\n    constructor(props: iSlider, context: Object) {\r\n        super(props, context);\r\n        this.uid = makeGuid();\r\n        this.startUid = makeGuid();\r\n        this.endUid = makeGuid();\r\n        this.intervalUid = makeGuid();\r\n        this.previousUid = makeGuid();\r\n        this.nextUid = makeGuid();\r\n        this.running = false;\r\n    }\r\n\r\n    componentDidMount() {\r\n        this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n        this.minVal = parseFloat(this.el.min);\r\n        this.maxVal = parseFloat(this.el.max);\r\n        this.step = parseFloat(this.el.step);\r\n        this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n        this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;\r\n        this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;\r\n        this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;\r\n        this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n\r\n        if (get_browser().name.toUpperCase().indexOf('IE') > -1) {\r\n            this.el.onchange = (e) => {\r\n                this.props.change(parseFloat(e.target['value']))\r\n            }\r\n        }\r\n    }\r\n\r\n    updateRunning() {\r\n        this.startButton.disabled = this.running;\r\n        this.nextButton.disabled = this.running;\r\n        this.previousButton.disabled = this.running;\r\n        this.el.disabled = this.running;\r\n        this.endButton.disabled = !this.running;\r\n    }\r\n\r\n    startAnimate() {\r\n        this.running = true;\r\n        this.updateRunning();\r\n        this.interval = setInterval(() => {\r\n            let val = parseFloat(this.el.value);\r\n            val += this.step;\r\n            if (val > this.maxVal) {\r\n                val = this.minVal\r\n            }\r\n\r\n            this.el.value = val.toString();\r\n            this.props.change(val);\r\n        }, parseInt(this.intervalSelect.value));\r\n    }\r\n\r\n    stopAnimate() {\r\n        clearInterval(this.interval);\r\n        this.running = false;\r\n        this.updateRunning();\r\n    }\r\n\r\n    restartAnimate() {\r\n        if (this.running) {\r\n            this.stopAnimate();\r\n            this.startAnimate();\r\n        }\r\n    }\r\n\r\n    increment(v: number) {\r\n        let val = parseFloat(this.el.value);\r\n        val = v > 0 ? val + this.step : val - this.step;\r\n        this.el.value = val.toString();\r\n        this.props.change(val);\r\n    }\r\n\r\n    render() {\r\n        let attrs = {\r\n            id: this.uid,\r\n            min: 0,\r\n            type: 'range',\r\n            onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n                this.props.change(parseFloat(evt.target.value))\r\n            },\r\n            style: {width: '100%'},\r\n            max: \"100\",\r\n            step: '0.1',\r\n            value: this.props.value ? this.props.value.toString() : '0',\r\n            defaultValue: \"0\"\r\n        };\r\n\r\n        if (this.props.steps) {\r\n            attrs.max = this.props.steps.toString();\r\n            attrs.step = '1';\r\n        }\r\n\r\n        if (this.props.value) {\r\n            delete attrs.defaultValue;\r\n        } else {\r\n            delete attrs.value;\r\n        }\r\n\r\n\r\n        let start = null;\r\n        let stop = null;\r\n        let previous = null;\r\n        let next = null;\r\n        let intervalSelect = null;\r\n\r\n        if (this.props.animate) {\r\n            previous = <button id={this.previousUid} className=\"react-slider-previous\" onClick={() => {\r\n                this.increment(-1)\r\n            }}>Previous</button>;\r\n\r\n            next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n                this.increment(1)\r\n            }}>Next</button>;\r\n\r\n            start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n                this.startAnimate()\r\n            }}>Start</button>;\r\n\r\n            stop = <button id={this.endUid} className=\"react-slider-stop\" onClick={() => {\r\n                this.stopAnimate()\r\n            }}>Stop</button>;\r\n\r\n            intervalSelect = <span>\r\n            <label>Interval (s)</label>\r\n            <select defaultValue=\"200\" id={this.intervalUid} onChange={() => {\r\n                this.restartAnimate()\r\n            }}>\r\n                <option value=\"100\">0.1</option>\r\n                <option value=\"200\">0.2</option>\r\n                <option value=\"300\">0.3</option>\r\n                <option value=\"400\">0.4</option>\r\n                <option value=\"500\">0.5</option>\r\n                <option value=\"600\">0.6</option>\r\n                <option value=\"700\">0.7</option>\r\n                <option value=\"800\">0.8</option>\r\n                <option value=\"900\">0.9</option>\r\n                <option value=\"1000\">1.0</option>\r\n            </select>\r\n            </span>;\r\n        }\r\n\r\n        return <div>\r\n            <input {...attrs}/>\r\n            {previous}{start}{stop}{next}{intervalSelect}\r\n        </div>\r\n    }\r\n\r\n}"]}
\ No newline at end of file
diff --git a/src/_tests/demos/animate.ts b/src/_tests/demos/animate.ts
new file mode 100644
index 0000000..41dd1d5
--- /dev/null
+++ b/src/_tests/demos/animate.ts
@@ -0,0 +1,86 @@
+import {quickMap} from '../../olHelpers/quickMap';
+import LayerRealEarthTile from "../../layers/LayerRealEarthTile";
+import {MediaControl, changeFunction} from "../../domUtil/media-control";
+import $ = require('jquery');
+import {LayerBaseVectorEsri} from "../../layers/LayerBaseVectorEsri";
+import {LayerEsriMapServer} from "../../layers/LayerEsriMapServer";
+
+let nexrhresStatic = new LayerRealEarthTile({
+        products: 'nexrhres',
+        id: 'nexrhres-static',
+        opacity: 0.6,
+        animate: true,
+        name: 'Hybrid Reflectivity',
+        // maxZoom: 10,
+        timeLoadCallback: function (f) {
+            console.log(f);
+        }
+    }
+);
+
+
+let d = new Date();
+let endTime = d.getTime();
+d.setHours(d.getHours() - 4);
+let startTime = d.getTime();
+let rangeStep = Math.round((endTime - startTime) / 8);
+
+let media = new MediaControl(
+    $('#control'),
+    (v: number) => {
+        nexrhresStatic.setLayerTime(v);
+    },
+    {
+        min: startTime,
+        max: endTime,
+        val: endTime,
+        step: rangeStep,
+        playInterval: 750,
+        showAsDate: true
+    }
+);
+
+
+let map = quickMap();
+map.addLayer(nexrhresStatic.olLayer);
+
+
+let coordinationLayer = new LayerBaseVectorEsri(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/GLRTOC/GlrtocCoordination/MapServer/0',
+    {
+        visible: true,
+        autoLoad: true,
+        name: 'Coordination',
+        useEsriStyle: true
+    }
+);
+
+map.addLayer(coordinationLayer.olLayer);
+
+    let oakRidgeLayers = [
+        ['Cameras', 'cameras33'],
+        ['HAR', 'HAR33'],
+        ['DMS', 'MessageSigns33'],
+        //['State Summary', 'statesummary'],
+        ['Traffic Control', 'TrafficControl33'],
+        ['Traffic Detection', 'TrafficDetectionMulti'],
+        ['Weather', 'Weather33']
+    ];
+
+
+    for (let i = 0; i < oakRidgeLayers.length; i++) {
+        let oakRidgeLayer = new LayerEsriMapServer(
+            `http://itsdpro.ornl.gov/arcgis/rest/services/ITSPublic/${oakRidgeLayers[i][1]}/MapServer`,
+            {
+                id: oakRidgeLayers[i][1],
+                name: oakRidgeLayers[i][0],
+                visible: true,
+                minZoom: 7,
+                zIndex: 20,
+                addPopup: true,
+                legendCollapse: true
+            }
+        );
+        map.addLayer(oakRidgeLayer.olLayer);
+    }
+
diff --git a/src/_tests/demos/another.ts b/src/_tests/demos/another.ts
new file mode 100644
index 0000000..de81e43
--- /dev/null
+++ b/src/_tests/demos/another.ts
@@ -0,0 +1,6 @@
+/**
+ * Created by gavorhes on 9/22/2016.
+ */
+
+console.log('here is another');
+console.log('here is another');
\ No newline at end of file
diff --git a/src/_tests/demos/compare-test.ts b/src/_tests/demos/compare-test.ts
new file mode 100644
index 0000000..ec08e22
--- /dev/null
+++ b/src/_tests/demos/compare-test.ts
@@ -0,0 +1,58 @@
+/**
+ * Created by gavorhes on 6/1/2016.
+ */
+import {quickMap} from '../../olHelpers/quickMap';
+import LayerSwipe from '../../olHelpers/layerSwipe';
+import {LayerEsriMapServer} from '../../layers/LayerEsriMapServer';
+
+let map = quickMap();
+
+
+let swiper = new LayerSwipe(map);
+
+
+let wisDotRegions = new LayerEsriMapServer(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/Metamanager_regions/MapServer',
+    {
+        minZoom: 6,
+        maxZoom: 12,
+        name: 'WisDOT Regions'
+    });
+
+let metamanagerSegments = new LayerEsriMapServer(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/MM_All_Segments/MapServer',
+    {
+        minZoom: 7,
+        visible: true,
+        name: 'Metamanager Segments'
+    });
+
+let truckSpeed2014 = new LayerEsriMapServer(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/NPMRDS/compareDynamic/MapServer',
+    {
+        minZoom: 7,
+        visible: true,
+        name: 'truck2014',
+        showLayers: [8]
+    });
+
+let truckSpeed2015 = new LayerEsriMapServer(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/NPMRDS/compareDynamic/MapServer',
+    {
+        minZoom: 7,
+        visible: true,
+        name: 'truck2015',
+        showLayers: [9]
+    });
+
+map.addLayer(wisDotRegions.olLayer);
+map.addLayer(truckSpeed2014.olLayer);
+map.addLayer(truckSpeed2015.olLayer);
+map.addLayer(metamanagerSegments.olLayer);
+
+
+swiper.addLeftLayer(wisDotRegions);
+swiper.addRightLayer(metamanagerSegments);
+
+swiper.addLeftLayer(truckSpeed2014);
+swiper.addRightLayer(truckSpeed2015);
diff --git a/src/_tests/demos/itsMap.ts b/src/_tests/demos/itsMap.ts
new file mode 100644
index 0000000..279fa0a
--- /dev/null
+++ b/src/_tests/demos/itsMap.ts
@@ -0,0 +1,27 @@
+/**
+ * Created by gavorhes on 12/18/2015.
+ */
+
+
+import ItsLayerCollection from '../../collections/ItsLayerCollection';
+import LayerLegend from '../../collections/LayerLegend';
+import quickMap from '../../olHelpers/quickMap';
+
+let map = quickMap();
+
+window['map'] = map;
+
+let itsLayerCollection = new ItsLayerCollection(map);
+
+let layerArray = [
+    {
+        groupName: 'ITS Inventory Layers',
+        collapse: false,
+        addCheck: true,
+        items: itsLayerCollection.layers
+    }
+];
+
+let legend = new LayerLegend(layerArray, 'legend-container', {});
+
+console.log('it works');
diff --git a/src/_tests/demos/my_little_test.ts b/src/_tests/demos/my_little_test.ts
new file mode 100644
index 0000000..d983fea
--- /dev/null
+++ b/src/_tests/demos/my_little_test.ts
@@ -0,0 +1,45 @@
+import ol = require('custom-ol');
+// let g = new
+
+
+
+
+import {MediaControl} from '../../domUtil/media-control'
+//
+//
+
+
+console.log('eat this fish');
+console.log('eat this fish');
+console.log('eat this bird');
+
+//
+// let g = new ol3.source.Vector();
+//
+// console.log(olx);
+
+
+console.log('i am here5');
+
+
+
+function me (eat: number = 1){
+    console.log(eat, 'one');
+}
+
+me(1);
+
+var control = new MediaControl('map');
+
+//
+//
+// console.log(ol3);
+//
+//
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log(definedAndNotNull("fish"));
+// console.log('here');
+//
diff --git a/src/_tests/demos/range_media.ts b/src/_tests/demos/range_media.ts
new file mode 100644
index 0000000..0eca344
--- /dev/null
+++ b/src/_tests/demos/range_media.ts
@@ -0,0 +1,14 @@
+/**
+ * Created by gavorhes on 10/10/2016.
+ */
+
+import {DayRange} from '../../domUtil/day-range';
+import $ = require('jquery');
+
+let dayRange = new DayRange($('#day-range'), 10);
+
+
+
+
+
+
diff --git a/src/_tests/demos/reacttst.tsx b/src/_tests/demos/reacttst.tsx
new file mode 100644
index 0000000..5f64b62
--- /dev/null
+++ b/src/_tests/demos/reacttst.tsx
@@ -0,0 +1,17 @@
+/**
+ * Created by gavorhes on 9/22/2016.
+ */
+
+// import * as React from "react";
+// import * as ReactDOM from "react/lib/";
+//
+// import { Hello } from "../_scratch/Hello";
+//
+// console.log('I am in a tsx file for some reason');
+//
+// ReactDOM.render(
+//     <Hello compiler="TypeScript" framework="React" />,
+//     document.getElementById("example")
+// );
+//
+
diff --git a/src/_tests/demos/simple_map.ts b/src/_tests/demos/simple_map.ts
new file mode 100644
index 0000000..e3233f8
--- /dev/null
+++ b/src/_tests/demos/simple_map.ts
@@ -0,0 +1,36 @@
+/**
+ * Created by gavorhes on 9/23/2016.
+ */
+import {quickMap} from '../../olHelpers/quickMap';
+import {LayerEsriMapServer} from "../../layers/LayerEsriMapServer";
+import LayerLegend from '../../collections/LayerLegend';
+
+
+let map = quickMap();
+
+let wisDotRegions = new LayerEsriMapServer(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/Metamanager_regions/MapServer');
+
+let sixYearPlan = new LayerEsriMapServer(
+    'http://transportal.cee.wisc.edu/applications/arcgis2/rest/services/MetaManager/SixYearPlan/MapServer', {name: 'Six Year Plan', legendCollapse: true});
+
+map.addLayer(wisDotRegions.olLayer);
+map.addLayer(sixYearPlan.olLayer);
+
+let layerArray = [
+    wisDotRegions,
+    sixYearPlan
+    // tipConfig.tipSegmentLayer,
+    // tipConfig.metamanagerSegments,
+    // {
+    //     groupName: 'ITS Inventory Layers',
+    //     collapse: true,
+    //     addCheck: false,
+    //     items: tipConfig.itsLayerCollection.layers
+    // }
+];
+
+let legend = new LayerLegend(layerArray, 'legend-container', {});
+
+
+
diff --git a/src/_tests/demos/slider-test.ts b/src/_tests/demos/slider-test.ts
new file mode 100644
index 0000000..cfa22eb
--- /dev/null
+++ b/src/_tests/demos/slider-test.ts
@@ -0,0 +1,209 @@
+/**
+ * Created by gavorhes on 6/22/2016.
+ */
+import {TipSliders, TipPresetConfig, TipSliderConfig} from '../../collections/Sliders';
+import $ = require('jquery');
+import ol = require('custom-ol');
+import 'jquery-ui';
+
+
+
+export interface ITipConfig{
+    slidersConfig: Array<TipSliderConfig>;
+    presetConfig: Array<TipPresetConfig>;
+    tipSegmentLayerMinZoom: number;
+    sliders: TipSliders;
+    _map: ol.Map;
+    $loadingGif: JQuery;
+    $presetSelector: JQuery;
+    $regionSelector: JQuery;
+    $versionSelector: JQuery;
+    itsLayerCollection: any;
+    tipSegmentLayer: any;
+    metamanagerSegments: any;
+}
+
+export const tipConfig = {
+    $loadingGif: $('#loading-gif'),
+    $presetSelector: $('#preset-selector'),
+    $regionSelector: $('#region-selector'),
+    $versionSelector: $('#version-selector'),
+    tipSegmentLayerMinZoom: 10,
+    slidersConfig: [
+            {
+                label: 'AADT',
+                yearOptions: [
+                    {label: '1', column: 'aadtyr_1'}
+                ]
+            },
+            {
+                label: 'AADT Future',
+                yearOptions: [
+                    {label: '5', column: 'aadtyr_5'},
+                    {label: '10', column: 'aadtyr_10'},
+                    {label: '15', column: 'aadtyr_15'},
+                    {label: '20', column: 'aadtyr_20'}
+                ]
+            },
+            {
+                label: 'Growth',
+                yearOptions: [
+                    {label: '5', column: 'growth_5'},
+                    {label: '10', column: 'growth_10'},
+                    {label: '15', column: 'growth_15'},
+                    {label: '20', column: 'growth_20'}
+                ]
+            },
+            {
+                label: 'Truck',
+                yearOptions: [
+                    {label: '1', column: 'trkdyr_1'},
+                    {label: '20', column: 'trkdyr_20'}
+                ]
+            },
+            {
+                label: 'LOS',
+                yearOptions: [
+                    {label: '1', column: 'losyr_1'}
+                ]
+            },
+            {
+                label: 'LOS Future',
+                yearOptions: [
+                    {label: '5', column: 'losyr_5'},
+                    {label: '10', column: 'losyr_10'},
+                    {label: '15', column: 'losyr_15'},
+                    {label: '20', column: 'losyr_20'}
+                ]
+            },
+            {
+                label: 'Crash Rate',
+                yearOptions: [
+                    {label: 1, column: 'crash_rate'}
+                ]
+            },
+            {
+                label: 'Severity',
+                yearOptions: [
+                    {label: 1, column: 'crash_severity'}
+                ]
+            },
+            {
+                label: 'Weather',
+                yearOptions: [
+                    {label: 1, column: 'weather'}
+                ]
+            },
+            {
+                label: 'Event',
+                yearOptions: [
+                    {label: 1, column: 'event'}
+                ]
+            }
+        ] as Array<TipSliderConfig>,
+    presetConfig: [
+            {
+                label: 'Default TIP',
+                presets: [
+                    {column: 'aadtyr_1', value: 10.0},
+                    {column: 'aadtyr_20', value: 7.0},
+                    {column: 'growth_20', value: 7.0},
+                    {column: 'trkdyr_1', value: 4.0},
+                    {column: 'losyr_1', value: 12.0},
+                    {column: 'losyr_20', value: 12.0},
+                    {column: 'crash_rate', value: 15.0},
+                    {column: 'crash_severity', value: 13.0},
+                    {column: 'weather', value: 9.0},
+                    {column: 'event', value: 11.0}
+                ]
+            },
+            {
+                label: 'Safety',
+                presets: [
+                    {column: 'aadtyr_1', value: 20.0},
+                    {column: 'aadtyr_20', value: 0.0},
+                    {column: 'growth_20', value: 0.0},
+                    {column: 'trkdyr_1', value: 0.0},
+                    {column: 'losyr_1', value: 0.0},
+                    {column: 'losyr_20', value: 0.0},
+                    {column: 'crash_rate', value: 40.0},
+                    {column: 'crash_severity', value: 40.0},
+                    {column: 'weather', value: 0.0},
+                    {column: 'event', value: 0.0}
+                ]
+            },
+            {
+                label: 'Mobility Present',
+                presets: [
+                    {column: 'aadtyr_1', value: 25.0},
+                    {column: 'aadtyr_20', value: 25.0},
+                    {column: 'growth_20', value: 0.0},
+                    {column: 'trkdyr_1', value: 25.0},
+                    {column: 'losyr_1', value: 25.0},
+                    {column: 'losyr_20', value: 0.0},
+                    {column: 'crash_rate', value: 0.0},
+                    {column: 'crash_severity', value: 0.0},
+                    {column: 'weather', value: 0.0},
+                    {column: 'event', value: 0.0}
+                ]
+            },
+            {
+                label: 'Mobility Future',
+                presets: [
+                    {column: 'aadtyr_1', value: 0.0},
+                    {column: 'aadtyr_20', value: 25.0},
+                    {column: 'growth_20', value: 25.0},
+                    {column: 'trkdyr_1', value: 25.0},
+                    {column: 'losyr_1', value: 0.0},
+                    {column: 'losyr_20', value: 25.0},
+                    {column: 'crash_rate', value: 0.0},
+                    {column: 'crash_severity', value: 0.0},
+                    {column: 'weather', value: 0.0},
+                    {column: 'event', value: 0.0}
+                ]
+            },
+            {
+                label: 'Service',
+                presets: [
+                    {column: 'aadtyr_1', value: 30.0},
+                    {column: 'aadtyr_20', value: 0.0},
+                    {column: 'growth_20', value: 10.0},
+                    {column: 'trkdyr_1', value: 0.0},
+                    {column: 'losyr_1', value: 30.0},
+                    {column: 'losyr_20', value: 30.0},
+                    {column: 'crash_rate', value: 0.0},
+                    {column: 'crash_severity', value: 0.0},
+                    {column: 'weather', value: 0.0},
+                    {column: 'event', value: 0.0}
+                ]
+            },
+            {
+                label: 'Freight Performance',
+                presets: [
+                    {column: 'aadtyr_1', value: 20.0},
+                    {column: 'aadtyr_20', value: 0.0},
+                    {column: 'growth_20', value: 0.0},
+                    {column: 'trkdyr_1', value: 60.0},
+                    {column: 'losyr_1', value: 20.0},
+                    {column: 'losyr_20', value: 0.0},
+                    {column: 'crash_rate', value: 0.0},
+                    {column: 'crash_severity', value: 0.0},
+                    {column: 'weather', value: 0.0},
+                    {column: 'event', value: 0.0}
+                ]
+            }
+        ] as Array<TipPresetConfig>
+
+} as ITipConfig;
+
+tipConfig.$presetSelector.append('<option value="0" disabled=>Custom</option>');
+
+let sliders = new TipSliders(tipConfig.slidersConfig, tipConfig.presetConfig, 'slider-container',
+    tipConfig.$presetSelector, tipConfig.$regionSelector, tipConfig.$regionSelector, (chg) => {console.log(chg)});
+
+// sliders.changedCallback = (chg) => {console.log(chg)};
+
+window['glob'] = sliders;
+window['hat'] = sliders;
+window['bird'] = sliders;
+
diff --git a/src/reactComponents/Slider.tsx b/src/reactComponents/Slider.tsx
index ee5a2a1..948fe6e 100644
--- a/src/reactComponents/Slider.tsx
+++ b/src/reactComponents/Slider.tsx
@@ -14,20 +14,24 @@ export interface iSlider {
     value?: number;
 }
 
-export class Slider extends React.Component<iSlider, null>{
-    uid: string;
-    startUid: string;
-    endUid: string;
-    intervalUid: string;
-    el: HTMLInputElement;
-    startButton: HTMLButtonElement;
-    endButton: HTMLButtonElement;
-    intervalSelect: HTMLSelectElement;
-    interval: number;
-    running: boolean;
-    minVal: number;
-    maxVal: number;
-    step: number;
+export class Slider extends React.Component<iSlider, null> {
+    private uid: string;
+    private startUid: string;
+    private endUid: string;
+    private previousUid: string;
+    private nextUid: string;
+    private intervalUid: string;
+    private el: HTMLInputElement;
+    private previousButton: HTMLButtonElement;
+    private nextButton: HTMLButtonElement;
+    private startButton: HTMLButtonElement;
+    private endButton: HTMLButtonElement;
+    private intervalSelect: HTMLSelectElement;
+    private interval: number;
+    private running: boolean;
+    private minVal: number;
+    private maxVal: number;
+    private step: number;
 
     constructor(props: iSlider, context: Object) {
         super(props, context);
@@ -35,6 +39,8 @@ export class Slider extends React.Component<iSlider, null>{
         this.startUid = makeGuid();
         this.endUid = makeGuid();
         this.intervalUid = makeGuid();
+        this.previousUid = makeGuid();
+        this.nextUid = makeGuid();
         this.running = false;
     }
 
@@ -45,9 +51,11 @@ export class Slider extends React.Component<iSlider, null>{
         this.step = parseFloat(this.el.step);
         this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;
         this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;
+        this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;
+        this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;
         this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;
 
-        if (get_browser().name.toUpperCase().indexOf('IE') > -1){
+        if (get_browser().name.toUpperCase().indexOf('IE') > -1) {
             this.el.onchange = (e) => {
                 this.props.change(parseFloat(e.target['value']))
             }
@@ -56,6 +64,8 @@ export class Slider extends React.Component<iSlider, null>{
 
     updateRunning() {
         this.startButton.disabled = this.running;
+        this.nextButton.disabled = this.running;
+        this.previousButton.disabled = this.running;
         this.el.disabled = this.running;
         this.endButton.disabled = !this.running;
     }
@@ -72,7 +82,6 @@ export class Slider extends React.Component<iSlider, null>{
 
             this.el.value = val.toString();
             this.props.change(val);
-            console.log(parseFloat(this.el.value));
         }, parseInt(this.intervalSelect.value));
     }
 
@@ -82,56 +91,75 @@ export class Slider extends React.Component<iSlider, null>{
         this.updateRunning();
     }
 
-    restartAnimate(){
-        if (this.running){
+    restartAnimate() {
+        if (this.running) {
             this.stopAnimate();
             this.startAnimate();
         }
     }
 
+    increment(v: number) {
+        let val = parseFloat(this.el.value);
+        val = v > 0 ? val + this.step : val - this.step;
+        this.el.value = val.toString();
+        this.props.change(val);
+    }
+
     render() {
         let attrs = {
             id: this.uid,
             min: 0,
             type: 'range',
-            onChange: (evt: ChangeEvent<HTMLInputElement>) => {this.props.change(parseFloat(evt.target.value))},
+            onChange: (evt: ChangeEvent<HTMLInputElement>) => {
+                this.props.change(parseFloat(evt.target.value))
+            },
             style: {width: '100%'},
             max: "100",
             step: '0.1',
-            value: this.props.value ? this.props.value.toString(): '0',
+            value: this.props.value ? this.props.value.toString() : '0',
             defaultValue: "0"
         };
 
-        if (this.props.steps){
+        if (this.props.steps) {
             attrs.max = this.props.steps.toString();
             attrs.step = '1';
         }
 
-        if (this.props.value){
+        if (this.props.value) {
             delete attrs.defaultValue;
-            // attrs['value'] = this.props.value.toString()
         } else {
             delete attrs.value;
-            // attrs['defaultValue'] = "0";
         }
 
 
         let start = null;
         let stop = null;
+        let previous = null;
+        let next = null;
         let intervalSelect = null;
 
         if (this.props.animate) {
-            start = <button id={this.startUid} onClick={() => {
+            previous = <button id={this.previousUid} className="react-slider-previous" onClick={() => {
+                this.increment(-1)
+            }}>Previous</button>;
+
+            next = <button id={this.nextUid} className="react-slider-next" onClick={() => {
+                this.increment(1)
+            }}>Next</button>;
+
+            start = <button id={this.startUid} className="react-slider-start" onClick={() => {
                 this.startAnimate()
             }}>Start</button>;
 
-            stop = <button id={this.endUid} onClick={() => {
+            stop = <button id={this.endUid} className="react-slider-stop" onClick={() => {
                 this.stopAnimate()
             }}>Stop</button>;
 
             intervalSelect = <span>
             <label>Interval (s)</label>
-            <select defaultValue="200" id={this.intervalUid} onChange={() => {this.restartAnimate()}}>
+            <select defaultValue="200" id={this.intervalUid} onChange={() => {
+                this.restartAnimate()
+            }}>
                 <option value="100">0.1</option>
                 <option value="200">0.2</option>
                 <option value="300">0.3</option>
@@ -147,8 +175,8 @@ export class Slider extends React.Component<iSlider, null>{
         }
 
         return <div>
-             <input {...attrs}/>
-            {start}{stop}{intervalSelect}
+            <input {...attrs}/>
+            {previous}{start}{stop}{next}{intervalSelect}
         </div>
     }
 
diff --git a/webpack.config.js b/webpack.config.js
index 2b8505a..01feb26 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@
 const path = require('path');
 const fs = require('fs');
 
-const demosDirectory = path.join(__dirname, 'test/demo');
+const demosDirectory = path.join(__dirname, 'src/_tests/demos');
 const files = fs.readdirSync(demosDirectory);
 
 let entries = {};
-- 
GitLab