Changeset 535 in tmcsimulator for trunk/webapps/cptms/js/calloutLayer.js


Ignore:
Timestamp:
11/30/2019 03:08:52 PM (6 years ago)
Author:
jdalbey
Message:

Finished callout map regions, integrate into CPTMS.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/webapps/cptms/js/calloutLayer.js

    r534 r535  
     1/* The Callout overlay is a map layer that shows areas of responsibility 
     2   for each Cal Trans maintenance crew.  A marker in each region can 
     3   be clicked to bring up an infoWindow showing the phone number for  
     4   the crew supervisor that can be used to "call the out" to an incident.  
     5    @author jdalbey 11/30/2019 
     6*/ 
     7   
     8// the list of polygons to draw on the google map 
     9var polygonList = []; 
     10// a list of markers that provide a clickable label for the region 
     11var markerList = [];  
     12 
     13// Initialize the layer by showing a control button and drawing polygons 
    114function initCalloutbutton() 
    215{ 
    … …  
    2437 
    2538    }); 
    26   // Define the LatLng coordinates for the polygon's path. 
    27  
    28     var triangleCoords = 
    29     [{ lat: 33.84817790215087, lng: -117.9979705810547 }, 
    30 { lat: 33.80482636349161, lng: -118.02680969238283 }, 
    31 { lat: 33.80482636349161, lng: -117.97531127929689 }, 
    32 { lat: 33.84817790215087, lng: -117.9979705810547 } 
    33     ]; 
    34   // Construct the polygon. 
    35   region22 = new google.maps.Polygon({ 
    36     paths: triangleCoords, 
    37     strokeColor: '#FF0000', 
    38     strokeOpacity: 0.8, 
    39     strokeWeight: 2, 
    40     fillColor: '#FF0000', 
    41     fillOpacity: 0.35 
    42   }); 
     39    // Go create the polygons 
     40    initPolygons(); 
    4341} 
    44 var region22; 
     42// Show the layer (the polygons and markers) 
    4543function showCalloutLayer() 
    4644{ 
    47     region22.setMap(map); 
     45    // Iterate over the polygons, showing each one and its marker 
     46    for (var i = 0; i < polygonList.length; i++)  
     47    { 
     48        polygonList[i].setMap(map); 
     49        markerList[i].setVisible(true); 
     50    } 
    4851} 
     52// Hide the layer 
    4953function hideCalloutLayer() 
    5054{ 
    51     region22.setMap(null); 
     55    // Iterate over the polygons, hiding each one and its marker 
     56    for (var i = 0; i < polygonList.length; i++)  
     57    { 
     58        polygonList[i].setMap(null); 
     59        markerList[i].setVisible(false); 
     60    } 
    5261} 
     62 
     63// Create a list of polygons and markers, one for each region 
     64function initPolygons() 
     65{ 
     66    // Define the LatLng coordinates for each polygon's path. 
     67    // The variable names indicate the region number. 
     68    var shape11 = 
     69    [ {lng: -117.975311279296889, lat: 33.861008021639982},  
     70    {lng: -117.952651977539077, lat: 33.847892766494965},  
     71    {lng: -117.919006347656264, lat: 33.825364042768278},  
     72    {lng: -117.89737701416017,  lat:33.806252750539684 }, 
     73    {lng: -117.88089752197267,  lat:33.790846512234154 }, 
     74    {lng: -117.863113397033885, lat: 33.775094261456935},  
     75    {lng: -117.863388061523452, lat: 33.775152122972564},  
     76    {lng: -117.841072082519545, lat: 33.750606041606453},  
     77    {lng: -117.786998748779311, lat: 33.75988300332898 }, 
     78    {lng: -117.791461944580092, lat: 33.854379367213504}, 
     79    {lng: -117.814357280731215, lat: 33.891097778879868}, 
     80    {lng: -117.856521606445327, lat: 33.890937470812517},  
     81    {lng: -117.883301550216871, lat: 33.910970083273227}, 
     82    {lng: -117.930404646322145, lat: 33.882270965115168},  
     83    {lng: -117.974766882184127, lat: 33.860836964317699} 
     84    ]; 
     85    var shape10 = 
     86    [{lng: -117.747207654174431, lat: 33.920536243811434},  
     87    {lng: -117.679229748900994, lat: 33.877221436507959},  
     88    {lng: -117.615028393920525, lat: 33.805076310194131},  
     89    {lng: -117.614822387695327, lat: 33.804826363491607},    
     90    {lng: -117.786955833435073, lat: 33.759847324630051},        
     91    {lng: -117.791461944580092, lat: 33.854379367213504}, 
     92    {lng: -117.814357280731215, lat: 33.891097778879868}, 
     93    {lng: -117.764339447021499, lat: 33.891222462723938} 
     94    ]; 
     95    var shape12 = 
     96    [{lng: -117.764339447021499, lat: 33.891222462723938},  
     97    {lng: -117.856521606445327, lat: 33.890937470812517},  
     98    {lng: -117.883301550216871, lat: 33.910970083273227}, 
     99    {lng: -117.930404646322145, lat: 33.882270965115168},  
     100    {lng: -117.974766882184127, lat: 33.860836964317699},  
     101    {lng: -118.008272570572444, lat: 33.878396884046268},  
     102    {lng: -117.978057840373381, lat: 33.905120101626196},  
     103    {lng: -117.976684549357756, lat: 33.946142303526379},      
     104    {lng: -117.785797098185881, lat: 33.948420735432244},  
     105    {lng: -117.746932979207486, lat: 33.921139882742345},  
     106    {lng: -117.761764526367202, lat: 33.894072329464144}, 
     107    ];   
     108    var shape20 = 
     109    [{lng: -118.093414306640639, lat: 33.759454857961813},  
     110     {lng: -118.117721563903629, lat: 33.742268427950371}, 
     111     {lng: -118.090530376648559, lat: 33.732750775701277},  
     112     {lng: -118.042465191101655, lat: 33.689912112406454},  
     113         {lng: -118.021865836344674, lat: 33.670982564442461},  
     114     {lng: -117.998451220337316, lat: 33.650978512026882},  
     115         {lng: -117.938095073914184, lat: 33.621039930103279 },  
     116     {lng: -117.934249886311591, lat: 33.619021253954152},  
     117     {lng: -117.929580684285639, lat: 33.623997562730807}, 
     118     {lng: -117.93033599853517, lat: 33.623482118738629},  
     119     {lng: -117.989730834960952, lat: 33.730907010627263},  
     120     {lat: 33.7580276912933, lng: -118.0422592163086} 
     121    ]; 
     122    var shape21 = 
     123    [{lng: -117.840900421142578, lat: 33.750606041606453},  
     124    {lng: -117.839355468750014, lat: 33.727052323290899},  
     125    {lng: -117.90836334228517, lat: 33.690067083222011},  
     126    {lng: -117.914886474609375, lat: 33.658067007354418},  
     127    {lng: -117.93033599853517, lat: 33.623482118738629},  
     128    {lng: -117.989730834960952, lat: 33.730907010627263},     
     129    {lng: -118.042259216308594, lat: 33.7580276912933},  
     130    {lng: -118.093414306640639, lat: 33.759454857961813},  
     131    {lng: -118.096504211425795, lat: 33.782286292810255},  
     132    {lng: -118.075389862060561, lat: 33.810103876801179},  
     133    {lng: -118.028697967529311, lat: 33.809818614133711},  
     134    {lng: -118.029041290283217, lat: 33.792273132272697},  
     135    {lng: -118.011016845703139, lat: 33.792415792969067},  
     136    {lng: -118.011016845703139, lat: 33.776150942519855},  
     137    {lng: -117.921066284179702, lat: 33.775294812192321},  
     138    {lng: -117.920894622802749, lat: 33.78114486556651},  
     139    {lng: -117.869567871093764, lat: 33.780716826428275} 
     140    ]; 
     141    var shape22 =  
     142    [ 
     143    {lng: -118.075561523437514, lat: 33.810175192319427},  
     144    {lng: -118.028697967529311, lat: 33.809818614133711},  
     145    {lng: -118.029041290283217, lat: 33.792273132272697},  
     146    {lng: -118.011016845703139, lat: 33.792415792969067},  
     147    {lng: -118.011016845703139, lat: 33.776150942519855},  
     148    {lng: -117.921066284179702, lat: 33.775294812192321},  
     149    {lng: -117.920894622802749, lat: 33.78114486556651},  
     150    {lng: -117.869567871093764, lat: 33.780716826428275}, 
     151    {lng: -117.919006347656264, lat: 33.825364042768278}, 
     152    {lng: -117.974766882184127, lat: 33.860836964317699}, 
     153    {lng: -118.008132936665788, lat: 33.878581810221512}, 
     154    {lng: -118.071647646138445, lat: 33.81556612720675 }     
     155    ]; 
     156    var shape32 = 
     157    [{lng: -117.896862030029311,  lat: 33.696065771651526},  
     158    {lng:  -117.754074130207314, lat: 33.669902002904237},  
     159    {lng:  -117.612934112548842, lat: 33.565857458017128},  
     160    {lng:  -117.413120269775405, lat: 33.6593529542764 }, 
     161    {lng: -117.614822387695327, lat: 33.804826363491607},   
     162    {lng: -117.786955833435073, lat: 33.759847324630051}, 
     163    {lng: -117.840900421142578, lat: 33.750606041606453}, 
     164    {lng: -117.839355468750014, lat: 33.727052323290899} 
     165    ]; 
     166    var shape31= 
     167    [{ lat: 33.565857458017128, lng:-117.612891197204604}, 
     168    {lng:  -117.754074130207314, lat: 33.669902002904237}, 
     169    {lng: -117.896862030029311,  lat: 33.696065771651526},  
     170    {lng: -117.90836334228517, lat: 33.690067083222011}, 
     171    {lng: -117.914886474609375, lat: 33.658067007354418},  
     172    {lng: -117.93033599853517, lat: 33.623482118738629},  
     173    {lng: -117.934455871582045, lat: 33.619479664847653}, 
     174        {lat: 33.607757123330948,  lng:-117.93067932128907},  
     175        {lat: 33.604039887039541, lng:-117.913169860839858},  
     176        {lat: 33.593173200549977, lng:-117.876434326171889},  
     177        {lat: 33.592887216626245, lng:-117.760391235351577 },  
     178        {lat: 33.543683878655926, lng:-117.673873901367202 } 
     179    ]; 
     180    var shape30 =  
     181    [   { lat: 33.54325465646098, lng: -117.6735305786133 }, 
     182        { lat: 33.591528780040434, lng: -117.75961875915529 }, 
     183        { lat: 33.592887216626245, lng: -117.87643432617189 }, 
     184        { lat: 33.56642960408059, lng: -117.83231735229494 }, 
     185        { lat: 33.55055114384406, lng: -117.80845642089844 }, 
     186        { lat: 33.54096543541857, lng: -117.78442382812501 }, 
     187        { lat: 33.51363317754275, lng: -117.76021957397462 }, 
     188        { lat: 33.50690611436667, lng: -117.75112152099611 }, 
     189        { lat: 33.499033355121824, lng: -117.7459716796875 }, 
     190        { lat: 33.49216199827286, lng: -117.73773193359376 }, 
     191        { lat: 33.47269019266666, lng: -117.71713256835939 }, 
     192        { lat: 33.462379817843576, lng: -117.71163940429689 },  
     193        { lat: 33.46008845688024, lng: -117.67868041992189 }, 
     194        { lat: 33.430008731182994, lng: -117.63336181640626 }, 
     195        { lat: 33.38959955347486, lng: -117.59696960449219 }, 
     196        { lat: 33.4520682165952, lng: -117.57843017578126 }, 
     197        { lat: 33.4520682165952, lng: -117.54890441894533 }, 
     198        { lat: 33.470971882039215, lng: -117.5090789794922 }, 
     199        { lat: 33.53681606773302, lng: -117.50976562500001 }, 
     200        { lat: 33.6593529542764, lng: -117.41294860839845 }, 
     201        { lat: 33.54325465646098, lng: -117.6735305786133 } 
     202    ]; 
     203 
     204    // An array of records that describe the attributes for each shape. 
     205    // polygon: the list of coordinates defining the shape 
     206    // id: the identifier for the shape (the crew number) 
     207    // color: color code to use for coloring the displayed polygon 
     208    // infoLocation: the coordinates of the center marker for the shape 
     209    // infoContent: the crew phone numbers to display in the infowindow 
     210    var shapeList = [ 
     211    { 
     212        polygon: shape12, 
     213        id: '12', 
     214        color: '#fec28c', // orange 
     215        infoLocation: { 
     216            lat: 33.93025735136521, 
     217            lng: -117.91213989257814 
     218        }, 
     219        infoContent: "Phone numbers crew 12" 
     220    },  
     221    { 
     222        polygon: shape11, 
     223        id: '11', 
     224        color: '#f9f385', // yellow 
     225        infoLocation: { 
     226            lat: 33.8247936182649, 
     227            lng: -117.85858154296876 
     228        },  
     229        infoContent: "Phone numbers crew 11" 
     230    },  
     231    { 
     232        polygon: shape10, 
     233        id: '10', 
     234        color: '#cf7b71', // rust 
     235        infoLocation: { 
     236            lat: 33.82251188219802, 
     237            lng: -117.69790649414064 
     238        }, 
     239        infoContent: "Phone numbers crew 10" 
     240    },  
     241    { 
     242        polygon: shape22, 
     243        id: '22', 
     244        color: '#aae2ef',  // light-blue 
     245        infoLocation: { 
     246            lat: 33.82251188219802, 
     247            lng: -117.9986572265625 
     248        }, 
     249        infoContent: "Phone numbers crew 22" 
     250    },  
     251    { 
     252        polygon: shape21, 
     253        id: '21', 
     254        color: '#d9bedd', // purple 
     255        infoLocation: { 
     256            lat: 33.720913019358676, 
     257            lng: -117.92999267578126 
     258        },  
     259        infoContent: "Phone numbers crew 21" 
     260    },  
     261    { 
     262        polygon: shape20, 
     263        id: '20', 
     264        color: '#aebed7',  // blue-gray 
     265        infoLocation: { 
     266            lat: 33.723197462817026, 
     267            lng: -118.03573608398439 
     268        },  
     269        infoContent: "Phone numbers crew 20" 
     270    },  
     271    { 
     272        polygon: shape32, 
     273        id: '32', 
     274        color: '#c4d9ae',  // leaf-green 
     275        infoLocation: { 
     276            lat: 33.72205524868731, 
     277            lng: -117.68829345703126 
     278        }, 
     279        infoContent: "Phone numbers crew 32" 
     280    },  
     281    { 
     282        polygon: shape31, 
     283        id: '31', 
     284        color: '#d7f885', // neon green 
     285        infoLocation: { 
     286            lat: 33.637489243170826, 
     287            lng: -117.80364990234376 
     288        }, 
     289        infoContent: "Phone numbers crew 31" 
     290    },  
     291    { 
     292        polygon: shape30, 
     293        id: '30', 
     294        color: '#a4b082',  //olive 
     295        infoLocation: { 
     296            lat: 33.4979, 
     297            lng: -117.5784 
     298        }, 
     299        infoContent: "JENNY WELLS 949-462-8102" 
     300    },  
     301    ]; 
     302  
     303    // a list of infoWindows, one for each region 
     304    var infowindows = []; 
     305 
     306    // Iterate over the shapes, creating a polygon for each one 
     307    for (var i = 0; i < shapeList.length; i++)  
     308    { 
     309        // Construct the polygon. 
     310            polygonList[i] = new google.maps.Polygon({ 
     311            paths: shapeList[i].polygon, 
     312            strokeColor: shapeList[i].color, 
     313            strokeOpacity: 0.8, 
     314            strokeWeight: 2, 
     315            fillColor: shapeList[i].color, 
     316            fillOpacity: 0.5 
     317        }); 
     318 
     319        // Construct the content of the info window for this region 
     320        var contentString = '<div id="content">' + 
     321            '<div id="siteNotice">' + 
     322            '</div>' + 
     323            '<h1 id="firstHeading" class="firstHeading">' + shapeList[i].id + '</h1>' + 
     324            '<div id="bodyContent">' + 
     325            '<p><b>' + shapeList[i].infoContent + '</p>' + 
     326            '</div>' + 
     327            '</div>'; 
     328 
     329        // Construct the info window for this region 
     330        infowindows[i] = new google.maps.InfoWindow({ 
     331            content: contentString 
     332        }); 
     333 
     334        // create the marker that will appear in the center of the region 
     335        markerList[i] = new google.maps.Marker({ 
     336            position: shapeList[i].infoLocation, // where to place the marker 
     337            map: map, // the map to be drawn on 
     338            title: shapeList[i].id, // Maintenance Crew Number 
     339            icon: 'images/region.png', // the marker image 
     340            label: { 
     341                text: shapeList[i].id,  // region label 
     342                color: '#FFFFFF', // white for text 
     343                fontSize: '16px'  // a readable size 
     344            } 
     345        }); 
     346        // Initially the marker is hidden 
     347        markerList[i].setVisible(false); 
     348    }; // end for 
     349 
     350    // Construct the click listeners for each info window 
     351    // it seems these can't be done in a loop because the loop index 
     352    // isn't known when the click happens. 
     353    markerList[0].addListener('click', function() { 
     354        infowindows[0].open(map, markerList[0]); 
     355    }); 
     356    markerList[1].addListener('click', function() { 
     357        infowindows[1].open(map, markerList[1]); 
     358    }); 
     359    markerList[2].addListener('click', function() { 
     360        infowindows[2].open(map, markerList[2]); 
     361    }); 
     362    markerList[3].addListener('click', function() { 
     363        infowindows[3].open(map, markerList[3]); 
     364    }); 
     365    markerList[4].addListener('click', function() { 
     366        infowindows[4].open(map, markerList[4]); 
     367    }); 
     368    markerList[5].addListener('click', function() { 
     369        infowindows[5].open(map, markerList[5]); 
     370    }); 
     371    markerList[6].addListener('click', function() { 
     372        infowindows[6].open(map, markerList[6]); 
     373    }); 
     374    markerList[7].addListener('click', function() { 
     375        infowindows[7].open(map, markerList[7]); 
     376    }); 
     377    markerList[8].addListener('click', function() { 
     378        infowindows[8].open(map, markerList[8]); 
     379    }); 
     380} 
Note: See TracChangeset for help on using the changeset viewer.