diff --git a/dist/react/DatePick.d.ts b/dist/react/DatePick.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a31da4e3fbefea778dbc4416f01705a29db91cc
--- /dev/null
+++ b/dist/react/DatePick.d.ts
@@ -0,0 +1,21 @@
+/// <reference types="react" />
+/**
+ * Created by glenn on 6/14/2017.
+ */
+import { React } from './reactRedux';
+import 'jquery-ui';
+/**
+ * params label, id, initialDate, change callback with value as string
+ */
+export declare class DatePick extends React.Component<{
+    label: string;
+    id?: string;
+    initialDate?: Date;
+    change: (val: string) => any;
+}, null> {
+    defaultId: string;
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export default DatePick;
diff --git a/dist/react/DatePick.jsx b/dist/react/DatePick.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7ee0458f2eb7bfa8960d6c5641cdb25eaa7cb360
--- /dev/null
+++ b/dist/react/DatePick.jsx
@@ -0,0 +1,50 @@
+/**
+ * Created by glenn on 6/14/2017.
+ */
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var reactRedux_1 = require("./reactRedux");
+var $ = require("jquery");
+require("jquery-ui");
+var makeGuid_1 = require("../util/makeGuid");
+var dateFormat_1 = require("./helpers/dateFormat");
+/**
+ * params label, id, initialDate, change callback with value as string
+ */
+var DatePick = (function (_super) {
+    __extends(DatePick, _super);
+    function DatePick(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.defaultId = makeGuid_1.default();
+        return _this;
+    }
+    DatePick.prototype.componentDidMount = function () {
+        var _this = this;
+        var $el = $('#' + (this.props.id || this.defaultId));
+        $el.datepicker({
+            onSelect: function () {
+                _this.props.change($el.val());
+            }
+        });
+    };
+    DatePick.prototype.render = function () {
+        return <span>
+            <label>{this.props.label}</label>
+            <input id={this.props.id || this.defaultId} type="text" style={{ margin: "0 10px 0 5px", width: '73px', textAlign: 'center' }} defaultValue={dateFormat_1.dateToString(this.props.initialDate || new Date())} readOnly={true}/>
+        </span>;
+    };
+    return DatePick;
+}(reactRedux_1.React.Component));
+exports.DatePick = DatePick;
+exports.default = DatePick;
+//# sourceMappingURL=DatePick.jsx.map
\ No newline at end of file
diff --git a/dist/react/DatePick.jsx.map b/dist/react/DatePick.jsx.map
new file mode 100644
index 0000000000000000000000000000000000000000..cf7629e4d3bc0a8257a901ddd4edf04604fbea7f
--- /dev/null
+++ b/dist/react/DatePick.jsx.map
@@ -0,0 +1 @@
+{"version":3,"file":"DatePick.jsx","sourceRoot":"","sources":["../../src/react/DatePick.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAGH,2CAAmC;AACnC,0BAA6B;AAC7B,qBAAmB;AACnB,6CAAwC;AAExC,mDAAkD;AAElD;;GAEG;AACH;IAA8B,4BAAqG;IAG/H,kBAAY,KAAK,EAAE,OAAO;QAA1B,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAExB;QADG,KAAI,CAAC,SAAS,GAAG,kBAAQ,EAAE,CAAC;;IAChC,CAAC;IAED,oCAAiB,GAAjB;QAAA,iBAUC;QATG,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QAErD,GAAG,CAAC,UAAU,CACV;YACI,QAAQ,EAAE;gBACN,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;YACjC,CAAC;SACJ,CACJ,CAAC;IACN,CAAC;IAED,yBAAM,GAAN;QACI,MAAM,CAAC,CAAC,IAAI,CACR;YAAA,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAChC;YAAA,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAChD,KAAK,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC,CACpE,YAAY,CAAC,CAAC,yBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC,CACjE,QAAQ,CAAC,CAAC,IAAI,CAAC,EAE1B;QAAA,EAAE,IAAI,CAAC,CAAA;IACX,CAAC;IACL,eAAC;AAAD,CAAC,AA9BD,CAA8B,kBAAK,CAAC,SAAS,GA8B5C;AA9BY,4BAAQ;AAgCrB,kBAAe,QAAQ,CAAC","sourcesContent":["/**\r\n * Created by glenn on 6/14/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\nimport {dateToString} from './helpers/dateFormat';\r\n\r\n/**\r\n * params label, id, initialDate, change callback with value as string\r\n */\r\nexport class DatePick extends React.Component<{label: string, id?: string, initialDate?: Date, change: (val: string) => any}, null> {\r\n    defaultId: string;\r\n\r\n    constructor(props, context){\r\n        super(props, context);\r\n        this.defaultId = makeGuid();\r\n    }\r\n\r\n    componentDidMount() {\r\n        let $el = $('#' + (this.props.id || this.defaultId));\r\n\r\n        $el.datepicker(\r\n            {\r\n                onSelect: () => {\r\n                    this.props.change($el.val());\r\n                }\r\n            }\r\n        );\r\n    }\r\n\r\n    render() {\r\n        return <span>\r\n            <label>{this.props.label}</label>\r\n            <input id={this.props.id || this.defaultId} type=\"text\"\r\n                   style={{margin: \"0 10px 0 5px\", width: '73px', textAlign: 'center'}}\r\n                   defaultValue={dateToString(this.props.initialDate || new Date())}\r\n                   readOnly={true}\r\n            />\r\n        </span>\r\n    }\r\n}\r\n\r\nexport default DatePick;"]}
\ No newline at end of file
diff --git a/dist/react/DateRange.d.ts b/dist/react/DateRange.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e49e014c8c8da85e76b47a0f6033178036762ccd
--- /dev/null
+++ b/dist/react/DateRange.d.ts
@@ -0,0 +1,28 @@
+/// <reference types="react" />
+/**
+ * Created by glenn on 6/12/2017.
+ */
+import { React } from './reactRedux';
+import 'jquery-ui';
+export declare class DateRange extends React.Component<{
+    maxRange: number;
+    callback: (start: string | Date, end: string | Date) => any;
+    minRange?: number;
+}, null> {
+    startId: string;
+    endId: string;
+    startInput: HTMLInputElement;
+    endInput: HTMLInputElement;
+    start: Date;
+    end: Date;
+    maxRange: number;
+    minRange: number;
+    numDays: number;
+    constructor(props: any, context: any);
+    setNumDays(): void;
+    componentDidMount(): void;
+    readonly needReset: boolean;
+    setStart(s: string): void;
+    setEnd(s: string): void;
+    render(): JSX.Element;
+}
diff --git a/dist/react/DateRange.jsx b/dist/react/DateRange.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9a61b0e34b7989d60f997410b6ae8382dec98a1
--- /dev/null
+++ b/dist/react/DateRange.jsx
@@ -0,0 +1,96 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var reactRedux_1 = require("./reactRedux");
+require("jquery-ui");
+var makeGuid_1 = require("../util/makeGuid");
+var fixDate = require("./helpers/dateFormat");
+var DatePick_1 = require("./DatePick");
+var DateRange = (function (_super) {
+    __extends(DateRange, _super);
+    function DateRange(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.startId = makeGuid_1.default();
+        _this.endId = makeGuid_1.default();
+        _this.maxRange = Math.round(_this.props.maxRange) - 1;
+        _this.minRange = typeof _this.props['minRange'] == 'number' ? Math.round(_this.props['minRange']) : 1;
+        if (_this.minRange > _this.maxRange) {
+            throw "DateRange component: Max range must be greater than min range";
+        }
+        _this.end = new Date();
+        _this.end.setHours(0, 0, 0);
+        _this.start = new Date(_this.end);
+        _this.start.setDate(_this.start.getDate() - _this.maxRange);
+        _this.setNumDays();
+        return _this;
+    }
+    DateRange.prototype.setNumDays = function () {
+        this.numDays = Math.round((this.end.getTime() - this.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+    };
+    DateRange.prototype.componentDidMount = function () {
+        this.startInput = document.getElementById(this.startId);
+        this.endInput = document.getElementById(this.endId);
+        this.props.callback(this.start, this.end);
+    };
+    Object.defineProperty(DateRange.prototype, "needReset", {
+        get: function () {
+            return this.numDays > this.maxRange || this.numDays < this.minRange;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DateRange.prototype.setStart = function (s) {
+        this.start = fixDate.stringToDate(s);
+        this.setNumDays();
+        if (this.needReset) {
+            this.end = new Date(this.start);
+            if (this.numDays > this.maxRange) {
+                this.end.setDate(this.end.getDate() + this.maxRange);
+            }
+            else {
+                this.end.setDate(this.end.getDate() + this.minRange - 1);
+            }
+            this.endInput.value = fixDate.dateToString(this.end);
+            this.setNumDays();
+        }
+        this.props.callback(this.start, this.end);
+    };
+    DateRange.prototype.setEnd = function (s) {
+        this.end = fixDate.stringToDate(s);
+        this.setNumDays();
+        if (this.needReset) {
+            this.start = new Date(this.end);
+            if (this.numDays > this.maxRange) {
+                this.start.setDate(this.start.getDate() - this.maxRange);
+            }
+            else {
+                this.start.setDate(this.start.getDate() - this.minRange + 1);
+            }
+            this.startInput.value = fixDate.dateToString(this.start);
+            this.setNumDays();
+        }
+        this.props.callback(this.start, this.end);
+    };
+    DateRange.prototype.render = function () {
+        var _this = this;
+        return <div>
+            <DatePick_1.default id={this.startId} label="Start" initialDate={this.start} change={function (s) { _this.setStart(s); }}/>
+            <DatePick_1.default id={this.endId} label="End" initialDate={this.end} change={function (s) { _this.setEnd(s); }}/>
+        </div>;
+    };
+    return DateRange;
+}(reactRedux_1.React.Component));
+exports.DateRange = DateRange;
+//# sourceMappingURL=DateRange.jsx.map
\ No newline at end of file
diff --git a/dist/react/DateRange.jsx.map b/dist/react/DateRange.jsx.map
new file mode 100644
index 0000000000000000000000000000000000000000..78dc13c2edb8983e22ac91994e1f7f4619e3d474
--- /dev/null
+++ b/dist/react/DateRange.jsx.map
@@ -0,0 +1 @@
+{"version":3,"file":"DateRange.jsx","sourceRoot":"","sources":["../../src/react/DateRange.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\nimport {React} from './reactRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\nimport * as fixDate from './helpers/dateFormat';\r\nimport DatePick from './DatePick';\r\n\r\n\r\nexport class DateRange extends React.Component<{\r\n    maxRange: number,\r\n    callback: (start: string|Date, end: string|Date) => any,\r\n    minRange?: number\r\n}, null> {\r\n    startId = makeGuid();\r\n    endId = makeGuid();\r\n    startInput: HTMLInputElement;\r\n    endInput: HTMLInputElement;\r\n    start: Date;\r\n    end: Date;\r\n    maxRange: number;\r\n    minRange: number;\r\n    numDays: number;\r\n\r\n    constructor(props, context) {\r\n        super(props, context);\r\n\r\n        this.maxRange = Math.round(this.props.maxRange) - 1;\r\n        this.minRange = typeof this.props['minRange'] == 'number' ? Math.round(this.props['minRange']) : 1;\r\n\r\n        if (this.minRange > this.maxRange) {\r\n            throw \"DateRange component: Max range must be greater than min range\";\r\n        }\r\n\r\n        this.end = new Date();\r\n        this.end.setHours(0, 0, 0);\r\n        this.start = new Date(this.end);\r\n        this.start.setDate(this.start.getDate() - this.maxRange);\r\n        this.setNumDays();\r\n    }\r\n\r\n    setNumDays() {\r\n        this.numDays = Math.round((this.end.getTime() - this.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;\r\n    }\r\n\r\n\r\n    componentDidMount() {\r\n        this.startInput = document.getElementById(this.startId) as HTMLInputElement;\r\n        this.endInput = document.getElementById(this.endId) as HTMLInputElement;\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    get needReset(): boolean {\r\n        return this.numDays > this.maxRange || this.numDays < this.minRange;\r\n    }\r\n\r\n    setStart(s: string) {\r\n        this.start = fixDate.stringToDate(s);\r\n        this.setNumDays();\r\n\r\n        if (this.needReset) {\r\n            this.end = new Date(this.start);\r\n\r\n            if (this.numDays > this.maxRange) {\r\n                this.end.setDate(this.end.getDate() + this.maxRange);\r\n            } else {\r\n                this.end.setDate(this.end.getDate() + this.minRange - 1);\r\n            }\r\n\r\n            this.endInput.value = fixDate.dateToString(this.end);\r\n            this.setNumDays();\r\n        }\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    setEnd(s: string) {\r\n        this.end = fixDate.stringToDate(s);\r\n        this.setNumDays();\r\n\r\n        if (this.needReset) {\r\n            this.start = new Date(this.end);\r\n\r\n            if (this.numDays > this.maxRange) {\r\n                this.start.setDate(this.start.getDate() - this.maxRange);\r\n            } else {\r\n                this.start.setDate(this.start.getDate() - this.minRange + 1);\r\n            }\r\n\r\n            this.startInput.value = fixDate.dateToString(this.start);\r\n            this.setNumDays();\r\n        }\r\n        this.props.callback(this.start, this.end);\r\n    }\r\n\r\n    render() {\r\n        return <div>\r\n            <DatePick id={this.startId} label=\"Start\" initialDate={this.start} change={(s) => {this.setStart(s)}}/>\r\n            <DatePick id={this.endId} label=\"End\" initialDate={this.end} change={(s) => {this.setEnd(s)}}/>\r\n        </div>;\r\n    }\r\n}\r\n"]}
\ No newline at end of file
diff --git a/dist/react/Radio.d.ts b/dist/react/Radio.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2dccd82951f51388afb3ff2267bfd8c13f58f2b4
--- /dev/null
+++ b/dist/react/Radio.d.ts
@@ -0,0 +1,24 @@
+/// <reference types="react" />
+/**
+ * Created by glenn on 6/12/2017.
+ */
+import { React } from './reactRedux';
+import 'jquery-ui';
+export declare class Radio extends React.Component<{
+    title: string;
+    items: string[];
+    callback: (val: string) => any;
+    inline?: boolean;
+    defaultValue: string;
+}, null> {
+    render(): JSX.Element;
+}
+export declare class RadioConnected extends React.Component<{
+    title: string;
+    items: string[];
+    callback: (val: string) => any;
+    inline?: boolean;
+    selectedIndex: number;
+}, null> {
+    render(): JSX.Element;
+}
diff --git a/dist/react/Radio.jsx b/dist/react/Radio.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..295f4d62d88411756905d9cb85bed6ad8063b2f9
--- /dev/null
+++ b/dist/react/Radio.jsx
@@ -0,0 +1,122 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var reactRedux_1 = require("./reactRedux");
+require("jquery-ui");
+var makeGuid_1 = require("../util/makeGuid");
+var RadioItem = (function (_super) {
+    __extends(RadioItem, _super);
+    function RadioItem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.guid = makeGuid_1.default();
+        return _this;
+    }
+    RadioItem.prototype.render = function () {
+        var _this = this;
+        var style = {};
+        if (this.props.inline) {
+            style['display'] = 'inline-block';
+            style['padding'] = '0 5px';
+        }
+        var props = {
+            id: this.guid,
+            type: "radio",
+            name: this.props.groupId,
+            value: typeof this.props.index == 'undefined' ? this.props.text : this.props.index.toFixed(),
+            onChange: function (evt) {
+                _this.props.change(evt.target.value);
+                evt.target.checked = true;
+            }
+        };
+        if (this.props.connected) {
+            props['checked'] = this.props.checked;
+        }
+        else {
+            props['defaultChecked'] = this.props.checked;
+        }
+        return <li style={style}>
+            <input {...props}/>
+            <label htmlFor={this.guid}>{this.props.text}</label>
+        </li>;
+    };
+    return RadioItem;
+}(reactRedux_1.React.Component));
+var RadioBase = (function (_super) {
+    __extends(RadioBase, _super);
+    function RadioBase(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.inline = _this.props.inline || false;
+        _this.groupId = _this.props.title.toLowerCase().replace(/ /g, '');
+        return _this;
+    }
+    RadioBase.prototype.render = function () {
+        var _this = this;
+        var style = {};
+        if (this.inline) {
+            style['display'] = 'inline-block';
+            style['padding'] = '0 5px';
+        }
+        var arr = [];
+        for (var i = 0; i < this.props.items.length; i++) {
+            var itemProps = {
+                groupId: this.groupId,
+                text: this.props.items[i],
+                inline: this.props.inline,
+                change: function (s) { return (_this.props.callback(s)); },
+                key: this.props.items[i],
+                connected: this.props.connected || false,
+                checked: false,
+            };
+            if (typeof this.props.selectedValueOrIndex == 'number') {
+                itemProps.checked = i == this.props.selectedValueOrIndex;
+                itemProps['index'] = i;
+            }
+            else {
+                itemProps.checked = this.props.items[i] == this.props.selectedValueOrIndex;
+            }
+            arr.push(<RadioItem {...itemProps}/>);
+        }
+        return <div>
+            <h4 style={{ margin: '7px 0' }}>{this.props.title}</h4>
+            <ul style={{ listStyle: 'none', margin: '0', paddingLeft: "10px", maxHeight: "200px", overflowY: 'auto' }}>
+                {arr}
+            </ul>
+        </div>;
+    };
+    return RadioBase;
+}(reactRedux_1.React.Component));
+var Radio = (function (_super) {
+    __extends(Radio, _super);
+    function Radio() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Radio.prototype.render = function () {
+        return <RadioBase title={this.props.title} items={this.props.items} callback={this.props.callback} inline={this.props.inline} selectedValueOrIndex={this.props.defaultValue} connected={false}/>;
+    };
+    return Radio;
+}(reactRedux_1.React.Component));
+exports.Radio = Radio;
+var RadioConnected = (function (_super) {
+    __extends(RadioConnected, _super);
+    function RadioConnected() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RadioConnected.prototype.render = function () {
+        return <RadioBase title={this.props.title} items={this.props.items} callback={this.props.callback} inline={this.props.inline} selectedValueOrIndex={this.props.selectedIndex} connected={true}/>;
+    };
+    return RadioConnected;
+}(reactRedux_1.React.Component));
+exports.RadioConnected = RadioConnected;
+//# sourceMappingURL=Radio.jsx.map
\ No newline at end of file
diff --git a/dist/react/Radio.jsx.map b/dist/react/Radio.jsx.map
new file mode 100644
index 0000000000000000000000000000000000000000..fb7283dffbb6b68153cb5d5b24965173fcbea296
--- /dev/null
+++ b/dist/react/Radio.jsx.map
@@ -0,0 +1 @@
+{"version":3,"file":"Radio.jsx","sourceRoot":"","sources":["../../src/react/Radio.tsx"],"names":[],"mappings":"AAAA;;GAEG;;;;;;;;;;;;;AAGH,2CAAmC;AAEnC,qBAAmB;AACnB,6CAAwC;AAExC;IAAwB,6BAA2J;IAAnL;QAAA,qEAiCC;QAhCG,UAAI,GAAW,kBAAQ,EAAE,CAAC;;IAgC9B,CAAC;IA7BG,0BAAM,GAAN;QAAA,iBA4BC;QA3BG,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;YACpB,KAAK,CAAC,SAAS,CAAC,GAAG,cAAc,CAAC;YAClC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;QAC/B,CAAC;QAED,IAAI,KAAK,GAAG;YACR,EAAE,EAAE,IAAI,CAAC,IAAI;YACb,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;YACxB,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;YAC5F,QAAQ,EAAE,UAAC,GAAG;gBACV,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACpC,GAAG,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC;SACJ,CAAC;QAEF,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACvB,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;QACzC,CAAC;QAAC,IAAI,CAAC,CAAC;YACJ,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;QAChD,CAAC;QAED,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACpB;YAAA,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,EACjB;YAAA,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CACvD;QAAA,EAAE,EAAE,CAAC,CAAC;IACV,CAAC;IACL,gBAAC;AAAD,CAAC,AAjCD,CAAwB,kBAAK,CAAC,SAAS,GAiCtC;AAED;IAAwB,6BAC+H;IAInJ,mBAAY,KAAK,EAAE,OAAO;QAA1B,YACI,kBAAM,KAAK,EAAE,OAAO,CAAC,SAGxB;QAFG,KAAI,CAAC,MAAM,GAAG,KAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC;QACzC,KAAI,CAAC,OAAO,GAAG,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;;IACpE,CAAC;IAED,0BAAM,GAAN;QAAA,iBAsCC;QArCG,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YACd,KAAK,CAAC,SAAS,CAAC,GAAG,cAAc,CAAC;YAClC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;QAC/B,CAAC;QAED,IAAI,GAAG,GAAG,EAAE,CAAC;QAEb,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAE/C,IAAI,SAAS,GAAG;gBACZ,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;gBACzB,MAAM,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAxB,CAAwB;gBACvC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;gBACxB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK;gBACxC,OAAO,EAAE,KAAK;aAEjB,CAAC;YAEF,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,oBAAoB,IAAI,QAAQ,CAAC,CAAA,CAAC;gBACpD,SAAS,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC;gBACzD,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC;YAAC,IAAI,CAAC,CAAC;gBACJ,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC;YAC/E,CAAC;YAED,GAAG,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,EAAE,CAAC,CAAA;QACzC,CAAC;QAED,MAAM,CAAC,CAAC,GAAG,CACP;YAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAC,MAAM,EAAE,OAAO,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,CACpD;YAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAC,CAAC,CACpG;gBAAA,CAAC,GAAG,CACR;YAAA,EAAE,EAAE,CACR;QAAA,EAAE,GAAG,CAAC,CAAA;IACV,CAAC;IACL,gBAAC;AAAD,CAAC,AAlDD,CAAwB,kBAAK,CAAC,SAAS,GAkDtC;AAGD;IAA2B,yBAAiI;IAA5J;;IAYA,CAAC;IAVG,sBAAM,GAAN;QACI,MAAM,CAAC,CAAC,SAAS,CACb,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAC1B,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAC9C,SAAS,CAAC,CAAC,KAAK,CAAC,EACnB,CAAA;IACN,CAAC;IACL,YAAC;AAAD,CAAC,AAZD,CAA2B,kBAAK,CAAC,SAAS,GAYzC;AAZY,sBAAK;AAclB;IAAoC,kCAAkI;IAAtK;;IAYA,CAAC;IAVG,+BAAM,GAAN;QACI,MAAM,CAAC,CAAC,SAAS,CACb,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAC1B,oBAAoB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAC/C,SAAS,CAAC,CAAC,IAAI,CAAC,EAClB,CAAA;IACN,CAAC;IACL,qBAAC;AAAD,CAAC,AAZD,CAAoC,kBAAK,CAAC,SAAS,GAYlD;AAZY,wCAAc","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactRedux';\r\nimport $ = require('jquery');\r\nimport 'jquery-ui';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\nclass RadioItem extends React.Component<{ groupId: string, text: string, checked: boolean, inline: boolean, change: (s: string) => any, connected?: boolean, index?: number}, null> {\r\n    guid: string = makeGuid();\r\n\r\n\r\n    render() {\r\n        let style = {};\r\n        if (this.props.inline) {\r\n            style['display'] = 'inline-block';\r\n            style['padding'] = '0 5px';\r\n        }\r\n\r\n        let props = {\r\n            id: this.guid,\r\n            type: \"radio\",\r\n            name: this.props.groupId,\r\n            value: typeof this.props.index == 'undefined' ? this.props.text : this.props.index.toFixed(),\r\n            onChange: (evt) => {\r\n                this.props.change(evt.target.value);\r\n                evt.target.checked = true;\r\n            }\r\n        };\r\n\r\n        if (this.props.connected) {\r\n            props['checked'] = this.props.checked\r\n        } else {\r\n            props['defaultChecked'] = this.props.checked\r\n        }\r\n\r\n        return <li style={style}>\r\n            <input {...props}/>\r\n            <label htmlFor={this.guid}>{this.props.text}</label>\r\n        </li>;\r\n    }\r\n}\r\n\r\nclass RadioBase extends React.Component<\r\n    { title: string, items: string[], callback: (val: string) => any, inline?: boolean, selectedValueOrIndex: string|number, connected: boolean}, null> {\r\n    inline: boolean;\r\n    groupId: string;\r\n\r\n    constructor(props, context) {\r\n        super(props, context);\r\n        this.inline = this.props.inline || false;\r\n        this.groupId = this.props.title.toLowerCase().replace(/ /g, '');\r\n    }\r\n\r\n    render() {\r\n        let style = {};\r\n        if (this.inline) {\r\n            style['display'] = 'inline-block';\r\n            style['padding'] = '0 5px';\r\n        }\r\n\r\n        let arr = [];\r\n\r\n        for (let i = 0; i < this.props.items.length; i++) {\r\n\r\n            let itemProps = {\r\n                groupId: this.groupId,\r\n                text: this.props.items[i],\r\n                inline: this.props.inline,\r\n                change: (s) => (this.props.callback(s)),\r\n                key: this.props.items[i],\r\n                connected: this.props.connected || false,\r\n                checked: false,\r\n\r\n            };\r\n\r\n            if (typeof this.props.selectedValueOrIndex == 'number'){\r\n                itemProps.checked = i == this.props.selectedValueOrIndex;\r\n                itemProps['index'] = i;\r\n            } else {\r\n                itemProps.checked = this.props.items[i] == this.props.selectedValueOrIndex;\r\n            }\r\n\r\n            arr.push(<RadioItem {...itemProps}/>)\r\n        }\r\n\r\n        return <div>\r\n            <h4 style={{margin: '7px 0'}}>{this.props.title}</h4>\r\n            <ul style={{listStyle: 'none', margin: '0', paddingLeft: \"10px\", maxHeight: \"200px\", overflowY: 'auto'}}>\r\n                {arr}\r\n            </ul>\r\n        </div>\r\n    }\r\n}\r\n\r\n\r\nexport class Radio extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, defaultValue: string }, null> {\r\n\r\n    render() {\r\n        return <RadioBase\r\n            title={this.props.title}\r\n            items={this.props.items}\r\n            callback={this.props.callback}\r\n            inline={this.props.inline}\r\n            selectedValueOrIndex={this.props.defaultValue}\r\n            connected={false}\r\n        />\r\n    }\r\n}\r\n\r\nexport class RadioConnected extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, selectedIndex: number }, null> {\r\n\r\n    render() {\r\n        return <RadioBase\r\n            title={this.props.title}\r\n            items={this.props.items}\r\n            callback={this.props.callback}\r\n            inline={this.props.inline}\r\n            selectedValueOrIndex={this.props.selectedIndex}\r\n            connected={true}\r\n        />\r\n    }\r\n}"]}
\ No newline at end of file
diff --git a/dist/react/SelectArea.d.ts b/dist/react/SelectArea.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f0aab37053f562fe0063dcf9f2e602a21bb0c4ac
--- /dev/null
+++ b/dist/react/SelectArea.d.ts
@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * Created by glenn on 6/12/2017.
+ */
+import { React } from './reactRedux';
+import ol = require('custom-ol');
+import LayerBaseVectorGeoJson from '../layers/LayerBaseVectorGeoJson';
+export declare class SelectArea extends React.Component<{
+    map: ol.Map | (() => ol.Map);
+    callback: (coords: Array<number[]>) => any;
+}, null> {
+    map: ol.Map;
+    callback: (coords: Array<number[]>) => any;
+    areaOverlay: LayerBaseVectorGeoJson;
+    draw: ol.interaction.Draw;
+    selectId: string;
+    cancelId: string;
+    selectButton: HTMLButtonElement;
+    cancelButton: HTMLButtonElement;
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    setArea(): void;
+    cancel(): void;
+    render(): JSX.Element;
+}
diff --git a/dist/react/SelectArea.jsx b/dist/react/SelectArea.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7701b2120b5994bb39e88d122ec0a76eb3b97fa2
--- /dev/null
+++ b/dist/react/SelectArea.jsx
@@ -0,0 +1,106 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var reactRedux_1 = require("./reactRedux");
+var ol = require("custom-ol");
+var LayerBaseVectorGeoJson_1 = require("../layers/LayerBaseVectorGeoJson");
+var projections_1 = require("../olHelpers/projections");
+var makeGuid_1 = require("../util/makeGuid");
+var get_map_1 = require("./helpers/get_map");
+var SelectArea = (function (_super) {
+    __extends(SelectArea, _super);
+    function SelectArea(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.selectId = makeGuid_1.default();
+        _this.cancelId = makeGuid_1.default();
+        _this.callback = _this.props.callback;
+        _this.areaOverlay = new LayerBaseVectorGeoJson_1.default('', {
+            style: new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: 'rgba(255, 0, 237, 0.1)'
+                }),
+                stroke: new ol.style.Stroke({
+                    color: 'rgb(255, 0, 237)',
+                    width: 2
+                })
+            }),
+            transform: { dataProjection: projections_1.proj4326, featureProjection: projections_1.proj3857 }
+        });
+        _this.draw = new ol.interaction.Draw({
+            source: _this.areaOverlay.source,
+            type: 'Polygon'
+        });
+        _this.draw.on('drawend', function (evt) {
+            _this.selectButton.style.display = '';
+            _this.cancelButton.style.display = 'none';
+            var geom = evt.feature.getGeometry();
+            var geomClone = geom.clone();
+            geomClone.transform('EPSG:3857', 'EPSG:4326');
+            setTimeout(function () {
+                _this.map.removeInteraction(_this.draw);
+            }, 100);
+            var outCoords = [];
+            var ccc = geomClone.getCoordinates()[0];
+            for (var _i = 0, ccc_1 = ccc; _i < ccc_1.length; _i++) {
+                var cc = ccc_1[_i];
+                outCoords.push([Math.round(cc[0] * 1000000) / 1000000, Math.round(cc[1] * 1000000) / 1000000]);
+            }
+            _this.callback(outCoords);
+        });
+        return _this;
+    }
+    SelectArea.prototype.componentDidMount = function () {
+        var _this = this;
+        this.selectButton = document.getElementById(this.selectId);
+        this.cancelButton = document.getElementById(this.cancelId);
+        get_map_1.default(this.props.map, this.areaOverlay.olLayer).then(function (m) { _this.map = m; });
+    };
+    SelectArea.prototype.setArea = function () {
+        if (!this.map) {
+            return;
+        }
+        this.selectButton.style.display = 'none';
+        this.cancelButton.style.display = '';
+        this.areaOverlay.source.clear();
+        this.map.addInteraction(this.draw);
+        this.callback(null);
+    };
+    SelectArea.prototype.cancel = function () {
+        if (!this.map) {
+            return;
+        }
+        this.selectButton.style.display = '';
+        this.cancelButton.style.display = 'none';
+        this.areaOverlay.source.clear();
+        this.map.removeInteraction(this.draw);
+        this.callback(null);
+    };
+    SelectArea.prototype.render = function () {
+        var _this = this;
+        return <div style={{ margin: '10px' }}>
+            <button id={this.selectId} onClick={function () {
+            _this.setArea();
+        }}>Select Area
+            </button>
+            <button id={this.cancelId} onClick={function () {
+            _this.cancel();
+        }} style={{ display: 'none' }}>Cancel
+            </button>
+        </div>;
+    };
+    return SelectArea;
+}(reactRedux_1.React.Component));
+exports.SelectArea = SelectArea;
+//# sourceMappingURL=SelectArea.jsx.map
\ No newline at end of file
diff --git a/dist/react/SelectArea.jsx.map b/dist/react/SelectArea.jsx.map
new file mode 100644
index 0000000000000000000000000000000000000000..b623a9bf46aba010a582920626663b2fb30e9cd2
--- /dev/null
+++ b/dist/react/SelectArea.jsx.map
@@ -0,0 +1 @@
+{"version":3,"file":"SelectArea.jsx","sourceRoot":"","sources":["../../src/react/SelectArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\n\r\nimport {React} from './reactRedux';\r\nimport ol = require('custom-ol');\r\nimport LayerBaseVectorGeoJson from '../layers/LayerBaseVectorGeoJson';\r\nimport {proj4326, proj3857} from '../olHelpers/projections'\r\nimport makeGuid from '../util/makeGuid';\r\nimport getMap from './helpers/get_map';\r\n\r\n\r\nexport class SelectArea extends React.Component<{ map: ol.Map | (() => ol.Map), callback: (coords: Array<number[]>) => any }, null> {\r\n    map: ol.Map;\r\n    callback: (coords: Array<number[]>) => any;\r\n    areaOverlay: LayerBaseVectorGeoJson;\r\n    draw: ol.interaction.Draw;\r\n    selectId: string;\r\n    cancelId: string;\r\n    selectButton: HTMLButtonElement;\r\n    cancelButton: HTMLButtonElement;\r\n\r\n\r\n    constructor(props, context) {\r\n        super(props, context);\r\n\r\n        this.selectId = makeGuid();\r\n        this.cancelId = makeGuid();\r\n\r\n        this.callback = this.props.callback;\r\n\r\n        this.areaOverlay = new LayerBaseVectorGeoJson('',\r\n            {\r\n                style: new ol.style.Style({\r\n                    fill: new ol.style.Fill({\r\n                        color: 'rgba(255, 0, 237, 0.1)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                        color: 'rgb(255, 0, 237)',\r\n                        width: 2\r\n                    })\r\n                }),\r\n                transform: {dataProjection: proj4326, featureProjection: proj3857}\r\n            });\r\n\r\n        this.draw = new ol.interaction.Draw({\r\n            source: this.areaOverlay.source,\r\n            type: 'Polygon'\r\n        });\r\n\r\n        this.draw.on('drawend', (evt) => {\r\n            this.selectButton.style.display = '';\r\n            this.cancelButton.style.display = 'none';\r\n\r\n            let geom = evt.feature.getGeometry();\r\n            let geomClone = geom.clone();\r\n\r\n            geomClone.transform('EPSG:3857', 'EPSG:4326');\r\n\r\n            setTimeout(() => {\r\n                this.map.removeInteraction(this.draw);\r\n            }, 100);\r\n\r\n            let outCoords = [];\r\n            let ccc = geomClone.getCoordinates()[0];\r\n\r\n            for (let cc of ccc) {\r\n                outCoords.push([Math.round(cc[0] * 1000000) / 1000000, Math.round(cc[1] * 1000000) / 1000000]);\r\n            }\r\n\r\n            this.callback(outCoords);\r\n        });\r\n    }\r\n\r\n\r\n    componentDidMount() {\r\n        this.selectButton = document.getElementById(this.selectId) as HTMLButtonElement;\r\n        this.cancelButton = document.getElementById(this.cancelId) as HTMLButtonElement;\r\n        getMap(this.props.map, this.areaOverlay.olLayer).then((m) => {this.map = m})\r\n    }\r\n\r\n\r\n    setArea() {\r\n        if (!this.map) {\r\n            return;\r\n        }\r\n\r\n        this.selectButton.style.display = 'none';\r\n        this.cancelButton.style.display = '';\r\n\r\n        this.areaOverlay.source.clear();\r\n        this.map.addInteraction(this.draw);\r\n        this.callback(null);\r\n    }\r\n\r\n    cancel() {\r\n        if (!this.map) {\r\n            return;\r\n        }\r\n        this.selectButton.style.display = '';\r\n        this.cancelButton.style.display = 'none';\r\n\r\n        this.areaOverlay.source.clear();\r\n        this.map.removeInteraction(this.draw);\r\n\r\n        this.callback(null);\r\n    }\r\n\r\n    render() {\r\n        return <div style={{margin: '10px'}}>\r\n            <button id={this.selectId} onClick={() => {\r\n                this.setArea()\r\n            }}>Select Area\r\n            </button>\r\n            <button id={this.cancelId} onClick={() => {\r\n                this.cancel()\r\n            }} style={{display: 'none'}}>Cancel\r\n            </button>\r\n        </div>\r\n    }\r\n}\r\n"]}
\ No newline at end of file
diff --git a/dist/react/Slider.d.ts b/dist/react/Slider.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5adb4e157e91eb629f5b54330b92a2a7ea95532
--- /dev/null
+++ b/dist/react/Slider.d.ts
@@ -0,0 +1,31 @@
+/// <reference types="react" />
+/**
+ * Created by glenn on 7/6/2017.
+ */
+import { React } from './reactRedux';
+export declare class Slider extends React.Component<{
+    change: (d: number) => any;
+    steps?: number;
+    animate?: boolean;
+}, 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;
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    updateRunning(): void;
+    startAnimate(): void;
+    stopAnimate(): void;
+    restartAnimate(): void;
+    render(): JSX.Element;
+}
diff --git a/dist/react/Slider.jsx b/dist/react/Slider.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..978add03703711cd30c7897075ff71f1db6f84bc
--- /dev/null
+++ b/dist/react/Slider.jsx
@@ -0,0 +1,116 @@
+/**
+ * Created by glenn on 7/6/2017.
+ */
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var reactRedux_1 = require("./reactRedux");
+var makeGuid_1 = require("../util/makeGuid");
+var Slider = (function (_super) {
+    __extends(Slider, _super);
+    function Slider(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.uid = makeGuid_1.default();
+        _this.startUid = makeGuid_1.default();
+        _this.endUid = makeGuid_1.default();
+        _this.intervalUid = makeGuid_1.default();
+        _this.running = false;
+        return _this;
+    }
+    Slider.prototype.componentDidMount = function () {
+        this.el = document.getElementById(this.uid);
+        this.minVal = parseFloat(this.el.min);
+        this.maxVal = parseFloat(this.el.max);
+        this.step = parseFloat(this.el.step);
+        this.startButton = document.getElementById(this.startUid);
+        this.endButton = document.getElementById(this.endUid);
+        this.intervalSelect = document.getElementById(this.intervalUid);
+    };
+    Slider.prototype.updateRunning = function () {
+        this.startButton.disabled = this.running;
+        this.el.disabled = this.running;
+        this.endButton.disabled = !this.running;
+    };
+    Slider.prototype.startAnimate = function () {
+        var _this = this;
+        this.running = true;
+        this.updateRunning();
+        this.interval = setInterval(function () {
+            var val = parseFloat(_this.el.value);
+            val += _this.step;
+            if (val > _this.maxVal) {
+                val = _this.minVal;
+            }
+            _this.el.value = val.toString();
+            _this.props.change(val);
+            console.log(parseFloat(_this.el.value));
+        }, parseInt(this.intervalSelect.value));
+    };
+    Slider.prototype.stopAnimate = function () {
+        clearInterval(this.interval);
+        this.running = false;
+        this.updateRunning();
+    };
+    Slider.prototype.restartAnimate = function () {
+        if (this.running) {
+            this.stopAnimate();
+            this.startAnimate();
+        }
+    };
+    Slider.prototype.render = function () {
+        var _this = this;
+        var theInput;
+        if (this.props.steps) {
+            theInput = <input id={this.uid} type="range" min="0" max={this.props.steps} step={1} defaultValue="0" onChange={function (evt) {
+                _this.props.change(parseFloat(evt.target.value));
+            }} style={{ width: '100%' }}/>;
+        }
+        else {
+            theInput = <input id={this.uid} type="range" min="0" max="100" step="0.1" defaultValue="0" onChange={function (evt) {
+                _this.props.change(parseFloat(evt.target.value));
+            }} style={{ width: '100%' }}/>;
+        }
+        var start = null;
+        var stop = null;
+        var intervalSelect = null;
+        if (this.props.animate) {
+            start = <button id={this.startUid} onClick={function () {
+                _this.startAnimate();
+            }}>Start</button>;
+            stop = <button id={this.endUid} onClick={function () {
+                _this.stopAnimate();
+            }}>Stop</button>;
+            intervalSelect = <span>
+            <label>Interval (s)</label>
+            <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>
+                <option value="400">0.4</option>
+                <option value="500">0.5</option>
+                <option value="600">0.6</option>
+                <option value="700">0.7</option>
+                <option value="800">0.8</option>
+                <option value="900">0.9</option>
+                <option value="1000">1.0</option>
+            </select>
+            </span>;
+        }
+        return <div>
+            {theInput}
+            {start}{stop}{intervalSelect}
+        </div>;
+    };
+    return Slider;
+}(reactRedux_1.React.Component));
+exports.Slider = Slider;
+//# sourceMappingURL=Slider.jsx.map
\ No newline at end of file
diff --git a/dist/react/Slider.jsx.map b/dist/react/Slider.jsx.map
new file mode 100644
index 0000000000000000000000000000000000000000..2028b07823b76694a944976cb399190f5d1055e9
--- /dev/null
+++ b/dist/react/Slider.jsx.map
@@ -0,0 +1 @@
+{"version":3,"file":"Slider.jsx","sourceRoot":"","sources":["../../src/react/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\n\r\nimport {React} from './reactRedux';\r\nimport makeGuid from '../util/makeGuid';\r\n\r\n\r\nexport class Slider extends React.Component<{ change: (d: number) => any, steps?: number, animate?: boolean }, 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, context) {\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\r\n    updateRunning() {\r\n\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\r\n    render() {\r\n\r\n        let theInput;\r\n\r\n        if (this.props.steps) {\r\n            theInput = <input id={this.uid}\r\n                              type=\"range\" min=\"0\" max={this.props.steps} step={1}\r\n                              defaultValue=\"0\"\r\n                              onChange={(evt) => {\r\n                                  this.props.change(parseFloat(evt.target.value))\r\n                              }}\r\n                              style={{width: '100%'}}\r\n            />\r\n        } else {\r\n            theInput = <input id={this.uid}\r\n                              type=\"range\" min=\"0\" max=\"100\" step=\"0.1\"\r\n                              defaultValue=\"0\"\r\n                              onChange={(evt) => {\r\n                                  this.props.change(parseFloat(evt.target.value))\r\n                              }}\r\n                              style={{width: '100%'}}\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            {theInput}\r\n            {start}{stop}{intervalSelect}\r\n        </div>\r\n    }\r\n\r\n}"]}
\ No newline at end of file
diff --git a/dist/react/helpers/dateFormat.d.ts b/dist/react/helpers/dateFormat.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5062a01a1264f315056ba202e73db900ed5f0c25
--- /dev/null
+++ b/dist/react/helpers/dateFormat.d.ts
@@ -0,0 +1,5 @@
+/**
+ * Created by glenn on 6/13/2017.
+ */
+export declare function stringToDate(dateStr: string): Date;
+export declare function dateToString(dte: Date, zeroPad?: boolean): string;
diff --git a/dist/react/helpers/dateFormat.js b/dist/react/helpers/dateFormat.js
new file mode 100644
index 0000000000000000000000000000000000000000..3512fe2e4e92f3b7bd9e81cc71681d0f296d1f77
--- /dev/null
+++ b/dist/react/helpers/dateFormat.js
@@ -0,0 +1,27 @@
+/**
+ * Created by glenn on 6/13/2017.
+ */
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function stringToDate(dateStr) {
+    var parts = dateStr.split('/');
+    var mn = parseInt(parts[0]) - 1;
+    var d = parseInt(parts[1]);
+    var y = parseInt(parts[2]);
+    var dte = new Date(y, mn, d);
+    dte.setHours(0, 0, 0);
+    return dte;
+}
+exports.stringToDate = stringToDate;
+function dateToString(dte, zeroPad) {
+    if (zeroPad === void 0) { zeroPad = true; }
+    var mn = (dte.getMonth() + 1).toString();
+    var d = dte.getDate().toString();
+    if (zeroPad) {
+        mn = mn.length == 1 ? '0' + mn : mn;
+        d = d.length == 1 ? '0' + d : d;
+    }
+    return mn + "/" + d + "/" + dte.getFullYear();
+}
+exports.dateToString = dateToString;
+//# sourceMappingURL=dateFormat.js.map
\ No newline at end of file
diff --git a/dist/react/helpers/dateFormat.js.map b/dist/react/helpers/dateFormat.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..e5f85c844e493541c0b7eeb6c799f902671e8e7e
--- /dev/null
+++ b/dist/react/helpers/dateFormat.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"dateFormat.js","sourceRoot":"","sources":["../../../src/react/helpers/dateFormat.ts"],"names":[],"mappings":"AAAA;;GAEG;;;AAEH,sBAA6B,OAAe;IACxC,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE/B,IAAI,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChC,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3B,IAAI,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3B,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IAC7B,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAEtB,MAAM,CAAC,GAAG,CAAC;AACf,CAAC;AAXD,oCAWC;AAED,sBAA6B,GAAS,EAAE,OAAsB;IAAtB,wBAAA,EAAA,cAAsB;IAC1D,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACzC,IAAI,CAAC,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC;IAEjC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA,CAAC;QACT,EAAE,GAAG,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC;QACpC,CAAC,GAAI,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAI,CAAC,CAAE;IACvC,CAAC;IAED,MAAM,CAAI,EAAE,SAAI,CAAC,SAAI,GAAG,CAAC,WAAW,EAAI,CAAC;AAC7C,CAAC;AAVD,oCAUC","sourcesContent":["/**\r\n * Created by glenn on 6/13/2017.\r\n */\r\n\r\nexport function stringToDate(dateStr: string): Date {\r\n    let parts = dateStr.split('/');\r\n\r\n    let mn = parseInt(parts[0]) - 1;\r\n    let d = parseInt(parts[1]);\r\n    let y = parseInt(parts[2]);\r\n\r\n    let dte = new Date(y, mn, d);\r\n    dte.setHours(0, 0, 0);\r\n\r\n    return dte;\r\n}\r\n\r\nexport function dateToString(dte: Date, zeroPad:boolean = true): string {\r\n    let mn = (dte.getMonth() + 1).toString();\r\n    let d = dte.getDate().toString();\r\n\r\n    if (zeroPad){\r\n        mn = mn.length == 1 ? '0' + mn : mn;\r\n        d  = d.length == 1 ? '0' + d  : d ;\r\n    }\r\n\r\n    return `${mn}/${d}/${dte.getFullYear()}`;\r\n}"]}
\ No newline at end of file
diff --git a/dist/react/helpers/get_map.d.ts b/dist/react/helpers/get_map.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2219068eb50fbd808a9dd1afdfc5fc3c3e9b57f
--- /dev/null
+++ b/dist/react/helpers/get_map.d.ts
@@ -0,0 +1,5 @@
+/**
+ * Created by glenn on 7/6/2017.
+ */
+import ol = require('custom-ol');
+export default function (map: ol.Map | (() => ol.Map), layer: ol.layer.Base): Promise<ol.Map>;
diff --git a/dist/react/helpers/get_map.js b/dist/react/helpers/get_map.js
new file mode 100644
index 0000000000000000000000000000000000000000..25c32f815d7098bab0afd76352dce4108b5baac4
--- /dev/null
+++ b/dist/react/helpers/get_map.js
@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function default_1(map, layer) {
+    return new Promise(function (resolve, reject) {
+        if (typeof map == 'function') {
+            var getMap_1 = map;
+            var g_1 = setInterval(function () {
+                var m = getMap_1();
+                if (m) {
+                    m.addLayer(layer);
+                    clearInterval(g_1);
+                    resolve(m);
+                    /*                    console.log(m);
+                                        return m;*/
+                }
+            }, 15);
+        }
+        else {
+            var m = map;
+            m.addLayer(layer);
+            resolve(m);
+        }
+    });
+}
+exports.default = default_1;
+//# sourceMappingURL=get_map.js.map
\ No newline at end of file
diff --git a/dist/react/helpers/get_map.js.map b/dist/react/helpers/get_map.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..1779b323eb0ead4a054dadc62c18a7c1a5f210bc
--- /dev/null
+++ b/dist/react/helpers/get_map.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"get_map.js","sourceRoot":"","sources":["../../../src/react/helpers/get_map.ts"],"names":[],"mappings":";;AAKA,mBAAyB,GAA4B,EAAE,KAAoB;IACvE,MAAM,CAAC,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;QAE/B,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC;YAC3B,IAAI,QAAM,GAAG,GAAmB,CAAC;YAEjC,IAAI,GAAC,GAAG,WAAW,CAAC;gBAChB,IAAI,CAAC,GAAG,QAAM,EAAE,CAAC;gBAEjB,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACJ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBAClB,aAAa,CAAC,GAAC,CAAC,CAAC;oBACjB,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC/B;mDAC+B;gBACf,CAAC;YACL,CAAC,EAAE,EAAE,CAAC,CAAC;QACX,CAAC;QAAC,IAAI,CAAC,CAAC;YACJ,IAAI,CAAC,GAAG,GAAa,CAAC;YACtB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAClB,OAAO,CAAC,CAAC,CAAC,CAAC;QACf,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC;AAvBD,4BAuBC","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\nimport ol = require('custom-ol');\r\n\r\nexport default function (map: ol.Map | (() => ol.Map), layer: ol.layer.Base): Promise<ol.Map> {\r\n    return new Promise((resolve, reject) => {\r\n\r\n        if (typeof map == 'function') {\r\n            let getMap = map as () => ol.Map;\r\n\r\n            let g = setInterval(() => {\r\n                let m = getMap();\r\n\r\n                if (m) {\r\n                    m.addLayer(layer);\r\n                    clearInterval(g);\r\n                    resolve(m);\r\n/*                    console.log(m);\r\n                    return m;*/\r\n                }\r\n            }, 15);\r\n        } else {\r\n            let m = map as ol.Map;\r\n            m.addLayer(layer);\r\n            resolve(m);\r\n        }\r\n    });\r\n}\r\n\r\n"]}
\ No newline at end of file
diff --git a/dist/react/reactRedux.d.ts b/dist/react/reactRedux.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bae2e809f5e024c1c5ed9f7899aeb122ae9d51d9
--- /dev/null
+++ b/dist/react/reactRedux.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+export import React = require('react');
+export import ReactDom = require('react-dom');
+export { connect, Provider } from 'react-redux';
+export interface iAction {
+    type: string;
+}
diff --git a/dist/react/reactRedux.js b/dist/react/reactRedux.js
new file mode 100644
index 0000000000000000000000000000000000000000..0203b991ffaa904f6c68633c327c483188cfb905
--- /dev/null
+++ b/dist/react/reactRedux.js
@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Created by glenn on 6/12/2017.
+ */
+exports.React = require("react");
+exports.ReactDom = require("react-dom");
+var react_redux_1 = require("react-redux");
+exports.connect = react_redux_1.connect;
+exports.Provider = react_redux_1.Provider;
+//# sourceMappingURL=reactRedux.js.map
\ No newline at end of file
diff --git a/dist/react/reactRedux.js.map b/dist/react/reactRedux.js.map
new file mode 100644
index 0000000000000000000000000000000000000000..ea7f0becbfb54abbf82a5c75a8d4b33adb1da235
--- /dev/null
+++ b/dist/react/reactRedux.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"reactRedux.js","sourceRoot":"","sources":["../../src/react/reactRedux.ts"],"names":[],"mappings":";;AAAA;;GAEG;AACH,iCAAuC;AACvC,wCAA8C;AAC9C,2CAAgD;AAAvC,gCAAA,OAAO,CAAA;AAAE,iCAAA,QAAQ,CAAA","sourcesContent":["/**\r\n * Created by glenn on 6/12/2017.\r\n */\r\nexport import React = require('react');\r\nexport import ReactDom = require('react-dom');\r\nexport { connect, Provider } from 'react-redux';\r\n\r\nexport interface iAction{\r\n    type: string;\r\n}"]}
\ No newline at end of file
diff --git a/package.json b/package.json
index 26215179cd1ef5d247e6537d10459f215d28514e..3130bbe9b50ce41fb15869774e7d75b8a92c50f4 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,6 @@
     "karma-typescript": "monounity/karma-typescript#2.1.8",
     "karma-webpack": "^2.0.2",
     "phantomjs-prebuilt": "^2.1.14",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
     "source-map-loader": "^0.2.0",
     "ts-loader": "^2.0.1",
     "ts-node": "^2.1.0",
@@ -56,5 +54,11 @@
     "type": "git",
     "url": "https://github.com/glennvorhes/webmapsjs.git"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@types/es6-promise": "0.0.32",
+    "es6-promise": "^4.1.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.5"
+  }
 }
diff --git a/src/react/DatePick.tsx b/src/react/DatePick.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1944e4a8ffe09630fbf64a81f52ba549931f63f3
--- /dev/null
+++ b/src/react/DatePick.tsx
@@ -0,0 +1,48 @@
+/**
+ * Created by glenn on 6/14/2017.
+ */
+
+
+import {React} from './reactRedux';
+import $ = require('jquery');
+import 'jquery-ui';
+import makeGuid from '../util/makeGuid';
+
+import {dateToString} from './helpers/dateFormat';
+
+/**
+ * params label, id, initialDate, change callback with value as string
+ */
+export class DatePick extends React.Component<{label: string, id?: string, initialDate?: Date, change: (val: string) => any}, null> {
+    defaultId: string;
+
+    constructor(props, context){
+        super(props, context);
+        this.defaultId = makeGuid();
+    }
+
+    componentDidMount() {
+        let $el = $('#' + (this.props.id || this.defaultId));
+
+        $el.datepicker(
+            {
+                onSelect: () => {
+                    this.props.change($el.val());
+                }
+            }
+        );
+    }
+
+    render() {
+        return <span>
+            <label>{this.props.label}</label>
+            <input id={this.props.id || this.defaultId} type="text"
+                   style={{margin: "0 10px 0 5px", width: '73px', textAlign: 'center'}}
+                   defaultValue={dateToString(this.props.initialDate || new Date())}
+                   readOnly={true}
+            />
+        </span>
+    }
+}
+
+export default DatePick;
\ No newline at end of file
diff --git a/src/react/DateRange.tsx b/src/react/DateRange.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b19fa06d7e553a77a6c9e25d21ac991ba3c9d543
--- /dev/null
+++ b/src/react/DateRange.tsx
@@ -0,0 +1,104 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+
+import {React} from './reactRedux';
+import $ = require('jquery');
+import 'jquery-ui';
+import makeGuid from '../util/makeGuid';
+import * as fixDate from './helpers/dateFormat';
+import DatePick from './DatePick';
+
+
+export class DateRange extends React.Component<{
+    maxRange: number,
+    callback: (start: string|Date, end: string|Date) => any,
+    minRange?: number
+}, null> {
+    startId = makeGuid();
+    endId = makeGuid();
+    startInput: HTMLInputElement;
+    endInput: HTMLInputElement;
+    start: Date;
+    end: Date;
+    maxRange: number;
+    minRange: number;
+    numDays: number;
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.maxRange = Math.round(this.props.maxRange) - 1;
+        this.minRange = typeof this.props['minRange'] == 'number' ? Math.round(this.props['minRange']) : 1;
+
+        if (this.minRange > this.maxRange) {
+            throw "DateRange component: Max range must be greater than min range";
+        }
+
+        this.end = new Date();
+        this.end.setHours(0, 0, 0);
+        this.start = new Date(this.end);
+        this.start.setDate(this.start.getDate() - this.maxRange);
+        this.setNumDays();
+    }
+
+    setNumDays() {
+        this.numDays = Math.round((this.end.getTime() - this.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+    }
+
+
+    componentDidMount() {
+        this.startInput = document.getElementById(this.startId) as HTMLInputElement;
+        this.endInput = document.getElementById(this.endId) as HTMLInputElement;
+        this.props.callback(this.start, this.end);
+    }
+
+    get needReset(): boolean {
+        return this.numDays > this.maxRange || this.numDays < this.minRange;
+    }
+
+    setStart(s: string) {
+        this.start = fixDate.stringToDate(s);
+        this.setNumDays();
+
+        if (this.needReset) {
+            this.end = new Date(this.start);
+
+            if (this.numDays > this.maxRange) {
+                this.end.setDate(this.end.getDate() + this.maxRange);
+            } else {
+                this.end.setDate(this.end.getDate() + this.minRange - 1);
+            }
+
+            this.endInput.value = fixDate.dateToString(this.end);
+            this.setNumDays();
+        }
+        this.props.callback(this.start, this.end);
+    }
+
+    setEnd(s: string) {
+        this.end = fixDate.stringToDate(s);
+        this.setNumDays();
+
+        if (this.needReset) {
+            this.start = new Date(this.end);
+
+            if (this.numDays > this.maxRange) {
+                this.start.setDate(this.start.getDate() - this.maxRange);
+            } else {
+                this.start.setDate(this.start.getDate() - this.minRange + 1);
+            }
+
+            this.startInput.value = fixDate.dateToString(this.start);
+            this.setNumDays();
+        }
+        this.props.callback(this.start, this.end);
+    }
+
+    render() {
+        return <div>
+            <DatePick id={this.startId} label="Start" initialDate={this.start} change={(s) => {this.setStart(s)}}/>
+            <DatePick id={this.endId} label="End" initialDate={this.end} change={(s) => {this.setEnd(s)}}/>
+        </div>;
+    }
+}
diff --git a/src/react/Radio.tsx b/src/react/Radio.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d5eb874d08281eb6c3b96733b98b0bef2471e650
--- /dev/null
+++ b/src/react/Radio.tsx
@@ -0,0 +1,125 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+
+
+import {React} from './reactRedux';
+import $ = require('jquery');
+import 'jquery-ui';
+import makeGuid from '../util/makeGuid';
+
+class RadioItem extends React.Component<{ groupId: string, text: string, checked: boolean, inline: boolean, change: (s: string) => any, connected?: boolean, index?: number}, null> {
+    guid: string = makeGuid();
+
+
+    render() {
+        let style = {};
+        if (this.props.inline) {
+            style['display'] = 'inline-block';
+            style['padding'] = '0 5px';
+        }
+
+        let props = {
+            id: this.guid,
+            type: "radio",
+            name: this.props.groupId,
+            value: typeof this.props.index == 'undefined' ? this.props.text : this.props.index.toFixed(),
+            onChange: (evt) => {
+                this.props.change(evt.target.value);
+                evt.target.checked = true;
+            }
+        };
+
+        if (this.props.connected) {
+            props['checked'] = this.props.checked
+        } else {
+            props['defaultChecked'] = this.props.checked
+        }
+
+        return <li style={style}>
+            <input {...props}/>
+            <label htmlFor={this.guid}>{this.props.text}</label>
+        </li>;
+    }
+}
+
+class RadioBase extends React.Component<
+    { title: string, items: string[], callback: (val: string) => any, inline?: boolean, selectedValueOrIndex: string|number, connected: boolean}, null> {
+    inline: boolean;
+    groupId: string;
+
+    constructor(props, context) {
+        super(props, context);
+        this.inline = this.props.inline || false;
+        this.groupId = this.props.title.toLowerCase().replace(/ /g, '');
+    }
+
+    render() {
+        let style = {};
+        if (this.inline) {
+            style['display'] = 'inline-block';
+            style['padding'] = '0 5px';
+        }
+
+        let arr = [];
+
+        for (let i = 0; i < this.props.items.length; i++) {
+
+            let itemProps = {
+                groupId: this.groupId,
+                text: this.props.items[i],
+                inline: this.props.inline,
+                change: (s) => (this.props.callback(s)),
+                key: this.props.items[i],
+                connected: this.props.connected || false,
+                checked: false,
+
+            };
+
+            if (typeof this.props.selectedValueOrIndex == 'number'){
+                itemProps.checked = i == this.props.selectedValueOrIndex;
+                itemProps['index'] = i;
+            } else {
+                itemProps.checked = this.props.items[i] == this.props.selectedValueOrIndex;
+            }
+
+            arr.push(<RadioItem {...itemProps}/>)
+        }
+
+        return <div>
+            <h4 style={{margin: '7px 0'}}>{this.props.title}</h4>
+            <ul style={{listStyle: 'none', margin: '0', paddingLeft: "10px", maxHeight: "200px", overflowY: 'auto'}}>
+                {arr}
+            </ul>
+        </div>
+    }
+}
+
+
+export class Radio extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, defaultValue: string }, null> {
+
+    render() {
+        return <RadioBase
+            title={this.props.title}
+            items={this.props.items}
+            callback={this.props.callback}
+            inline={this.props.inline}
+            selectedValueOrIndex={this.props.defaultValue}
+            connected={false}
+        />
+    }
+}
+
+export class RadioConnected extends React.Component<{ title: string, items: string[], callback: (val: string) => any, inline?: boolean, selectedIndex: number }, null> {
+
+    render() {
+        return <RadioBase
+            title={this.props.title}
+            items={this.props.items}
+            callback={this.props.callback}
+            inline={this.props.inline}
+            selectedValueOrIndex={this.props.selectedIndex}
+            connected={true}
+        />
+    }
+}
\ No newline at end of file
diff --git a/src/react/SelectArea.tsx b/src/react/SelectArea.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..12a378929f0d98bda5c655b101de3000649c1288
--- /dev/null
+++ b/src/react/SelectArea.tsx
@@ -0,0 +1,121 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+
+import {React} from './reactRedux';
+import ol = require('custom-ol');
+import LayerBaseVectorGeoJson from '../layers/LayerBaseVectorGeoJson';
+import {proj4326, proj3857} from '../olHelpers/projections'
+import makeGuid from '../util/makeGuid';
+import getMap from './helpers/get_map';
+
+
+export class SelectArea extends React.Component<{ map: ol.Map | (() => ol.Map), callback: (coords: Array<number[]>) => any }, null> {
+    map: ol.Map;
+    callback: (coords: Array<number[]>) => any;
+    areaOverlay: LayerBaseVectorGeoJson;
+    draw: ol.interaction.Draw;
+    selectId: string;
+    cancelId: string;
+    selectButton: HTMLButtonElement;
+    cancelButton: HTMLButtonElement;
+
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.selectId = makeGuid();
+        this.cancelId = makeGuid();
+
+        this.callback = this.props.callback;
+
+        this.areaOverlay = new LayerBaseVectorGeoJson('',
+            {
+                style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 0, 237, 0.1)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: 'rgb(255, 0, 237)',
+                        width: 2
+                    })
+                }),
+                transform: {dataProjection: proj4326, featureProjection: proj3857}
+            });
+
+        this.draw = new ol.interaction.Draw({
+            source: this.areaOverlay.source,
+            type: 'Polygon'
+        });
+
+        this.draw.on('drawend', (evt) => {
+            this.selectButton.style.display = '';
+            this.cancelButton.style.display = 'none';
+
+            let geom = evt.feature.getGeometry();
+            let geomClone = geom.clone();
+
+            geomClone.transform('EPSG:3857', 'EPSG:4326');
+
+            setTimeout(() => {
+                this.map.removeInteraction(this.draw);
+            }, 100);
+
+            let outCoords = [];
+            let ccc = geomClone.getCoordinates()[0];
+
+            for (let cc of ccc) {
+                outCoords.push([Math.round(cc[0] * 1000000) / 1000000, Math.round(cc[1] * 1000000) / 1000000]);
+            }
+
+            this.callback(outCoords);
+        });
+    }
+
+
+    componentDidMount() {
+        this.selectButton = document.getElementById(this.selectId) as HTMLButtonElement;
+        this.cancelButton = document.getElementById(this.cancelId) as HTMLButtonElement;
+        getMap(this.props.map, this.areaOverlay.olLayer).then((m) => {this.map = m})
+    }
+
+
+    setArea() {
+        if (!this.map) {
+            return;
+        }
+
+        this.selectButton.style.display = 'none';
+        this.cancelButton.style.display = '';
+
+        this.areaOverlay.source.clear();
+        this.map.addInteraction(this.draw);
+        this.callback(null);
+    }
+
+    cancel() {
+        if (!this.map) {
+            return;
+        }
+        this.selectButton.style.display = '';
+        this.cancelButton.style.display = 'none';
+
+        this.areaOverlay.source.clear();
+        this.map.removeInteraction(this.draw);
+
+        this.callback(null);
+    }
+
+    render() {
+        return <div style={{margin: '10px'}}>
+            <button id={this.selectId} onClick={() => {
+                this.setArea()
+            }}>Select Area
+            </button>
+            <button id={this.cancelId} onClick={() => {
+                this.cancel()
+            }} style={{display: 'none'}}>Cancel
+            </button>
+        </div>
+    }
+}
diff --git a/src/react/Slider.tsx b/src/react/Slider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b5d448dd8ae61e243c3f76412fac87c86f44cda1
--- /dev/null
+++ b/src/react/Slider.tsx
@@ -0,0 +1,141 @@
+/**
+ * Created by glenn on 7/6/2017.
+ */
+
+
+import {React} from './reactRedux';
+import makeGuid from '../util/makeGuid';
+
+
+export class Slider extends React.Component<{ change: (d: number) => any, steps?: number, animate?: boolean }, 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;
+
+    constructor(props, context) {
+        super(props, context);
+        this.uid = makeGuid();
+        this.startUid = makeGuid();
+        this.endUid = makeGuid();
+        this.intervalUid = makeGuid();
+        this.running = false;
+    }
+
+    componentDidMount() {
+        this.el = document.getElementById(this.uid) as HTMLInputElement;
+        this.minVal = parseFloat(this.el.min);
+        this.maxVal = parseFloat(this.el.max);
+        this.step = parseFloat(this.el.step);
+        this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;
+        this.endButton = document.getElementById(this.endUid) as HTMLButtonElement;
+        this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;
+    }
+
+    updateRunning() {
+
+        this.startButton.disabled = this.running;
+        this.el.disabled = this.running;
+        this.endButton.disabled = !this.running;
+    }
+
+    startAnimate() {
+        this.running = true;
+        this.updateRunning();
+        this.interval = setInterval(() => {
+            let val = parseFloat(this.el.value);
+            val += this.step;
+            if (val > this.maxVal) {
+                val = this.minVal
+            }
+
+            this.el.value = val.toString();
+            this.props.change(val);
+            console.log(parseFloat(this.el.value));
+        }, parseInt(this.intervalSelect.value));
+    }
+
+    stopAnimate() {
+        clearInterval(this.interval);
+        this.running = false;
+        this.updateRunning();
+    }
+
+    restartAnimate(){
+        if (this.running){
+            this.stopAnimate();
+            this.startAnimate();
+        }
+    }
+
+
+    render() {
+
+        let theInput;
+
+        if (this.props.steps) {
+            theInput = <input id={this.uid}
+                              type="range" min="0" max={this.props.steps} step={1}
+                              defaultValue="0"
+                              onChange={(evt) => {
+                                  this.props.change(parseFloat(evt.target.value))
+                              }}
+                              style={{width: '100%'}}
+            />
+        } else {
+            theInput = <input id={this.uid}
+                              type="range" min="0" max="100" step="0.1"
+                              defaultValue="0"
+                              onChange={(evt) => {
+                                  this.props.change(parseFloat(evt.target.value))
+                              }}
+                              style={{width: '100%'}}
+            />
+        }
+
+        let start = null;
+        let stop = null;
+        let intervalSelect = null;
+
+        if (this.props.animate) {
+            start = <button id={this.startUid} onClick={() => {
+                this.startAnimate()
+            }}>Start</button>;
+
+            stop = <button id={this.endUid} onClick={() => {
+                this.stopAnimate()
+            }}>Stop</button>;
+
+            intervalSelect = <span>
+            <label>Interval (s)</label>
+            <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>
+                <option value="400">0.4</option>
+                <option value="500">0.5</option>
+                <option value="600">0.6</option>
+                <option value="700">0.7</option>
+                <option value="800">0.8</option>
+                <option value="900">0.9</option>
+                <option value="1000">1.0</option>
+            </select>
+            </span>;
+        }
+
+        return <div>
+            {theInput}
+            {start}{stop}{intervalSelect}
+        </div>
+    }
+
+}
\ No newline at end of file
diff --git a/src/react/helpers/dateFormat.ts b/src/react/helpers/dateFormat.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6dde44296c65b0bb7e84d4ac20ef3d657a61f2b
--- /dev/null
+++ b/src/react/helpers/dateFormat.ts
@@ -0,0 +1,28 @@
+/**
+ * Created by glenn on 6/13/2017.
+ */
+
+export function stringToDate(dateStr: string): Date {
+    let parts = dateStr.split('/');
+
+    let mn = parseInt(parts[0]) - 1;
+    let d = parseInt(parts[1]);
+    let y = parseInt(parts[2]);
+
+    let dte = new Date(y, mn, d);
+    dte.setHours(0, 0, 0);
+
+    return dte;
+}
+
+export function dateToString(dte: Date, zeroPad:boolean = true): string {
+    let mn = (dte.getMonth() + 1).toString();
+    let d = dte.getDate().toString();
+
+    if (zeroPad){
+        mn = mn.length == 1 ? '0' + mn : mn;
+        d  = d.length == 1 ? '0' + d  : d ;
+    }
+
+    return `${mn}/${d}/${dte.getFullYear()}`;
+}
\ No newline at end of file
diff --git a/src/react/helpers/get_map.ts b/src/react/helpers/get_map.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00c063cf8fa98b5df65b6a88b18d820c4a8024b9
--- /dev/null
+++ b/src/react/helpers/get_map.ts
@@ -0,0 +1,30 @@
+/**
+ * Created by glenn on 7/6/2017.
+ */
+import ol = require('custom-ol');
+
+export default function (map: ol.Map | (() => ol.Map), layer: ol.layer.Base): Promise<ol.Map> {
+    return new Promise((resolve, reject) => {
+
+        if (typeof map == 'function') {
+            let getMap = map as () => ol.Map;
+
+            let g = setInterval(() => {
+                let m = getMap();
+
+                if (m) {
+                    m.addLayer(layer);
+                    clearInterval(g);
+                    resolve(m);
+/*                    console.log(m);
+                    return m;*/
+                }
+            }, 15);
+        } else {
+            let m = map as ol.Map;
+            m.addLayer(layer);
+            resolve(m);
+        }
+    });
+}
+
diff --git a/src/react/reactRedux.ts b/src/react/reactRedux.ts
new file mode 100644
index 0000000000000000000000000000000000000000..baf3996c30ff7313c2572e2bfa507568c1e01e56
--- /dev/null
+++ b/src/react/reactRedux.ts
@@ -0,0 +1,10 @@
+/**
+ * Created by glenn on 6/12/2017.
+ */
+export import React = require('react');
+export import ReactDom = require('react-dom');
+export { connect, Provider } from 'react-redux';
+
+export interface iAction{
+    type: string;
+}
\ No newline at end of file