compare-test.js

        _this.olStyle = function (feature) {
            var checkProperties = feature.getProperties();
            var checkProperty = checkProperties[_this.propertyName];
            var returnValue;
            if (_this.propertyStyleLookup[checkProperty] !== undefined) {
                returnValue = [_this.propertyStyleLookup[checkProperty]];
            }
            else {
                returnValue = [_this.defaultStyle];
            }
            return returnValue;
        };
        if (_this.defaultLabelHtml !== null) {
            _this.legendArray.push(_this.defaultLabelHtml);
        }
        _this.legendHtml = '<ul>';
        for (var _b = 0, _c = _this.legendArray; _b < _c.length; _b++) {
            var h = _c[_b];
            _this.legendHtml += "<li>" + h + "</li>";
        }
        _this.legendHtml += '</ul>';
        return _this;
    }
    return UniqueValueSymbol;
}(SymbolGenerator));
/**
 * style and legend object
 * @typedef {object} styleAndLegend
 * @property {styleFunc} style - style function
 * @property {string} legend - legend content
 */
/**
 *
 * @param {object} esriResponse - layer info
 * @returns {styleAndLegend} style and legend object
 */
function makeFeatureServiceLegendAndSymbol(esriResponse) {
    "use strict";
    var renderer = esriResponse.drawingInfo.renderer;
    var symbolLegendOut = null;
    switch (renderer.type) {
        case 'simple':
            switch (esriResponse.geometryType) {
                case 'esriGeometryPoint':
                    symbolLegendOut = new SingleSymbol(esriResponse, PointSymbol);
                    break;
                case 'esriGeometryPolyline':
                    symbolLegendOut = new SingleSymbol(esriResponse, LineSymbol);
                    break;
                case 'esriGeometryPolygon':
                    symbolLegendOut = new SingleSymbol(esriResponse, PolygonSymbol);
                    break;
                default:
                    console.log(esriResponse);
                    alert(esriResponse.geometryType + ' not handled');
            }
            break;
        case 'uniqueValue':
            switch (esriResponse.geometryType) {
                case 'esriGeometryPoint':
                    symbolLegendOut = new UniqueValueSymbol(esriResponse, PointSymbol);
                    break;
                case 'esriGeometryPolyline':
                    symbolLegendOut = new UniqueValueSymbol(esriResponse, LineSymbol);
                    break;
                case 'esriGeometryPolygon':
                    symbolLegendOut = new UniqueValueSymbol(esriResponse, PolygonSymbol);
                    break;
                default:
                    console.log(esriResponse);
                    alert(esriResponse['geometryType'] + ' not handled');
            }
            break;
        default:
            alert('not handled renderer type: ' + renderer['type']);
    }
    if (symbolLegendOut == null) {
        return { style: undefined, legend: '' };
    }
    else {
        return { style: symbolLegendOut.olStyle, legend: symbolLegendOut.legendHtml };
    }
}
exports.makeFeatureServiceLegendAndSymbol = makeFeatureServiceLegendAndSymbol;
nm.makeFeatureServiceLegendAndSymbol = makeFeatureServiceLegendAndSymbol;
/**
 *
 * @param {object} lyrObject - the layer as defined in the response
 * @param {boolean} [skipLayerNameAndExpander=false] use only icons
 * @returns {string} legend html
 */
function mapServiceLegendItem(lyrObject, skipLayerNameAndExpander) {
    if (skipLayerNameAndExpander === void 0) { skipLayerNameAndExpander = false; }
    skipLayerNameAndExpander = typeof skipLayerNameAndExpander == 'boolean' ? skipLayerNameAndExpander : false;
    var layerName = lyrObject['layerName'];
    var legendItems = lyrObject['legend'];
    var legendHtml = '';
    if (!skipLayerNameAndExpander) {
        legendHtml += "<span class=\"legend-layer-subitem\">" + layerName + "</span>";
    }
    if (legendItems.length == 1) {
        legendHtml = "<img class=\"legend-layer-icon\" height=\"17\" src=\"data:image/png;base64," + legendItems[0]['imageData'] + "\">";
    }
    else {
        if (!skipLayerNameAndExpander) {
            legendHtml += '<span class="legend-items-expander" title="Expand/Collapse">&#9660;</span>';
        }
        legendHtml += '<ul>';
        for (var i = 0; i < legendItems.length; i++) {
            legendHtml += "<li>";
            legendHtml += "<span class=\"legend-layer-subitem\">" + htmlEscape(legendItems[i]['label']) + "</span>";
            legendHtml += "<img class=\"legend-layer-icon\" height=\"17\" src=\"data:image/png;base64," + legendItems[i]['imageData'] + "\">";
            legendHtml += "</li>";
        }
        legendHtml += '</ul>';
    }
    if (!skipLayerNameAndExpander) {
        legendHtml = "<span class=\"legend-layer-subitem\">" + layerName + "</span>" + legendHtml;
    }
    return legendHtml;
}
/**
 * make map service legent
 * @param {object} esriResponse - layer info
 * @returns {string} legend content
 */
function makeMapServiceLegend(esriResponse) {
    "use strict";
    var newLegendHtml = '';
    var layers = esriResponse['layers'];
    if (layers.length == 1) {
        newLegendHtml += mapServiceLegendItem(layers[0], true);
    }
    else {
        newLegendHtml += '<ul>';
        for (var i = 0; i < layers.length; i++) {
            newLegendHtml += '<li>' + mapServiceLegendItem(layers[i]) + '</li>';
        }
        newLegendHtml += '</ul>';
    }
    return newLegendHtml;
}
exports.makeMapServiceLegend = makeMapServiceLegend;
nm.makeMapServiceLegend = makeMapServiceLegend;


/***/ }),
/* 16 */,
/* 17 */,
/* 18 */,
/* 19 */,
/* 20 */,
/* 21 */,
/* 22 */,
/* 23 */,
/* 24 */,
/* 25 */,
/* 26 */,
/* 27 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/**
 * Created by gavorhes on 6/1/2016.
 */

Object.defineProperty(exports, "__esModule", { value: true });
var provide_1 = __webpack_require__(0);
var $ = __webpack_require__(1);
var nm = provide_1.default('collections.layerSwipe');
var LayerSwipe = (function () {
    /**
     *
     * @param {ol.Map} map - the map
     * @param {string} [sliderContent=''] - additional html to be added inside the slider div
     */
    function LayerSwipe(map, sliderContent) {
        if (sliderContent === void 0) { sliderContent = ''; }
        var _this = this;
        sliderContent = sliderContent || '';
        /**
         *
         * @type {Array<LayerBase>}
         */
        this.leftLayers = [];
        /**
         *
         * @type {Array<LayerBase>}
         */
        this.rightLayers = [];
        this._percentRight = 50;
        this.offset = null;
        this._map = map;
        this.$mapElement = $(map.getTargetElement());
        this.$mapElement.append("<div class=\"layer-swiper\">" + sliderContent + "</div>");
        this.$swiper = this.$mapElement.find('.layer-swiper');
        this.percentRight = this.percentRight;
        this.dragging = false;
        this.$mapElement.mouseleave(function () {
            _this.dragging = false;
        });
        this.$swiper.bind('mousewheel DOMMouseScroll', function (evt) {
            evt.preventDefault();
        });
        this.$swiper.mousedown(function (evt) {
            _this.dragging = true;
            _this.offset = evt.offsetX;
        });
        $(window).mouseup(function () {
            _this.dragging = false;
        });
        this.$mapElement.mousemove(function (evt) {
            if (_this.dragging) {
                var mapLeft = _this.$mapElement.position().left;
                var mapWidth = _this.$mapElement.width();
                _this.percentRight = 100 * (evt.pageX - _this.offset - mapLeft) / mapWidth;
            }
        });
    }
    /**
     *
     * @param {LayerBase|*} lyr - layer to be added to left side
     */
    LayerSwipe.prototype.addLeftLayer = function (lyr) {
        var _this = this;
        if (this.leftLayers.indexOf(lyr) != -1) {
            return;
        }
        lyr.olLayer.on('precompose', function (event) {
            var ctx = event['context'];
            var width = ctx.canvas.width * (_this.percentRight / 100);
            ctx.save();
            ctx.beginPath();
            ctx.rect(0, 0, width, ctx.canvas.height);
            ctx.clip();
        });
        lyr.olLayer.on('postcompose', function (event) {
            var ctx = event['context'];
            ctx.restore();
        });
        this.leftLayers.push(lyr);
    };
    /**
     *
     * @param {LayerBase|*} lyr - layer to be added to right side
     */
    LayerSwipe.prototype.addRightLayer = function (lyr) {
        var _this = this;
        if (this.rightLayers.indexOf(lyr) != -1) {
            return;
        }
        lyr.olLayer.on('precompose', function (event) {
            var ctx = event['context'];
            var width = ctx.canvas.width * (_this.percentRight / 100);
            ctx.save();
            ctx.beginPath();
            ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
            ctx.clip();
        });
        lyr.olLayer.on('postcompose', function (event) {
            var ctx = event['context'];
            ctx.restore();
        });
        this.rightLayers.push(lyr);
    };
    Object.defineProperty(LayerSwipe.prototype, "percentRight", {
        get: function () {
            return this._percentRight;
        },
        set: function (percent) {
            var maxed = this.$swiper.position().left + this.$swiper.width() > this.$mapElement.width();
            if (percent < 0) {
                return;
            }
            else if (maxed && percent > this.percentRight) {
                return;
            }
            this._percentRight = percent;
            this.$swiper.css('left', this._percentRight.toFixed(2) + "%");
            this._map.render();
        },
        enumerable: true,
        configurable: true
    });
    return LayerSwipe;
}());
nm.LayerSwipe = LayerSwipe;
exports.default = LayerSwipe;


/***/ }),
/* 28 */,
/* 29 */,
/* 30 */,
/* 31 */,
/* 32 */,
/* 33 */,
/* 34 */,
/* 35 */,
/* 36 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", { value: true });
/**
 * Created by gavorhes on 6/1/2016.
 */
var quickMap_1 = __webpack_require__(7);
var layerSwipe_1 = __webpack_require__(27);
var LayerEsriMapServer_1 = __webpack_require__(10);
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