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

/* 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 = [];

// a list of crew contact info, one for each region

// each item contains supervisor name, region number, phone number

var crewcontact = {};



// 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;



    });



    // Load the crew contact info from an external file

    loadJSON("data_layers/crewcontact.json", function(response)

    {

        // Parse JSON string into object

        contactjson = JSON.parse(response);

        // Add each contact to a lookup dictionary 

        for (var i = 0; i < contactjson.length; i++)

        {

            var item = contactjson[i];

            crewcontact[item.Region] = item;

        }

        // Go create the polygons (after JSON finishes loading)

        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: crewcontact["12"].Supervisor + " " + crewcontact["12"].Phone

    }, 

    {

        polygon: shape11,

        id: '11',

        color: '#f9f385', // yellow

        infoLocation: {

            lat: 33.8600, //33.8247936182649,

            lng: -117.8545  //-117.85858154296876

        }, 

        infoContent: crewcontact["11"].Supervisor + " " + crewcontact["11"].Phone

    }, 

    {

        polygon: shape10,

        id: '10',

        color: '#cf7b71', // rust

        infoLocation: {

            lat: 33.82251188219802,

            lng: -117.69790649414064

        },

        infoContent: crewcontact["10"].Supervisor + " " + crewcontact["10"].Phone

    }, 

    {

        polygon: shape22,

        id: '22',

        color: '#aae2ef',  // light-blue

        infoLocation: {

            lat: 33.82251188219802,

            lng: -117.9986572265625

        },

        infoContent: crewcontact["22"].Supervisor + " " + crewcontact["22"].Phone

    }, 

    {

        polygon: shape21,

        id: '21',

        color: '#d9bedd', // purple

        infoLocation: {

            lat: 33.720913019358676,

            lng: -117.92999267578126

        }, 

        infoContent: crewcontact["21"].Supervisor + " " + crewcontact["21"].Phone

    }, 

    {

        polygon: shape20,

        id: '20',

        color: '#aebed7',  // blue-gray

        infoLocation: {

            lat: 33.723197462817026,

            lng: -118.03573608398439

        }, 

        infoContent: crewcontact["20"].Supervisor + " " + crewcontact["20"].Phone

    }, 

    {

        polygon: shape32,

        id: '32',

        color: '#c4d9ae',  // leaf-green

        infoLocation: {

            lat: 33.72205524868731,

            lng: -117.68829345703126

        },

        infoContent: crewcontact["32"].Supervisor + " " + crewcontact["32"].Phone

    }, 

    {

        polygon: shape31,

        id: '31',

        color: '#d7f885', // neon green

        infoLocation: {

            lat: 33.637489243170826,

            lng: -117.80364990234376

        },

        infoContent: crewcontact["31"].Supervisor + " " + crewcontact["31"].Phone

    }, 

    {

        polygon: shape30,

        id: '30',

        color: '#a4b082',  //olive

        infoLocation: {

            lat: 33.5397,  //33.4979,

            lng: -117.5805  //-117.5784

        },

        infoContent: crewcontact["30"].Supervisor + " " + crewcontact["30"].Phone

    }, 

    ];



    // 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]);

    });

}