source: tmcsimulator/branches/realtime_VDS/cptms/js/vdsLayer.js @ 585

    // Build a solid colored icon to use instead of the classic pin
    function dotSymbol(color) 
    {
        var iconPath = iconVDSwhite;
        if (color == 'red')
        {
           iconPath = iconVDSred;
        }
        else if (color == 'yellow')
        {
            iconPath = iconVDSyellow;
        }
        else if (color == 'lime')
        {
            iconPath = iconVDSgreen;
        }
        return {
            url: iconPath, 
            anchor: new google.maps.Point(6, 6)
        };
    }

    // Load the map data from a json file and style all the points
    function loadVDSlayer()
    {
        // Load the static map data and call saveCoords when done
        map.data.loadGeoJson(kMapStartupFile, null, saveCoords)
        // Style the map data by applying the desired properties to each feature (marker)
        // The function will be called every time a feature's properties are updated.
        map.data.setStyle(function(feature)
        {
            // Get the postmile id 
            var name = feature.getId();
            // Get the desired color value
            var ptColor = feature.getProperty("color");
            var street = feature.getProperty("street");
            // Build the marker
            var iconSymbol = dotSymbol(ptColor);
            // return the StyleOptions
            return {
                icon: iconSymbol,
                title: name + " @" + street, // set rollover text
                // set zIndex for slowed traffic to a higher value so they overlap
                zIndex: colorZvalues[ptColor]
            };
        });
    }
    // callback when load GeoJson completes
    // save each feature's Point as the original coordinates for later reference
    function saveCoords(features)
    {
        // Iterate over all the features in the map
        features.forEach(function(feature)
        {
            var pt = feature.getGeometry().get();
            vds_coords[feature.getId()] = pt; // save the Point in a dictionary
        });
        // update the dot colors from the dynamic json data 
        updateVDSlayer();
        // go adjust the marker coordinates so dots don't overlap
        adjustCoords(calcDistanceFactor());
    }

    // magic formula controls distance between dots proportionate to zoom factor
    function calcDistanceFactor()
    {
        // 15 is maximum zoom, the point at which no adjustment is needed
        return (.0005 * (15 - map.getZoom()));
    }

    // Adjust the coordinates of dots so they appear side-by-side
    // The perpendicular vector for each dot has been provided,
    // so we just need to multiply by a scaling factor (adjAmount) 
    // @param adjAmount amount by which to adjust coordinate 
    function adjustCoords(adjAmount)
    {
        // Adjust the NB points a slight amount
        map.data.forEach(function(feature)
        {
            // get the name of the current feature
            var name = feature.getId();
            // lookup the original coordinates for this feature
            var coords = vds_coords[name];

            //retrieve the perpendicular vector (precomputed)
            var perpx = feature.getProperty("perpx")
            var perpy = feature.getProperty("perpy")
                // Make adjustment and save it
            var myLat = coords.lat() + perpy * adjAmount
            var myLong = coords.lng() + perpx * adjAmount
            feature.setGeometry(
            {
                lat: myLat,
                lng: myLong
            });
        });
    }

    // update the color (as needed) for a given marker
    function updateMarker(marker)
    {
        target = marker.id;
        newColor = marker.properties.color;
        // see if new color is different than current color
        currentFeature = map.data.getFeatureById(target);
        currentColor = currentFeature.getProperty("color");
        // if a new color is desired then assign it to the feature's color property
        if (currentColor != newColor)
        {
            currentFeature.setProperty("color", newColor);
            // set zIndex for slowed traffic to a higher value so they overlap
            currentFeature.setProperty("zIndex", colorZvalues[newColor]);
        }
    }


    // Load the highways dynamic json file and update the map
    function updateVDSlayer()
    {
        var parsed_JSON;
        loadJSON(kVDSstatusFile, function(response)
        {
            // Parse JSON string into object
            parsed_JSON = JSON.parse(response);
            // Process each new marker - lookup in current map
            parsed_JSON.features.forEach(updateMarker);
        });
    }

function initVDSbutton()
{

    var vdsBtnDiv = document.getElementById('vdsButton');
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(vdsBtnDiv)
    vdsBtnDiv.title = 'Click to toggle vds view';

    // Setup the click event listeners to toggle icon display
    vdsBtnDiv.addEventListener('click', function()
    {
        vds_showing = !vds_showing;
        // reveal or hide all the dots
        map.data.forEach(function(feature)
        {
            map.data.overrideStyle(feature,
            {
                visible: vds_showing
            });
        });
        // Determine which button image to show
        if (vds_showing)
        {
            pic = "images/btnDepressed_VDS.png"
        }
        else
        {
            pic = "images/btnReady_VDS.png"
        }
        document.getElementById('vdsBtnImg').src = pic;
    });
}

//initialize live indicator icon
function initLiveIcon(success) {
    //create new img tags for live and not-live indicators
    var live = document.createElement('img');
    var notLive = document.createElement('img');
    live.src ="images/live.svg";
    live.width = 50 ;
    live.height= 40 ;
    notLive.src ="images/fetchError.jpg";
    notLive.width = 50 ;
    notLive.height= 50 ;
    // if fetch is a success, display live img
    if (success) {
        console.log(live);
        if (map.controls[google.maps.ControlPosition.TOP_RIGHT].getLength() > 0)
            map.controls[google.maps.ControlPosition.TOP_RIGHT].pop();
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(live);
    }
    // if error, display sad smiley image
    else {
        console.log(notLive);
        if (map.controls[google.maps.ControlPosition.TOP_RIGHT].getLength() > 0)
            map.controls[google.maps.ControlPosition.TOP_RIGHT].pop();
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(notLive);
    }
}

//reads first line on last fetch file and checks if its less than 15 minutes old
function checkLastFetch()
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", lastFetchFile, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var text = rawFile.responseText;
                // get last fetch time from file
                var lastFetch = new Date(text);
                // get current date time
                var now = new Date();
                // calculate time difference
                var msec = now - lastFetch;
                var days = Math.floor(msec / 1000 / 60 / (60 * 24));
                msec -= days * 1000 * 60 * 60 * 24
                var hh = Math.floor(msec / 1000 / 60 / 60);
                msec -= hh * 1000 * 60 * 60;
                var mm = Math.floor(msec / 1000 / 60);
                msec -= mm * 1000 * 60;
                var ss = Math.floor(msec / 1000);
                msec -= ss * 1000;
                // display icon if less than 15 
               if (days === 0 && hh === 0 && mm < fetchInterval)
                    initLiveIcon(1)
                else 
                    initLiveIcon(0)
                //console.log(days + " Days "+ hh + " Hours " + mm + " Minutes " + ss + " Seconds");
            }
        }
    }
    rawFile.send(null);
}