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

Revision 534, 10.5 KB checked in by jdalbey, 6 years ago (diff)

cptms/index.html add callout btn and stub for callout map layer
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    [{ lat: 33.84817790215087, lng: -117.9979705810547 },
52{ lat: 33.80482636349161, lng: -118.02680969238283 },
53{ lat: 33.80482636349161, lng: -117.97531127929689 },
54{ lat: 33.84817790215087, lng: -117.9979705810547 }
55    ];
56    var region11 =
57    [{ lat: 33.84817790215087, lng: -117.85995483398439 },
58{ lat: 33.81053176901896, lng: -117.88055419921876 },
59{ lat: 33.81110228864701, lng: -117.83935546875001 },
60{ lat: 33.84817790215087, lng: -117.85995483398439 }
61    ];
62    var region10 =
63    [{ lat: 33.84874817060767, lng: -117.69996643066408 },
64{ lat: 33.81452532651738, lng: -117.72262573242189 },
65{ lat: 33.815666308702774, lng: -117.67799377441408 },
66{ lat: 33.84874817060767, lng: -117.69996643066408 }
67    ];
68    var region20 =
69    [{ lat: 33.751176960544875, lng: -118.03573608398439 },
70{ lat: 33.70777628973998, lng: -118.06663513183595 },
71{ lat: 33.70663387044635, lng: -118.01101684570314 },
72{ lat: 33.751176960544875, lng: -118.03573608398439 }
73    ];
74    var region21 =
75    [{ lat: 33.745467600106196, lng: -117.9320526123047 },
76{ lat: 33.70948989018831, lng: -117.95333862304689 },
77{ lat: 33.71006108273974, lng: -117.90252685546876 },
78{ lat: 33.745467600106196, lng: -117.9320526123047 }
79    ];
80    var region32 =
81    [{ lat: 33.7443256824053, lng: -117.68829345703126 },
82{ lat: 33.7117746375995, lng: -117.71301269531251 },
83{ lat: 33.71120345644536, lng: -117.66632080078126 },
84{ lat: 33.7443256824053, lng: -117.68829345703126 }
85    ];
86    var region31 =
87    [{ lat: 33.66263917576218, lng: -117.8057098388672 },
88{ lat: 33.62205269226263, lng: -117.83798217773439 },
89{ lat: 33.62205269226263, lng: -117.77000427246095 },
90{ lat: 33.66263917576218, lng: -117.8057098388672 }
91    ];
92    var region12 =
93    [{ lat: 33.95646052534845, lng: -117.91076660156251 },
94{ lat: 33.915443294345756, lng: -117.94921875000001 },
95{ lat: 33.91658292864734, lng: -117.87780761718751 },
96{ lat: 33.95646052534845, lng: -117.91076660156251 }
97    ];
98    var region30 = 
99    [   { lat: 33.54325465646098, lng: -117.6735305786133 },
100        { lat: 33.591528780040434, lng: -117.75961875915529 },
101        { lat: 33.592887216626245, lng: -117.87643432617189 },
102        { lat: 33.56642960408059, lng: -117.83231735229494 },
103        { lat: 33.55055114384406, lng: -117.80845642089844 },
104        { lat: 33.54096543541857, lng: -117.78442382812501 },
105        { lat: 33.51363317754275, lng: -117.76021957397462 },
106        { lat: 33.50690611436667, lng: -117.75112152099611 },
107        { lat: 33.499033355121824, lng: -117.7459716796875 },
108        { lat: 33.49216199827286, lng: -117.73773193359376 },
109        { lat: 33.47269019266666, lng: -117.71713256835939 },
110        { lat: 33.462379817843576, lng: -117.71163940429689 }, 
111        { lat: 33.46008845688024, lng: -117.67868041992189 },
112        { lat: 33.430008731182994, lng: -117.63336181640626 },
113        { lat: 33.38959955347486, lng: -117.59696960449219 },
114        { lat: 33.4520682165952, lng: -117.57843017578126 },
115        { lat: 33.4520682165952, lng: -117.54890441894533 },
116        { lat: 33.470971882039215, lng: -117.5090789794922 },
117        { lat: 33.53681606773302, lng: -117.50976562500001 },
118        { lat: 33.6593529542764, lng: -117.41294860839845 },
119        { lat: 33.54325465646098, lng: -117.6735305786133 }
120    ];
121
122    // An array of records that describe the attributes for each region.
123    // polygon: the list of coordinates defining the region
124    // id: the identifier for the region (the crew number)
125    // color: color code to use for coloring the displayed polygon
126    // infoLocation: the coordinates of the center marker for the region
127    // infoContent: the crew phone numbers to display in the infowindow
128    var regionList = [
129    {
130        polygon: region12,
131        id: '12',
132        color: '#fec28c', // orange
133        infoLocation: {
134            lat: 33.93025735136521,
135            lng: -117.91213989257814
136        },
137        infoContent: "Phone numbers crew 12"
138    }, 
139    {
140        polygon: region11,
141        id: '11',
142        color: '#f9f385', // yellow
143        infoLocation: {
144            lat: 33.8247936182649,
145            lng: -117.85858154296876
146        }, 
147        infoContent: "Phone numbers crew 11"
148    }, 
149    {
150        polygon: region10,
151        id: '10',
152        color: '#cf7b71', // rust
153        infoLocation: {
154            lat: 33.82251188219802,
155            lng: -117.69790649414064
156        },
157        infoContent: "Phone numbers crew 10"
158    }, 
159    {
160        polygon: region22,
161        id: '22',
162        color: '#aae2ef',  // light-blue
163        infoLocation: {
164            lat: 33.82251188219802,
165            lng: -117.9986572265625
166        },
167        infoContent: "Phone numbers crew 22"
168    }, 
169    {
170        polygon: region21,
171        id: '21',
172        color: '#d9bedd', // purple
173        infoLocation: {
174            lat: 33.720913019358676,
175            lng: -117.92999267578126
176        }, 
177        infoContent: "Phone numbers crew 21"
178    }, 
179    {
180        polygon: region20,
181        id: '20',
182        color: '#aebed7',  // blue-gray
183        infoLocation: {
184            lat: 33.723197462817026,
185            lng: -118.03573608398439
186        }, 
187        infoContent: "Phone numbers crew 20"
188    }, 
189    {
190        polygon: region32,
191        id: '32',
192        color: '#c4d9ae',  // leaf-green
193        infoLocation: {
194            lat: 33.72205524868731,
195            lng: -117.68829345703126
196        },
197        infoContent: "Phone numbers crew 32"
198    }, 
199    {
200        polygon: region31,
201        id: '31',
202        color: '#d7f885', // neon green
203        infoLocation: {
204            lat: 33.637489243170826,
205            lng: -117.80364990234376
206        },
207        infoContent: "Phone numbers crew 31"
208    }, 
209    {
210        polygon: region30,
211        id: '30',
212        color: '#a4b082',  //olive
213        infoLocation: {
214            lat: 33.4979,
215            lng: -117.5784
216        },
217        infoContent: "JENNY WELLS 949-462-8102"
218    }, 
219    ];
220    // a list of region markers that provide a clickable label for the region
221    var markerList = []; 
222    // a list of infoWindows, one for each region
223    var infowindows = [];
224    // Iterate over the regions, creating a polygon for each one
225    for (var i = 0; i < regionList.length; i++) 
226    {
227        // Construct the polygon.
228        var currPolygon = new google.maps.Polygon({
229            paths: regionList[i].polygon,
230            strokeColor: regionList[i].color,
231            strokeOpacity: 0.8,
232            strokeWeight: 2,
233            fillColor: regionList[i].color,
234            fillOpacity: 0.5
235        });
236        currPolygon.setMap(map);
237
238        // Construct the content of the info window for this region
239        var contentString = '<div id="content">' +
240            '<div id="siteNotice">' +
241            '</div>' +
242            '<h1 id="firstHeading" class="firstHeading">' + regionList[i].id + '</h1>' +
243            '<div id="bodyContent">' +
244            '<p><b>' + regionList[i].infoContent + '</p>' +
245            '</div>' +
246            '</div>';
247
248        // Construct the info window for this region
249        infowindows[i] = new google.maps.InfoWindow({
250            content: contentString
251        });
252
253        // create the marker that will appear in the center of the region
254        markerList[i] = new google.maps.Marker({
255            position: regionList[i].infoLocation, // where to place the marker
256            map: map, // the map to be drawn on
257            title: regionList[i].id, // Maintenance Crew Number
258            icon: 'images/region.png', // the marker image
259            label: {
260                text: regionList[i].id,  // region label
261                color: '#FFFFFF', // white for text
262                fontSize: '16px'  // a readable size
263            }
264        });
265    }; // end for
266
267    // Construct the click listeners for each info window
268    // it seems these can't be done in a loop because the loop index
269    // isn't known when the click happens.
270    markerList[0].addListener('click', function() {
271        infowindows[0].open(map, markerList[0]);
272    });
273    markerList[1].addListener('click', function() {
274        infowindows[1].open(map, markerList[1]);
275    });
276    markerList[2].addListener('click', function() {
277        infowindows[2].open(map, markerList[2]);
278    });
279    markerList[3].addListener('click', function() {
280        infowindows[3].open(map, markerList[3]);
281    });
282    markerList[4].addListener('click', function() {
283        infowindows[4].open(map, markerList[4]);
284    });
285    markerList[5].addListener('click', function() {
286        infowindows[5].open(map, markerList[5]);
287    });
288    markerList[6].addListener('click', function() {
289        infowindows[6].open(map, markerList[6]);
290    });
291    markerList[7].addListener('click', function() {
292        infowindows[7].open(map, markerList[7]);
293    });
294    markerList[8].addListener('click', function() {
295        infowindows[8].open(map, markerList[8]);
296    });
297
298
299    //Reference: https://medium.com/@barvysta/google-marker-api-lets-play-level-1-dynamic-label-on-marker-f9b94f2e3585
300
301} 
302    </script>
303    <!-- Project API Key -->
304    <script async defer
305    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJuoPR3s6_qekC-GA1v5rvTcVocL3AXHE&libraries=places&callback=initMap"></script>
306
307  </body>
308</html>
Note: See TracBrowser for help on using the repository browser.