Changeset 531 in tmcsimulator for trunk/webapps/cptms/CalloutMap_standalone.html

Timestamp:

11/26/2019 03:02:26 PM (6 years ago)

Author:

jdalbey

Message:

CalloutMap? - add marker locations and stubs for polygons.

File:

• trunk/webapps/cptms/CalloutMap_standalone.html (moved) (moved from trunk/webapps/cptms/CalloutMapPrototype.html) (2 diffs)

trunk/webapps/cptms/CalloutMap_standalone.html

@@ -4 +4 @@
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
-    <title>Callout Map Prototype</title>
+    <title>Standalone Callout Map</title>
     <style>
-      /* Always set the map height explicitly to define the size of the div
-       * element that contains the map. */
+      /* The div element that contains the map. */
       #map {
         height: 100%;
       }
-      /* Optional: Makes the sample page fill the window. */
+      /* Make the page fill the window. */
       html, body {
         height: 100%;
@@ -22 +21 @@
     <div id="map"></div>
     <script>
-
-  // This example creates a simple polygon representing the a Triangle.
-  // Constant for map center location in District 12
-  var centerPoint = {
+// Static Map of Maintenance Crew Regions - "Callout Map"
+// There are exactly 9 regions named after their Crew ID: 10, 11, 12, 20, 21, 22, 30, 31, 32
+// Each region has a numbered marker near the center that when clicked shows an
+// InfoWindow containing the phone numbers for that crew.
+// @author jdalbey 11/25/2019
+
+    // Constant for map center location in District 12
+    var centerPoint = {
         lat: 33.693385,
-        lng: -117.798937
+        lng: -117.798937
     };
-  // Initial map zoom
-  var initZoom = 11;
-
-      // Initialize the map
-      function initMap() {
+    // Initial map zoom
+    var initZoom = 11;
+
+    // Initialize the map
+    function initMap() {
         var map = new google.maps.Map(document.getElementById('map'), {
-          zoom: initZoom,
-          center: centerPoint,
-          mapTypeId: 'terrain',
+            zoom: initZoom,
+            center: centerPoint,
+            mapTypeId: 'terrain',
             mapTypeControl: false,
             streetViewControl: false,
-                        fullscreenControl: false
+            fullscreenControl: false
         });
 
-        // Define the LatLng coordinates for the polygon's path.
-        var triangleCoords = [
-{lat: 33.72405411343989, lng: -117.73738861083986},
-{lat: 33.67378281830218, lng: -117.76039123535158},
-{lat: 33.67092561169523, lng: -117.79541015625001},  
-{lat: 33.6863533995927 , lng: -117.85617828369142},  
-{lat: 33.75346059828493, lng: -117.7782440185547 }, 
-{lat: 33.76059657418862, lng: -117.74047851562501},  
-{lat: 33.72405411343989, lng: -117.73738861083986} 
-        ];
-
+    // Define the LatLng coordinates for each polygon's path.
+    // The variable names indicate the region number.
+    var region22 =
+    [{ lat: 33.84817790215087, lng: -117.9979705810547 },
+{ lat: 33.80482636349161, lng: -118.02680969238283 },
+{ lat: 33.80482636349161, lng: -117.97531127929689 },
+{ lat: 33.84817790215087, lng: -117.9979705810547 }
+    ];
+    var region11 =
+    [{ lat: 33.84817790215087, lng: -117.85995483398439 },
+{ lat: 33.81053176901896, lng: -117.88055419921876 },
+{ lat: 33.81110228864701, lng: -117.83935546875001 },
+{ lat: 33.84817790215087, lng: -117.85995483398439 }
+    ];
+    var region10 =
+    [{ lat: 33.84874817060767, lng: -117.69996643066408 },
+{ lat: 33.81452532651738, lng: -117.72262573242189 },
+{ lat: 33.815666308702774, lng: -117.67799377441408 },
+{ lat: 33.84874817060767, lng: -117.69996643066408 }
+    ];
+    var region20 =
+    [{ lat: 33.751176960544875, lng: -118.03573608398439 },
+{ lat: 33.70777628973998, lng: -118.06663513183595 },
+{ lat: 33.70663387044635, lng: -118.01101684570314 },
+{ lat: 33.751176960544875, lng: -118.03573608398439 }
+    ];
+    var region21 =
+    [{ lat: 33.745467600106196, lng: -117.9320526123047 },
+{ lat: 33.70948989018831, lng: -117.95333862304689 },
+{ lat: 33.71006108273974, lng: -117.90252685546876 },
+{ lat: 33.745467600106196, lng: -117.9320526123047 }
+    ];
+    var region32 =
+    [{ lat: 33.7443256824053, lng: -117.68829345703126 },
+{ lat: 33.7117746375995, lng: -117.71301269531251 },
+{ lat: 33.71120345644536, lng: -117.66632080078126 },
+{ lat: 33.7443256824053, lng: -117.68829345703126 }
+    ];
+    var region31 =
+    [{ lat: 33.66263917576218, lng: -117.8057098388672 },
+{ lat: 33.62205269226263, lng: -117.83798217773439 },
+{ lat: 33.62205269226263, lng: -117.77000427246095 },
+{ lat: 33.66263917576218, lng: -117.8057098388672 }
+    ];
+    var region12 =
+    [{ lat: 33.95646052534845, lng: -117.91076660156251 },
+{ lat: 33.915443294345756, lng: -117.94921875000001 },
+{ lat: 33.91658292864734, lng: -117.87780761718751 },
+{ lat: 33.95646052534845, lng: -117.91076660156251 }
+    ];
+    var region30 = 
+    [   { 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 region.
+    // polygon: the list of coordinates defining the region
+    // id: the identifier for the region (the crew number)
+    // color: color code to use for coloring the displayed polygon
+    // infoLocation: the coordinates of the center marker for the region
+    // infoContent: the crew phone numbers to display in the infowindow
+    var regionList = [
+    {
+        polygon: region12,
+        id: '12',
+        color: '#fec28c', // orange
+        infoLocation: {
+            lat: 33.93025735136521,
+            lng: -117.91213989257814
+        },
+        infoContent: "Phone numbers crew 12"
+    }, 
+    {
+        polygon: region11,
+        id: '11',
+        color: '#f9f385', // yellow
+        infoLocation: {
+            lat: 33.8247936182649,
+            lng: -117.85858154296876
+        }, 
+        infoContent: "Phone numbers crew 11"
+    }, 
+    {
+        polygon: region10,
+        id: '10',
+        color: '#cf7b71', // rust
+        infoLocation: {
+            lat: 33.82251188219802,
+            lng: -117.69790649414064
+        },
+        infoContent: "Phone numbers crew 10"
+    }, 
+    {
+        polygon: region22,
+        id: '22',
+        color: '#aae2ef',  // light-blue
+        infoLocation: {
+            lat: 33.82251188219802,
+            lng: -117.9986572265625
+        },
+        infoContent: "Phone numbers crew 22"
+    }, 
+    {
+        polygon: region21,
+        id: '21',
+        color: '#d9bedd', // purple
+        infoLocation: {
+            lat: 33.720913019358676,
+            lng: -117.92999267578126
+        }, 
+        infoContent: "Phone numbers crew 21"
+    }, 
+    {
+        polygon: region20,
+        id: '20',
+        color: '#aebed7',  // blue-gray
+        infoLocation: {
+            lat: 33.723197462817026,
+            lng: -118.03573608398439
+        }, 
+        infoContent: "Phone numbers crew 20"
+    }, 
+    {
+        polygon: region32,
+        id: '32',
+        color: '#c4d9ae',  // leaf-green
+        infoLocation: {
+            lat: 33.72205524868731,
+            lng: -117.68829345703126
+        },
+        infoContent: "Phone numbers crew 32"
+    }, 
+    {
+        polygon: region31,
+        id: '31',
+        color: '#d7f885', // neon green
+        infoLocation: {
+            lat: 33.637489243170826,
+            lng: -117.80364990234376
+        },
+        infoContent: "Phone numbers crew 31"
+    }, 
+    {
+        polygon: region30,
+        id: '30',
+        color: '#a4b082',  //olive
+        infoLocation: {
+            lat: 33.4979,
+            lng: -117.5784
+        },
+        infoContent: "Phone numbers crew 30"
+    }, 
+    ];
+    // a list of region markers that provide a clickable label for the region
+    var markerList = [];  
+    // a list of infoWindows, one for each region
+    var infowindows = [];
+    // Iterate over the regions, creating a polygon for each one
+    for (var i = 0; i < regionList.length; i++) 
+    {
         // Construct the polygon.
-        var bigTriangle = new google.maps.Polygon({
-          paths: triangleCoords,
-          strokeColor: '#FF0000',
-          strokeOpacity: 0.8,
-          strokeWeight: 2,
-          fillColor: '#FF0000',
-          fillOpacity: 0.25
+        var currPolygon = new google.maps.Polygon({
+            paths: regionList[i].polygon,
+            strokeColor: regionList[i].color,
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            fillColor: regionList[i].color,
+            fillOpacity: 0.5
         });
-        bigTriangle.setMap(map);
-
-
-        var contentString = '<div id="content">'+
-              '<div id="siteNotice">'+
-              '</div>'+
-              '<h1 id="firstHeading" class="firstHeading">31</h1>'+
-              '<div id="bodyContent">'+
-              '<p><b>Phone numbers for maintenance crews will appear here. </p>'+
-              '</div>'+
-              '</div>';
-
-          var infowindow = new google.maps.InfoWindow({
+        currPolygon.setMap(map);
+
+        // Construct the content of the info window for this region
+        var contentString = '<div id="content">' +
+            '<div id="siteNotice">' +
+            '</div>' +
+            '<h1 id="firstHeading" class="firstHeading">' + regionList[i].id + '</h1>' +
+            '<div id="bodyContent">' +
+            '<p><b>' + regionList[i].infoContent + '</p>' +
+            '</div>' +
+            '</div>';
+
+        // Construct the info window for this region
+        infowindows[i] = new google.maps.InfoWindow({
             content: contentString
-          });
-          var location31 = {lat: 33.72405, lng: -117.75400};
-          var marker = new google.maps.Marker({
-            position: location31,
-            map: map,
-            title: '31'  // Maintenance Unit Number
-          });
-          marker.addListener('click', function() {
-            infowindow.open(map, marker);
-          });
-
-
-      }
+        });
+
+        // create the marker that will appear in the center of the region
+        markerList[i] = new google.maps.Marker({
+            position: regionList[i].infoLocation, // where to place the marker
+            map: map, // the map to be drawn on
+            title: regionList[i].id, // Maintenance Crew Number
+            icon: 'images/region.png', // the marker image
+            label: {
+                text: regionList[i].id,  // region label
+                color: '#FFFFFF', // white for text
+                fontSize: '16px'  // a readable size
+            }
+        });
+    }; // 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]);
+    });
+
+
+    //Reference: https://medium.com/@barvysta/google-marker-api-lets-play-level-1-dynamic-label-on-marker-f9b94f2e3585
+
+} 
     </script>
     <!-- Project API Key -->