source: tmcsimulator/trunk/webapps/cptms/CalloutMap_standalone.html @ 535

Revision 535, 14.2 KB checked in by jdalbey, 6 years ago (diff)

Finished callout map regions, integrate into CPTMS.
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
5    <meta charset="utf-8">
6    <title>Standalone Callout Map</title>
7    <style>
8      /* The div element that contains the map. */
9      #map {
10        height: 100%;
11      }
12      /* Make the page fill the window. */
13      html, body {
14        height: 100%;
15        margin: 0;
16        padding: 0;
17      }
18    </style>
19  </head>
20  <body>
21    <div id="map"></div>
22    <script>
23// Static Map of Maintenance Crew Regions - "Callout Map"
24// There are exactly 9 regions named after their Crew ID: 10, 11, 12, 20, 21, 22, 30, 31, 32
25// Each region has a numbered marker near the center that when clicked shows an
26// InfoWindow containing the phone numbers for that crew.
27// @author jdalbey 11/25/2019
28
29    // Constant for map center location in District 12
30    var centerPoint = {
31        lat: 33.693385,
32        lng: -117.798937
33    };
34    // Initial map zoom
35    var initZoom = 11;
36
37    // Initialize the map
38    function initMap() {
39        var map = new google.maps.Map(document.getElementById('map'), {
40            zoom: initZoom,
41            center: centerPoint,
42            mapTypeId: 'terrain',
43            mapTypeControl: false,
44            streetViewControl: false,
45            fullscreenControl: false
46        });
47
48    // Define the LatLng coordinates for each polygon's path.
49    // The variable names indicate the region number.
50    var region22 = 
51    [
52
53    {lng: -118.075561523437514, lat: 33.810175192319427}, 
54    {lng: -118.028697967529311, lat: 33.809818614133711}, 
55    {lng: -118.029041290283217, lat: 33.792273132272697}, 
56    {lng: -118.011016845703139, lat: 33.792415792969067}, 
57    {lng: -118.011016845703139, lat: 33.776150942519855}, 
58    {lng: -117.921066284179702, lat: 33.775294812192321}, 
59    {lng: -117.920894622802749, lat: 33.78114486556651}, 
60    {lng: -117.869567871093764, lat: 33.780716826428275},
61    {lng: -117.919006347656264, lat: 33.825364042768278},
62    {lng: -117.974766882184127, lat: 33.860836964317699},
63    {lng: -118.008132936665788, lat: 33.878581810221512},
64    {lng: -118.071647646138445, lat: 33.81556612720675 }   
65    ];
66
67    var region11 =
68    [ {lng: -117.975311279296889, lat: 33.861008021639982}, 
69    {lng: -117.952651977539077, lat: 33.847892766494965}, 
70    {lng: -117.919006347656264, lat: 33.825364042768278}, 
71    {lng: -117.89737701416017,  lat:33.806252750539684 },
72    {lng: -117.88089752197267,  lat:33.790846512234154 },
73    {lng: -117.863113397033885, lat: 33.775094261456935}, 
74    {lng: -117.863388061523452, lat: 33.775152122972564}, 
75    {lng: -117.841072082519545, lat: 33.750606041606453}, 
76    {lng: -117.786998748779311, lat: 33.75988300332898 },
77    {lng: -117.791461944580092, lat: 33.854379367213504},
78    {lng: -117.814357280731215, lat: 33.891097778879868},
79    {lng: -117.856521606445327, lat: 33.890937470812517}, 
80    {lng: -117.883301550216871, lat: 33.910970083273227},
81    {lng: -117.930404646322145, lat: 33.882270965115168}, 
82    {lng: -117.974766882184127, lat: 33.860836964317699}
83    ];
84    var region10 =
85    [{lng: -117.747207654174431, lat: 33.920536243811434}, 
86    {lng: -117.679229748900994, lat: 33.877221436507959}, 
87    {lng: -117.615028393920525, lat: 33.805076310194131}, 
88    {lng: -117.614822387695327, lat: 33.804826363491607},   
89    {lng: -117.786955833435073, lat: 33.759847324630051},       
90    {lng: -117.791461944580092, lat: 33.854379367213504},
91    {lng: -117.814357280731215, lat: 33.891097778879868},
92    {lng: -117.764339447021499, lat: 33.891222462723938}
93    ];
94    var region20 =
95    [{lng: -118.093414306640639, lat: 33.759454857961813}, 
96     {lng: -118.117721563903629, lat: 33.742268427950371},
97     {lng: -118.090530376648559, lat: 33.732750775701277}, 
98     {lng: -118.042465191101655, lat: 33.689912112406454}, 
99         {lng: -118.021865836344674, lat: 33.670982564442461}, 
100     {lng: -117.998451220337316, lat: 33.650978512026882}, 
101         {lng: -117.938095073914184, lat: 33.621039930103279 }, 
102     {lng: -117.934249886311591, lat: 33.619021253954152}, 
103     {lng: -117.929580684285639, lat: 33.623997562730807},
104     {lng: -117.93033599853517, lat: 33.623482118738629}, 
105     {lng: -117.989730834960952, lat: 33.730907010627263}, 
106     {lat: 33.7580276912933, lng: -118.0422592163086}
107    ];
108    var region21 =
109    [{lng: -117.840900421142578, lat: 33.750606041606453}, 
110    {lng: -117.839355468750014, lat: 33.727052323290899}, 
111    {lng: -117.90836334228517, lat: 33.690067083222011}, 
112    {lng: -117.914886474609375, lat: 33.658067007354418}, 
113    {lng: -117.93033599853517, lat: 33.623482118738629}, 
114    {lng: -117.989730834960952, lat: 33.730907010627263},   
115    {lng: -118.042259216308594, lat: 33.7580276912933}, 
116    {lng: -118.093414306640639, lat: 33.759454857961813}, 
117    {lng: -118.096504211425795, lat: 33.782286292810255}, 
118    {lng: -118.075389862060561, lat: 33.810103876801179}, 
119    {lng: -118.028697967529311, lat: 33.809818614133711}, 
120    {lng: -118.029041290283217, lat: 33.792273132272697}, 
121    {lng: -118.011016845703139, lat: 33.792415792969067}, 
122    {lng: -118.011016845703139, lat: 33.776150942519855}, 
123    {lng: -117.921066284179702, lat: 33.775294812192321}, 
124    {lng: -117.920894622802749, lat: 33.78114486556651}, 
125    {lng: -117.869567871093764, lat: 33.780716826428275}
126    ];
127    var region32 =
128    [{lng: -117.896862030029311,  lat: 33.696065771651526}, 
129    {lng:  -117.754074130207314, lat: 33.669902002904237}, 
130    {lng:  -117.612934112548842, lat: 33.565857458017128}, 
131    {lng:  -117.413120269775405, lat: 33.6593529542764 },
132    {lng: -117.614822387695327, lat: 33.804826363491607}, 
133    {lng: -117.786955833435073, lat: 33.759847324630051},
134    {lng: -117.840900421142578, lat: 33.750606041606453},
135    {lng: -117.839355468750014, lat: 33.727052323290899}
136   
137    ];
138       
139    var region31=
140    [{ lat: 33.565857458017128, lng:-117.612891197204604},
141    {lng:  -117.754074130207314, lat: 33.669902002904237},
142    {lng: -117.896862030029311,  lat: 33.696065771651526}, 
143    {lng: -117.90836334228517, lat: 33.690067083222011},
144    {lng: -117.914886474609375, lat: 33.658067007354418}, 
145    {lng: -117.93033599853517, lat: 33.623482118738629}, 
146    {lng: -117.934455871582045, lat: 33.619479664847653},
147        {lat: 33.607757123330948,  lng:-117.93067932128907}, 
148        {lat: 33.604039887039541, lng:-117.913169860839858}, 
149        {lat: 33.593173200549977, lng:-117.876434326171889}, 
150        {lat: 33.592887216626245, lng:-117.760391235351577 }, 
151        {lat: 33.543683878655926, lng:-117.673873901367202 }
152    ];
153
154    var region12 =
155    [{lng: -117.764339447021499, lat: 33.891222462723938}, 
156    {lng: -117.856521606445327, lat: 33.890937470812517}, 
157    {lng: -117.883301550216871, lat: 33.910970083273227},
158    {lng: -117.930404646322145, lat: 33.882270965115168}, 
159    {lng: -117.974766882184127, lat: 33.860836964317699}, 
160    {lng: -118.008272570572444, lat: 33.878396884046268}, 
161    {lng: -117.978057840373381, lat: 33.905120101626196}, 
162    {lng: -117.976684549357756, lat: 33.946142303526379},     
163    {lng: -117.785797098185881, lat: 33.948420735432244}, 
164    {lng: -117.746932979207486, lat: 33.921139882742345}, 
165    {lng: -117.761764526367202, lat: 33.894072329464144},
166    ]; 
167    var region30 = 
168    [   { lat: 33.54325465646098, lng: -117.6735305786133 },
169        { lat: 33.591528780040434, lng: -117.75961875915529 },
170        { lat: 33.592887216626245, lng: -117.87643432617189 },
171        { lat: 33.56642960408059, lng: -117.83231735229494 },
172        { lat: 33.55055114384406, lng: -117.80845642089844 },
173        { lat: 33.54096543541857, lng: -117.78442382812501 },
174        { lat: 33.51363317754275, lng: -117.76021957397462 },
175        { lat: 33.50690611436667, lng: -117.75112152099611 },
176        { lat: 33.499033355121824, lng: -117.7459716796875 },
177        { lat: 33.49216199827286, lng: -117.73773193359376 },
178        { lat: 33.47269019266666, lng: -117.71713256835939 },
179        { lat: 33.462379817843576, lng: -117.71163940429689 }, 
180        { lat: 33.46008845688024, lng: -117.67868041992189 },
181        { lat: 33.430008731182994, lng: -117.63336181640626 },
182        { lat: 33.38959955347486, lng: -117.59696960449219 },
183        { lat: 33.4520682165952, lng: -117.57843017578126 },
184        { lat: 33.4520682165952, lng: -117.54890441894533 },
185        { lat: 33.470971882039215, lng: -117.5090789794922 },
186        { lat: 33.53681606773302, lng: -117.50976562500001 },
187        { lat: 33.6593529542764, lng: -117.41294860839845 },
188        { lat: 33.54325465646098, lng: -117.6735305786133 }
189    ];
190
191    // An array of records that describe the attributes for each region.
192    // polygon: the list of coordinates defining the region
193    // id: the identifier for the region (the crew number)
194    // color: color code to use for coloring the displayed polygon
195    // infoLocation: the coordinates of the center marker for the region
196    // infoContent: the crew phone numbers to display in the infowindow
197    var regionList = [
198    {
199        polygon: region12,
200        id: '12',
201        color: '#fec28c', // orange
202        infoLocation: {
203            lat: 33.93025735136521,
204            lng: -117.91213989257814
205        },
206        infoContent: "Phone numbers crew 12"
207    }, 
208    {
209        polygon: region11,
210        id: '11',
211        color: '#f9f385', // yellow
212        infoLocation: {
213            lat: 33.8247936182649,
214            lng: -117.85858154296876
215        }, 
216        infoContent: "Phone numbers crew 11"
217    }, 
218    {
219        polygon: region10,
220        id: '10',
221        color: '#cf7b71', // rust
222        infoLocation: {
223            lat: 33.82251188219802,
224            lng: -117.69790649414064
225        },
226        infoContent: "Phone numbers crew 10"
227    }, 
228    {
229        polygon: region22,
230        id: '22',
231        color: '#aae2ef',  // light-blue
232        infoLocation: {
233            lat: 33.82251188219802,
234            lng: -117.9986572265625
235        },
236        infoContent: "Phone numbers crew 22"
237    }, 
238    {
239        polygon: region21,
240        id: '21',
241        color: '#d9bedd', // purple
242        infoLocation: {
243            lat: 33.720913019358676,
244            lng: -117.92999267578126
245        }, 
246        infoContent: "Phone numbers crew 21"
247    }, 
248    {
249        polygon: region20,
250        id: '20',
251        color: '#aebed7',  // blue-gray
252        infoLocation: {
253            lat: 33.723197462817026,
254            lng: -118.03573608398439
255        }, 
256        infoContent: "Phone numbers crew 20"
257    }, 
258    {
259        polygon: region32,
260        id: '32',
261        color: '#c4d9ae',  // leaf-green
262        infoLocation: {
263            lat: 33.72205524868731,
264            lng: -117.68829345703126
265        },
266        infoContent: "Phone numbers crew 32"
267    }, 
268    {
269        polygon: region31,
270        id: '31',
271        color: '#d7f885', // neon green
272        infoLocation: {
273            lat: 33.637489243170826,
274            lng: -117.80364990234376
275        },
276        infoContent: "Phone numbers crew 31"
277    }, 
278    {
279        polygon: region30,
280        id: '30',
281        color: '#a4b082',  //olive
282        infoLocation: {
283            lat: 33.4979,
284            lng: -117.5784
285        },
286        infoContent: "JENNY WELLS 949-462-8102"
287    }, 
288    ];
289    // a list of region markers that provide a clickable label for the region
290    var markerList = []; 
291    // a list of infoWindows, one for each region
292    var infowindows = [];
293    // Iterate over the regions, creating a polygon for each one
294    for (var i = 0; i < regionList.length; i++) 
295    {
296        // Construct the polygon.
297        var currPolygon = new google.maps.Polygon({
298            paths: regionList[i].polygon,
299            strokeColor: regionList[i].color,
300            strokeOpacity: 0.8,
301            strokeWeight: 2,
302            fillColor: regionList[i].color,
303            fillOpacity: 0.5
304        });
305        currPolygon.setMap(map);
306
307        // Construct the content of the info window for this region
308        var contentString = '<div id="content">' +
309            '<div id="siteNotice">' +
310            '</div>' +
311            '<h1 id="firstHeading" class="firstHeading">' + regionList[i].id + '</h1>' +
312            '<div id="bodyContent">' +
313            '<p><b>' + regionList[i].infoContent + '</p>' +
314            '</div>' +
315            '</div>';
316
317        // Construct the info window for this region
318        infowindows[i] = new google.maps.InfoWindow({
319            content: contentString
320        });
321
322        // create the marker that will appear in the center of the region
323        markerList[i] = new google.maps.Marker({
324            position: regionList[i].infoLocation, // where to place the marker
325            map: map, // the map to be drawn on
326            title: regionList[i].id, // Maintenance Crew Number
327            icon: 'images/region.png', // the marker image
328            label: {
329                text: regionList[i].id,  // region label
330                color: '#FFFFFF', // white for text
331                fontSize: '16px'  // a readable size
332            }
333        });
334    }; // end for
335
336    // Construct the click listeners for each info window
337    // it seems these can't be done in a loop because the loop index
338    // isn't known when the click happens.
339    markerList[0].addListener('click', function() {
340        infowindows[0].open(map, markerList[0]);
341    });
342    markerList[1].addListener('click', function() {
343        infowindows[1].open(map, markerList[1]);
344    });
345    markerList[2].addListener('click', function() {
346        infowindows[2].open(map, markerList[2]);
347    });
348    markerList[3].addListener('click', function() {
349        infowindows[3].open(map, markerList[3]);
350    });
351    markerList[4].addListener('click', function() {
352        infowindows[4].open(map, markerList[4]);
353    });
354    markerList[5].addListener('click', function() {
355        infowindows[5].open(map, markerList[5]);
356    });
357    markerList[6].addListener('click', function() {
358        infowindows[6].open(map, markerList[6]);
359    });
360    markerList[7].addListener('click', function() {
361        infowindows[7].open(map, markerList[7]);
362    });
363    markerList[8].addListener('click', function() {
364        infowindows[8].open(map, markerList[8]);
365    });
366
367
368    //Reference: https://medium.com/@barvysta/google-marker-api-lets-play-level-1-dynamic-label-on-marker-f9b94f2e3585
369
370} 
371    </script>
372    <!-- Project API Key -->
373    <script async defer
374    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJuoPR3s6_qekC-GA1v5rvTcVocL3AXHE&libraries=places&callback=initMap"></script>
375
376  </body>
377</html>
Note: See TracBrowser for help on using the repository browser.