Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
  • to-ol5
  • coverage
3 results
Blame Permalink
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
layers_LayerItsInventory.js.html 19.72 KiB 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: layers/LayerItsInventory.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: layers/LayerItsInventory.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * Created by gavorhes on 12/8/2015.
 */

import $ from '../jquery/jquery';
import LayerBaseVectorGeoJson from './LayerBaseVectorGeoJson';
import mapPopup from '../olHelpers/mapPopup';
import provide from '../util/provide';
import ol from '../ol/ol';
let nm = provide('layers');


function checkStyleNumber(itsIcon, itsLineStyle, itsIconConfig, itsLineConfig) {
    "use strict";

    //make sure one and only one configuration is defined;
    let configCount = 0;
    if (typeof itsIcon == 'string') {
        configCount++;
    }

    if (typeof itsLineStyle == 'object') {
        itsLineStyle.width = typeof itsLineStyle.width == 'number' ? itsLineStyle.width : 5;
        itsLineStyle.color = typeof itsLineStyle.color == 'string' ? itsLineStyle.color : 'red';
        configCount++;
    }

    if (typeof itsIconConfig == 'object') {
        itsIconConfig.defaultName = itsIconConfig.defaultName || 'Other';

        if (typeof itsIconConfig.iconArray == 'undefined') {
            itsIconConfig.iconArray = [];
        }

        configCount++;
    }

    if (typeof itsLineConfig == 'object') {
        itsLineConfig.defaultName = itsLineConfig.defaultName || 'Other';
        itsLineConfig.defaultWidth = itsLineConfig.defaultWidth || 5;
        itsLineConfig.defaultColor = itsLineConfig.defaultColor || 'red';


        if (typeof itsLineConfig.lineArray == 'undefined') {
            itsLineConfig.lineArray = [];
        }

        // set the width if not defined
        for (let i = 0; i &lt; itsLineConfig.lineArray.length; i++) {
            if (itsLineConfig.lineArray[i].length == 3) {
                itsLineConfig.lineArray[i].push(5);
            }
        }

        configCount++;
    }

    if (configCount > 1) {
        throw 'Only one style config can be defined';
    }
}

/**
 *
 * @param {string} [itsIcon=undefined] the ITS device type icon image see http://transportal.cee.wisc.edu/its/inventory/icons/
 *
 * @param {object} [itsLineStyle=undefined] A single line style
 * @param {string} itsLineStyle.color the line color as rgb or hex
 * @param {number} [itsLineStyle.width=5] the line width
 *
 * @param {object} [itsIconConfig=undefined] The icon subtype configuration
 * @param {string} itsIconConfig.prop The property used to define icon attribute symbolization
 * @param {string} itsIconConfig.defaultName The default name to be used if no other match is found
 * @param {string} itsIconConfig.defaultIcon The default icon to be used for no other matches
 * @param {object} [itsIconConfig.iconArray=[]] an array, items with format [property, name, img]
 *
 * @param {object} [itsLineConfig=undefined] The property used to define icon attribute symbolization
 * @param {string} itsLineConfig.prop The property used to define icon attribute symbolization
 * @param {string} [itsLineConfig.defaultName=Other] The default name to be used if no other match is found
 * @param {string} [itsLineConfig.defaultColor=red] The default line color to be used for no other matches
 * @param {number} [itsLineConfig.defaultWidth=5] The default line width to be used for no other matches
 * @param {object} [itsLineConfig.lineArray=[]] an array, items with format [property, name, color, optional width]
 * @returns {*} undefined, style, or style function
 */
function defineStyle(itsIcon, itsLineStyle, itsIconConfig, itsLineConfig) {
    "use strict";
    checkStyleNumber(itsIcon, itsLineStyle, itsIconConfig, itsLineConfig);

    let _iconUrlRoot = 'http://transportal.cee.wisc.edu/its/inventory/icons/';

    if (itsIcon) {
        return new ol.style.Style({
            image: new ol.style.Icon(
                {
                    src: _iconUrlRoot + itsIcon,
                    crossOrigin: 'anonymous'
                }
            )
        });
    } else if (itsLineStyle) {
        return new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: itsLineStyle.color,
                width: itsLineStyle.width
            })
        });
    } else if (itsIconConfig) {
        return function (feature) {
            let symbolProp = feature.getProperties()[itsIconConfig.prop];
            let iconUrl = _iconUrlRoot + itsIconConfig.defaultIcon;

            for (let i = 0; i &lt; itsIconConfig.iconArray.length; i++) {
                let thisProp = itsIconConfig.iconArray[i];

                if (symbolProp.trim().toLocaleLowerCase() == thisProp[0].trim().toLocaleLowerCase()) {
                    iconUrl = _iconUrlRoot + thisProp[2];
                    break;
                }
            }

            return [new ol.style.Style({
                image: new ol.style.Icon(
                    {
                        src: iconUrl,
                        crossOrigin: 'anonymous'
                    }
                )
            })];
        };
    } else if (itsLineConfig) {
        return function (feature) {
            let symbolProp = feature.getProperties()[itsLineConfig.prop];
            let colr = itsLineConfig.defaultColor || 'red';
            let width = itsLineConfig.defaultWidth || 5;

            for (let i = 0; i &lt; itsLineConfig.lineArray.length; i++) {
                let thisProp = itsLineConfig.lineArray[i];

                if (symbolProp.trim().toLocaleLowerCase() == thisProp[0].trim().toLocaleLowerCase()) {
                    colr = thisProp[2];
                    width = thisProp[3];
                    break;
                }
            }

            return [new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: colr,
                    width: width
                })
            })];
        };
    } else {
        return undefined;
    }
}

/**
 *
 * @param {string} [itsIcon=undefined] the ITS device type icon image see http://transportal.cee.wisc.edu/its/inventory/icons/
 *
 * @param {object} [itsLineStyle=undefined] A single line style
 * @param {string} itsLineStyle.color the line color as rgb or hex
 * @param {number} [itsLineStyle.width=5] the line width
 *
 * @param {object} [itsIconConfig=undefined] The icon subtype configuration
 * @param {string} itsIconConfig.prop The property used to define icon attribute symbolization
 * @param {string} itsIconConfig.defaultName The default name to be used if no other match is found
 * @param {string} itsIconConfig.defaultIcon The default icon to be used for no other matches
 * @param {object} [itsIconConfig.iconArray=[]] an array, items with format [property, name, img]
 *
 * @param {object} [itsLineConfig=undefined] The property used to define icon attribute symbolization
 * @param {string} itsLineConfig.prop The property used to define icon attribute symbolization
 * @param {string} [itsLineConfig.defaultName=Other] The default name to be used if no other match is found
 * @param {string} [itsLineConfig.defaultColor=red] The default line color to be used for no other matches
 * @param {number} [itsLineConfig.defaultWidth=5] The default line width to be used for no other matches
 * @param {object} [itsLineConfig.lineArray=[]] an array, items with format [property, name, color, optional width]
 * @returns {string} html to be added to the legend
 */
function defineLegend(itsIcon, itsLineStyle, itsIconConfig, itsLineConfig) {
    "use strict";

    let iconHeight = 17;

    checkStyleNumber(itsIcon, itsLineStyle, itsIconConfig, itsLineConfig);

    let _iconUrlRoot = 'http://transportal.cee.wisc.edu/its/inventory/icons/';

    if (itsIcon) {
        return `&lt;img src="${_iconUrlRoot + itsIcon}" class="legend-layer-icon" height="${iconHeight}">`;
    } else if (itsLineStyle) {
        return `&lt;hr style="height: ${itsLineStyle.width}px; background-color: ${itsLineStyle.color}">`;
    } else if (itsIconConfig) {
        let outHtml = '';
        outHtml += '&lt;ul>';

        for (let a of itsIconConfig.iconArray) {
            outHtml += `&lt;li>&lt;span class="legend-layer-subitem">${a[1]}&lt;/span>&lt;img src="${_iconUrlRoot + a[2]}" class="legend-layer-icon" height="${iconHeight}">`;
        }
        outHtml += `&lt;li>&lt;span class="legend-layer-subitem">${itsIconConfig.defaultName}&lt;/span>` +
            `&lt;img src="${_iconUrlRoot + itsIconConfig.defaultIcon}" class="legend-layer-icon" height="${iconHeight}">&lt;/li>`;
        outHtml += '&lt;/ul>';

        return outHtml;
    } else if (itsLineConfig) {
        let outHtml = '';
        outHtml += '&lt;ul>';
        for (let ls of itsLineConfig.lineArray) {
            outHtml += `&lt;li>&lt;span class="legend-layer-subitem">${ls[1]}&lt;/span>` +
                `&lt;hr style="height: ${ls[3]}px; background-color: ${ls[2]}">`;
        }
        outHtml += `&lt;li>&lt;span class="legend-layer-subitem">${itsLineConfig.defaultName}&lt;/span>` +
            `&lt;hr style="height: ${itsLineConfig.defaultWidth}px; background-color: ${itsLineConfig.defaultColor}">&lt;/li>`;
        outHtml += '&lt;/ul>';

        return outHtml;
    } else {
        return '';
    }
}

/**
 * Its Layer class
 * @augments LayerBaseVectorGeoJson
 */
class LayerItsInventory extends LayerBaseVectorGeoJson {

    /**
     * ITS device layer, types available at http://transportal.cee.wisc.edu/its/inventory/
     * @param {object} options - config
     * @param {string} [options.id] - layer id
     * @param {string} [options.name=Unnamed Layer] - layer name
     * @param {number} [options.opacity=1] - opacity
     * @param {boolean} [options.visible=true] - default visible
     * @param {number} [options.minZoom=undefined] - min zoom level, 0 - 28
     * @param {number} [options.maxZoom=undefined] - max zoom level, 0 - 28
     * @param {object} [options.params={}] the get parameters to include to retrieve the layer
     * @param {number} [options.zIndex=0] the z index for the layer
     * @param {function} [options.loadCallback] function to call on load, context this is the layer object
     * @param {boolean} [options.legendCollapse=false] if the legend item should be initially collapsed
     * @param {boolean} [options.legendCheckbox=true] if the legend item should have a checkbox for visibility
     * @param {boolean} [options.legendContent] additional content to add to the legend
     *
     * @param {boolean} [options.autoLoad=false] if the layer should auto load if not visible
     * @param {object|*} [options.style=undefined] the layer style, use openlayers default style if not defined
     * @param {boolean} [options.onDemand=false] if the layer should be loaded by extent on map move
     * @param {number} [options.onDemandDelay=300] delay before the map move callback should be called
     * @param {MapMoveCls} [options.mapMoveObj=mapMove] alternate map move object for use with multi map pages
     *
     * @param {string} options.itsType the ITS device type, use the url flag at http://transportal.cee.wisc.edu/its/inventory/
     * @param {boolean} [options.addPopup=true] if the popup should be added automatically
     *
     * @param {string} [options.itsIcon=undefined] the ITS device type icon image see http://transportal.cee.wisc.edu/its/inventory/icons/
     *
     * @param {object} [options.itsLineStyle=undefined] A single line style
     * @param {string} options.itsLineStyle.color the line color as rgb or hex
     * @param {number} [options.itsLineStyle.width=5] the line width
     *
     * @param {object} [options.itsIconConfig=undefined] The icon subtype configuration
     * @param {string} options.itsIconConfig.prop The property used to define icon attribute symbolization
     * @param {string} options.itsIconConfig.defaultName The default name to be used if no other match is found
     * @param {string} options.itsIconConfig.defaultIcon The default icon to be used for no other matches
     * @param {object} [options.itsIconConfig.iconArray=[]] an array, items with format [property, name, img]
     *
     * @param {object} [options.itsLineConfig=undefined] The property used to define icon attribute symbolization
     * @param {string} options.itsLineConfig.prop The property used to define icon attribute symbolization
     * @param {string} [options.itsLineConfig.defaultName=Other] The default name to be used if no other match is found
     * @param {string} [options.itsLineConfig.defaultColor=red] The default line color to be used for no other matches
     * @param {number} [options.itsLineConfig.defaultWidth] The default line width to be used for no other matches
     * @param {object} [options.itsLineConfig.lineArray=[]] an array, items with format [property, name, color, optional width = 5]
     */
    constructor(options) {
        if (typeof options.itsType !== 'string') {
            throw 'its type must be defined';
        }

        let addToLegend = '';

        // define a style with the helper function if it is not explicitly defined
        if (typeof options.style == 'undefined') {
            options.style = defineStyle(
                options.itsIcon, options.itsLineStyle, options.itsIconConfig, options.itsLineConfig
            );
            addToLegend = defineLegend(
                options.itsIcon, options.itsLineStyle, options.itsIconConfig, options.itsLineConfig
            );
        }

        options.params = typeof options.params == 'object' ? options.params : {};
        $.extend(options.params, {format: 'JSON', resource: options.itsType});

        super('http://transportal.cee.wisc.edu/its/inventory/', options);

        //add any additional content to the legend
        this.addLegendContent(addToLegend);

        options.addPopup = typeof options.addPopup == 'boolean' ? options.addPopup : true;

        if (options.addPopup) {
            mapPopup.addVectorPopup(this, function (props) {
                return `&lt;iframe src="http://transportal.cee.wisc.edu/its/inventory/?feature=${props['featureGuid']}" ` +
                    `height="250" width="350">&lt;/iframe>`;
            });
        }
    }

    /**
     * callback to generate the parameters passed in the get request
     * @callback makeGetParams
     * @param {object} extent - extent object
     * @param {number} extent.minX - minX
     * @param {number} extent.minY - minY
     * @param {number} extent.maxX - maxX
     * @param {number} extent.maxY - maxY
     * @param {number} zoomLevel - zoom level
     */
    mapMoveMakeGetParams(extent, zoomLevel) {
        super.mapMoveMakeGetParams(extent, zoomLevel);
        let lowerLeft = new ol.geom.Point([extent.minX, extent.minY]);
        lowerLeft.transform(this.mapCrs, "EPSG:4326");
        let lowerLeftCoordinates = lowerLeft.getCoordinates();
        let upperRight = new ol.geom.Point([extent.maxX, extent.maxY]);
        upperRight.transform(this.mapCrs, "EPSG:4326");
        let upperRightCoordinates = upperRight.getCoordinates();

        $.extend(this.mapMoveParams,
            {
                L: lowerLeftCoordinates[0],
                R: upperRightCoordinates[0],
                B: lowerLeftCoordinates[1],
                T: upperRightCoordinates[1]
            });
    }
}

nm.LayerItsInventory = LayerItsInventory;
export default LayerItsInventory;
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="-_FeatureLayerProperties.html">_FeatureLayerProperties</a></li><li><a href="-_Slider.html">_Slider</a></li><li><a href="CommonSymbol.html">CommonSymbol</a></li><li><a href="DayRange.html">DayRange</a></li><li><a href="ItsLayerCollection.html">ItsLayerCollection</a></li><li><a href="LayerBase.html">LayerBase</a></li><li><a href="LayerBaseVector.html">LayerBaseVector</a></li><li><a href="LayerBaseVectorEsri.html">LayerBaseVectorEsri</a></li><li><a href="LayerBaseVectorGeoJson.html">LayerBaseVectorGeoJson</a></li><li><a href="LayerBaseXyzTile.html">LayerBaseXyzTile</a></li><li><a href="LayerEsriMapServer.html">LayerEsriMapServer</a></li><li><a href="LayerEsriTile.html">LayerEsriTile</a></li><li><a href="LayerGroup.html">LayerGroup</a></li><li><a href="LayerItsInventory.html">LayerItsInventory</a></li><li><a href="LayerLegend.html">LayerLegend</a></li><li><a href="LayerRealEarthTile.html">LayerRealEarthTile</a></li><li><a href="LayerSwipe.html">LayerSwipe</a></li><li><a href="LayerVectorRealEarth.html">LayerVectorRealEarth</a></li><li><a href="MapInteractionBase.html">MapInteractionBase</a></li><li><a href="MapMoveCls.html">MapMoveCls</a></li><li><a href="MapPopupCls.html">MapPopupCls</a></li><li><a href="RealEarthAnimate.html">RealEarthAnimate</a></li><li><a href="RealEarthAnimateTile.html">RealEarthAnimateTile</a></li><li><a href="RealEarthAnimateVector.html">RealEarthAnimateVector</a></li><li><a href="SingleSymbol.html">SingleSymbol</a></li><li><a href="Sliders.html">Sliders</a></li><li><a href="SortedFeatures.html">SortedFeatures</a></li><li><a href="UniqueValueSymbol.html">UniqueValueSymbol</a></li></ul><h3>Global</h3><ul><li><a href="global.html#$">$</a></li><li><a href="global.html#bundleEs2015Multiple">bundleEs2015Multiple</a></li><li><a href="global.html#dateToYyyyMmDdHh000">dateToYyyyMmDdHh000</a></li><li><a href="global.html#dateToYyyyMmDdHhMmSs">dateToYyyyMmDdHhMmSs</a></li><li><a href="global.html#definedAndNotNull">definedAndNotNull</a></li><li><a href="global.html#defineLegend">defineLegend</a></li><li><a href="global.html#defineStyle">defineStyle</a></li><li><a href="global.html#getUrlParams">getUrlParams</a></li><li><a href="global.html#gulp">gulp</a></li><li><a href="global.html#hexAlphaToRgbOrRgba">hexAlphaToRgbOrRgba</a></li><li><a href="global.html#htmlEscape">htmlEscape</a></li><li><a href="global.html#keyValPairs">keyValPairs</a></li><li><a href="global.html#makeBlueGreenRedGradient">makeBlueGreenRedGradient</a></li><li><a href="global.html#makeBlueGreenRedGradientZScore">makeBlueGreenRedGradientZScore</a></li><li><a href="global.html#makeFeatureServiceLegendAndSymbol">makeFeatureServiceLegendAndSymbol</a></li><li><a href="global.html#makeGuid">makeGuid</a></li><li><a href="global.html#makeMapServiceLegend">makeMapServiceLegend</a></li><li><a href="global.html#mapServiceLegendItem">mapServiceLegendItem</a></li><li><a href="global.html#offsetMinutes">offsetMinutes</a></li><li><a href="global.html#overflowScroll">overflowScroll</a></li><li><a href="global.html#processLessFile">processLessFile</a></li><li><a href="global.html#propertiesZoomStyle">propertiesZoomStyle</a></li><li><a href="global.html#provide">provide</a></li><li><a href="global.html#quickMap">quickMap</a></li><li><a href="global.html#quickMapBase">quickMapBase</a></li><li><a href="global.html#quickMapMulti">quickMapMulti</a></li><li><a href="global.html#resolutionToZoom">resolutionToZoom</a></li><li><a href="global.html#responsiveScroll">responsiveScroll</a></li><li><a href="global.html#rgb2hex">rgb2hex</a></li><li><a href="global.html#rgbToRgba">rgbToRgba</a></li><li><a href="global.html#triggerCallback">triggerCallback</a></li><li><a href="global.html#undefinedOrNull">undefinedOrNull</a></li><li><a href="global.html#windowScroll">windowScroll</a></li><li><a href="global.html#zoomToResolution">zoomToResolution</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Thu Jun 23 2016 08:20:56 GMT-0500 (Central Daylight Time)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>