source: tmcsimulator/trunk/webapps/cptms/js/calloutLayer.js @ 539

/* The Callout overlay is a map layer that shows areas of responsibility
   for each Cal Trans maintenance crew.  A marker in each region can
   be clicked to bring up an infoWindow showing the phone number for 
   the crew supervisor that can be used to "call the out" to an incident. 
    @author jdalbey 11/30/2019
*/
  
// the list of polygons to draw on the google map
var polygonList = [];
// a list of markers that provide a clickable label for the region
var markerList = []; 
 
// a list of infoWindows, one for each region
var infowindows = [];

// Initialize the layer by showing a control button and drawing polygons
function initCalloutbutton()
{
    var calloutBtnDiv = document.getElementById('calloutButton');
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(calloutBtnDiv)
    calloutBtnDiv.title = 'Click to toggle Callout Overlay';

    // Setup the click event listeners to toggle icon display
    calloutBtnDiv.addEventListener('click', function()
    {
        callout_showing = !callout_showing;
        // Determine which button image to show
        if (callout_showing)
        {
            pic = "images/btnDepressed_Callout.png"
            // It's nice when icons become visible that the messages have been refreshed.
            showCalloutLayer();
        }
        else
        {
            pic = "images/btnReady_Callout.png"
            hideCalloutLayer();
        }
        document.getElementById('calloutBtnImg').src = pic;

    });
    // Go create the polygons
    initPolygons();
}
// Show the layer (the polygons and markers)
function showCalloutLayer()
{
    // Iterate over the polygons, showing each one and its marker
    for (var i = 0; i < polygonList.length; i++) 
    {
        polygonList[i].setMap(map);
        markerList[i].setVisible(true);
    }
}
// Hide the layer
function hideCalloutLayer()
{
    // Iterate over the polygons, hiding each one and its marker
    for (var i = 0; i < polygonList.length; i++) 
    {
        polygonList[i].setMap(null);
        markerList[i].setVisible(false);
        // force close any remaining open info windows.
        infowindows[i].close();
    }
}

// Create a list of polygons and markers, one for each region
function initPolygons()
{
    // Define the LatLng coordinates for each polygon's path.
    // The variable names indicate the region number.
    var shape11 =
    [ {lng: -117.975311279296889, lat: 33.861008021639982}, 
    {lng: -117.952651977539077, lat: 33.847892766494965}, 
    {lng: -117.919006347656264, lat: 33.825364042768278}, 
    {lng: -117.89737701416017,  lat:33.806252750539684 },
    {lng: -117.88089752197267,  lat:33.790846512234154 },
    {lng: -117.863113397033885, lat: 33.775094261456935}, 
    {lng: -117.863388061523452, lat: 33.775152122972564}, 
    {lng: -117.841072082519545, lat: 33.750606041606453}, 
    {lng: -117.786998748779311, lat: 33.75988300332898 },
    {lng: -117.791461944580092, lat: 33.854379367213504},
    {lng: -117.814357280731215, lat: 33.891097778879868},
    {lng: -117.856521606445327, lat: 33.890937470812517}, 
    {lng: -117.883301550216871, lat: 33.910970083273227},
    {lng: -117.930404646322145, lat: 33.882270965115168}, 
    {lng: -117.974766882184127, lat: 33.860836964317699}
    ];
    var shape10 =
    [{lng: -117.747207654174431, lat: 33.920536243811434}, 
    {lng: -117.679229748900994, lat: 33.877221436507959}, 
    {lng: -117.615028393920525, lat: 33.805076310194131}, 
    {lng: -117.614822387695327, lat: 33.804826363491607},   
    {lng: -117.786955833435073, lat: 33.759847324630051},       
    {lng: -117.791461944580092, lat: 33.854379367213504},
    {lng: -117.814357280731215, lat: 33.891097778879868},
    {lng: -117.764339447021499, lat: 33.891222462723938}
    ];
    var shape12 =
    [{lng: -117.764339447021499, lat: 33.891222462723938}, 
    {lng: -117.856521606445327, lat: 33.890937470812517}, 
    {lng: -117.883301550216871, lat: 33.910970083273227},
    {lng: -117.930404646322145, lat: 33.882270965115168}, 
    {lng: -117.974766882184127, lat: 33.860836964317699}, 
    {lng: -118.008272570572444, lat: 33.878396884046268}, 
    {lng: -117.978057840373381, lat: 33.905120101626196}, 
    {lng: -117.976684549357756, lat: 33.946142303526379},     
    {lng: -117.785797098185881, lat: 33.948420735432244}, 
    {lng: -117.746932979207486, lat: 33.921139882742345}, 
    {lng: -117.761764526367202, lat: 33.894072329464144},
    ];  
    var shape20 =
    [{lng: -118.093414306640639, lat: 33.759454857961813}, 
     {lng: -118.117721563903629, lat: 33.742268427950371},
     {lng: -118.090530376648559, lat: 33.732750775701277}, 
     {lng: -118.042465191101655, lat: 33.689912112406454}, 
         {lng: -118.021865836344674, lat: 33.670982564442461}, 
     {lng: -117.998451220337316, lat: 33.650978512026882}, 
         {lng: -117.938095073914184, lat: 33.621039930103279 }, 
     {lng: -117.934249886311591, lat: 33.619021253954152}, 
     {lng: -117.929580684285639, lat: 33.623997562730807},
     {lng: -117.93033599853517, lat: 33.623482118738629}, 
     {lng: -117.989730834960952, lat: 33.730907010627263}, 
     {lat: 33.7580276912933, lng: -118.0422592163086}
    ];
    var shape21 =
    [{lng: -117.840900421142578, lat: 33.750606041606453}, 
    {lng: -117.839355468750014, lat: 33.727052323290899}, 
    {lng: -117.90836334228517, lat: 33.690067083222011}, 
    {lng: -117.914886474609375, lat: 33.658067007354418}, 
    {lng: -117.93033599853517, lat: 33.623482118738629}, 
    {lng: -117.989730834960952, lat: 33.730907010627263},    
    {lng: -118.042259216308594, lat: 33.7580276912933}, 
    {lng: -118.093414306640639, lat: 33.759454857961813}, 
    {lng: -118.096504211425795, lat: 33.782286292810255}, 
    {lng: -118.075389862060561, lat: 33.810103876801179}, 
    {lng: -118.028697967529311, lat: 33.809818614133711}, 
    {lng: -118.029041290283217, lat: 33.792273132272697}, 
    {lng: -118.011016845703139, lat: 33.792415792969067}, 
    {lng: -118.011016845703139, lat: 33.776150942519855}, 
    {lng: -117.921066284179702, lat: 33.775294812192321}, 
    {lng: -117.920894622802749, lat: 33.78114486556651}, 
    {lng: -117.869567871093764, lat: 33.780716826428275}
    ];
    var shape22 = 
    [
    {lng: -118.075561523437514, lat: 33.810175192319427}, 
    {lng: -118.028697967529311, lat: 33.809818614133711}, 
    {lng: -118.029041290283217, lat: 33.792273132272697}, 
    {lng: -118.011016845703139, lat: 33.792415792969067}, 
    {lng: -118.011016845703139, lat: 33.776150942519855}, 
    {lng: -117.921066284179702, lat: 33.775294812192321}, 
    {lng: -117.920894622802749, lat: 33.78114486556651}, 
    {lng: -117.869567871093764, lat: 33.780716826428275},
    {lng: -117.919006347656264, lat: 33.825364042768278},
    {lng: -117.974766882184127, lat: 33.860836964317699},
    {lng: -118.008132936665788, lat: 33.878581810221512},
    {lng: -118.071647646138445, lat: 33.81556612720675 }    
    ];
    var shape32 =
    [{lng: -117.896862030029311,  lat: 33.696065771651526}, 
    {lng:  -117.754074130207314, lat: 33.669902002904237}, 
    {lng:  -117.612934112548842, lat: 33.565857458017128}, 
    {lng:  -117.413120269775405, lat: 33.6593529542764 },
    {lng: -117.614822387695327, lat: 33.804826363491607},  
    {lng: -117.786955833435073, lat: 33.759847324630051},
    {lng: -117.840900421142578, lat: 33.750606041606453},
    {lng: -117.839355468750014, lat: 33.727052323290899}
    ];
    var shape31=
    [{ lat: 33.565857458017128, lng:-117.612891197204604},
    {lng:  -117.754074130207314, lat: 33.669902002904237},
    {lng: -117.896862030029311,  lat: 33.696065771651526}, 
    {lng: -117.90836334228517, lat: 33.690067083222011},
    {lng: -117.914886474609375, lat: 33.658067007354418}, 
    {lng: -117.93033599853517, lat: 33.623482118738629}, 
    {lng: -117.934455871582045, lat: 33.619479664847653},
        {lat: 33.607757123330948,  lng:-117.93067932128907}, 
        {lat: 33.604039887039541, lng:-117.913169860839858}, 
        {lat: 33.593173200549977, lng:-117.876434326171889}, 
        {lat: 33.592887216626245, lng:-117.760391235351577 }, 
        {lat: 33.543683878655926, lng:-117.673873901367202 }
    ];
    var shape30 = 
    [   { lat: 33.54325465646098, lng: -117.6735305786133 },
        { lat: 33.591528780040434, lng: -117.75961875915529 },
        { lat: 33.592887216626245, lng: -117.87643432617189 },
        { lat: 33.56642960408059, lng: -117.83231735229494 },
        { lat: 33.55055114384406, lng: -117.80845642089844 },
        { lat: 33.54096543541857, lng: -117.78442382812501 },
        { lat: 33.51363317754275, lng: -117.76021957397462 },
        { lat: 33.50690611436667, lng: -117.75112152099611 },
        { lat: 33.499033355121824, lng: -117.7459716796875 },
        { lat: 33.49216199827286, lng: -117.73773193359376 },
        { lat: 33.47269019266666, lng: -117.71713256835939 },
        { lat: 33.462379817843576, lng: -117.71163940429689 }, 
        { lat: 33.46008845688024, lng: -117.67868041992189 },
        { lat: 33.430008731182994, lng: -117.63336181640626 },
        { lat: 33.38959955347486, lng: -117.59696960449219 },
        { lat: 33.4520682165952, lng: -117.57843017578126 },
        { lat: 33.4520682165952, lng: -117.54890441894533 },
        { lat: 33.470971882039215, lng: -117.5090789794922 },
        { lat: 33.53681606773302, lng: -117.50976562500001 },
        { lat: 33.6593529542764, lng: -117.41294860839845 },
        { lat: 33.54325465646098, lng: -117.6735305786133 }
    ];

    // An array of records that describe the attributes for each shape.
    // polygon: the list of coordinates defining the shape
    // id: the identifier for the shape (the crew number)
    // color: color code to use for coloring the displayed polygon
    // infoLocation: the coordinates of the center marker for the shape
    // infoContent: the crew phone numbers to display in the infowindow
    var shapeList = [
    {
        polygon: shape12,
        id: '12',
        color: '#fec28c', // orange
        infoLocation: {
            lat: 33.9105, //33.93025735136521,
            lng: -117.9475  //-117.91213989257814
        },
        infoContent: "Phone numbers crew 12"
    }, 
    {
        polygon: shape11,
        id: '11',
        color: '#f9f385', // yellow
        infoLocation: {
            lat: 33.8600, //33.8247936182649,
            lng: -117.8545  //-117.85858154296876
        }, 
        infoContent: "Phone numbers crew 11"
    }, 
    {
        polygon: shape10,
        id: '10',
        color: '#cf7b71', // rust
        infoLocation: {
            lat: 33.82251188219802,
            lng: -117.69790649414064
        },
        infoContent: "Phone numbers crew 10"
    }, 
    {
        polygon: shape22,
        id: '22',
        color: '#aae2ef',  // light-blue
        infoLocation: {
            lat: 33.82251188219802,
            lng: -117.9986572265625
        },
        infoContent: "Phone numbers crew 22"
    }, 
    {
        polygon: shape21,
        id: '21',
        color: '#d9bedd', // purple
        infoLocation: {
            lat: 33.720913019358676,
            lng: -117.92999267578126
        }, 
        infoContent: "Phone numbers crew 21"
    }, 
    {
        polygon: shape20,
        id: '20',
        color: '#aebed7',  // blue-gray
        infoLocation: {
            lat: 33.723197462817026,
            lng: -118.03573608398439
        }, 
        infoContent: "Phone numbers crew 20"
    }, 
    {
        polygon: shape32,
        id: '32',
        color: '#c4d9ae',  // leaf-green
        infoLocation: {
            lat: 33.72205524868731,
            lng: -117.68829345703126
        },
        infoContent: "Phone numbers crew 32"
    }, 
    {
        polygon: shape31,
        id: '31',
        color: '#d7f885', // neon green
        infoLocation: {
            lat: 33.637489243170826,
            lng: -117.80364990234376
        },
        infoContent: "Phone numbers crew 31"
    }, 
    {
        polygon: shape30,
        id: '30',
        color: '#a4b082',  //olive
        infoLocation: {
            lat: 33.5397,  //33.4979,
            lng: -117.5805  //-117.5784
        },
        infoContent: "JENNY WELLS 949-462-8102"
    }, 
    ];

    // Iterate over the shapes, creating a polygon for each one
    for (var i = 0; i < shapeList.length; i++) 
    {
        // Construct the polygon.
            polygonList[i] = new google.maps.Polygon({
            paths: shapeList[i].polygon,
            strokeColor: shapeList[i].color,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: shapeList[i].color,
            fillOpacity: 0.5
        });

        // Construct the content of the info window for this region
        var contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">' + shapeList[i].id + '</h1>' +
            '<div id="bodyContent">' +
            '<p><b>' + shapeList[i].infoContent + '</p>' +
            '</div>' +
            '</div>';

        // Construct the info window for this region
        infowindows[i] = new google.maps.InfoWindow({
            content: contentString
        });

        // create the marker that will appear in the center of the region
        markerList[i] = new google.maps.Marker({
            position: shapeList[i].infoLocation, // where to place the marker
            map: map, // the map to be drawn on
            title: shapeList[i].id, // Maintenance Crew Number
            icon: 'images/region.png', // the marker image
            label: {
                text: shapeList[i].id,  // region label
                color: '#FFFFFF', // white for text
                fontSize: '16px'  // a readable size
            }
        });
        // Initially the marker is hidden
        markerList[i].setVisible(false);
    }; // end for

    // Construct the click listeners for each info window
    // it seems these can't be done in a loop because the loop index
    // isn't known when the click happens.
    markerList[0].addListener('click', function() {
        infowindows[0].open(map, markerList[0]);
    });
    markerList[1].addListener('click', function() {
        infowindows[1].open(map, markerList[1]);
    });
    markerList[2].addListener('click', function() {
        infowindows[2].open(map, markerList[2]);
    });
    markerList[3].addListener('click', function() {
        infowindows[3].open(map, markerList[3]);
    });
    markerList[4].addListener('click', function() {
        infowindows[4].open(map, markerList[4]);
    });
    markerList[5].addListener('click', function() {
        infowindows[5].open(map, markerList[5]);
    });
    markerList[6].addListener('click', function() {
        infowindows[6].open(map, markerList[6]);
    });
    markerList[7].addListener('click', function() {
        infowindows[7].open(map, markerList[7]);
    });
    markerList[8].addListener('click', function() {
        infowindows[8].open(map, markerList[8]);
    });
}