source: tmcsimulator/trunk/atms_map_night_30sec.html @ 264

Revision 264, 5.1 KB checked in by jdalbey, 7 years ago (diff)

add comments to google map page
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5    <title>ATMS Simulator Map Prototype</title> 
6    <style>
7      /* Set the size of the div element that contains the map */
8      #mapdiv {
9        height: 100%;
10        width: 100%; 
11       }
12        /* Makes the sample page fill the window. */
13      html, body {
14        height: 100%;
15        margin: 0;
16        padding: 0;
17      }
18    </style>
19  </head>
20  <body>
21    <h3>STMS Map Prototype 0.2</h3>
22    <!--The div element for the map -->
23    <div id="mapdiv"></div>
24    <script>
25    var map;  // a global variable for the google map
26    // Build a solid colored dot icon to use instead of the classic pin
27    function dotSymbol(color)
28    {
29        // create a colored circle marker
30        return {
31            path:google.maps.SymbolPath.CIRCLE,
32            scale: 3,
33            strokeColor: color,
34            fillColor: color,
35            fillOpacity: 1.0
36        };
37    }
38    function loadMapData()
39    {
40        // Load the map data
41        map.data.loadGeoJson('highways.json');
42
43        // Style the map data by applying the color property to each dot
44        map.data.setStyle(function(feature) 
45        {
46            // Property value can be any HTML color name
47            var ptColor = feature.getProperty("color");
48            return {
49                icon: dotSymbol(ptColor)
50                    };
51        });
52    }
53    // Initialize and add the map
54    function initMap() 
55    {
56        // The location of John Wayne Airport (where map is centered)
57        var wayne = {lat: 33.687228, lng: -117.872148};
58        // Declare the map, centered at John Wayne Airport, with a specified zoom
59        map = new google.maps.Map( document.getElementById('mapdiv'), 
60        {
61            zoom: 13, 
62            center: wayne,
63            // styles for "night" node
64            styles: [
65                {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
66                {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
67                {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
68                {
69                  featureType: 'administrative.locality',
70                  elementType: 'labels.text.fill',
71                  stylers: [{color: '#d59563'}]
72                },
73                {
74                  featureType: 'poi',
75                  elementType: 'labels.text.fill',
76                  stylers: [{color: '#d59563'}]
77                },
78                {
79                  featureType: 'poi.park',
80                  elementType: 'geometry',
81                  stylers: [{color: '#263c3f'}]
82                },
83                {
84                  featureType: 'poi.park',
85                  elementType: 'labels.text.fill',
86                  stylers: [{color: '#6b9a76'}]
87                },
88                {
89                  featureType: 'road',
90                  elementType: 'geometry',
91                  stylers: [{color: '#38414e'}]
92                },
93                {
94                  featureType: 'road',
95                  elementType: 'geometry.stroke',
96                  stylers: [{color: '#212a37'}]
97                },
98                {
99                  featureType: 'road',
100                  elementType: 'labels.text.fill',
101                  stylers: [{color: '#9ca5b3'}]
102                },
103                {
104                  featureType: 'road.highway',
105                  elementType: 'geometry',
106                  stylers: [{color: '#746855'}]
107                },
108                {
109                  featureType: 'road.highway',
110                  elementType: 'geometry.stroke',
111                  stylers: [{color: '#1f2835'}]
112                },
113                {
114                  featureType: 'road.highway',
115                  elementType: 'labels.text.fill',
116                  stylers: [{color: '#f3d19c'}]
117                },
118                {
119                  featureType: 'transit',
120                  elementType: 'geometry',
121                  stylers: [{color: '#2f3948'}]
122                },
123                {
124                  featureType: 'transit.station',
125                  elementType: 'labels.text.fill',
126                  stylers: [{color: '#d59563'}]
127                },
128                {
129                  featureType: 'water',
130                  elementType: 'geometry',
131                  stylers: [{color: '#17263c'}]
132                },
133                {
134                  featureType: 'water',
135                  elementType: 'labels.text.fill',
136                  stylers: [{color: '#515c6d'}]
137                },
138                {
139                  featureType: 'water',
140                  elementType: 'labels.text.stroke',
141                  stylers: [{color: '#17263c'}]
142                }
143              ]
144            });
145        loadMapData();
146        // Start a timer to refresh the map every 30 seconds
147        var myTimer = setInterval(loadMapData, 30000);
148    }
149
150    // Using John's API Key
151    </script>
152    <script async defer
153    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
154    </script>
155  </body>
156</html>
Note: See TracBrowser for help on using the repository browser.