source: tmcsimulator/trunk/atms_map_night_30sec.html @ 259

Revision 259, 5.0 KB checked in by jdalbey, 7 years ago (diff)

Added atms map in night mode that refreshes every 30 sec.
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: 550px;  // or  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>ATMS Simulator Map Prototype 0.1</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        return {
30            path:google.maps.SymbolPath.CIRCLE,
31            scale: 3,
32            strokeColor: color,
33            fillColor: color,
34            fillOpacity: 1.0
35        };
36    }
37    function loadMapData()
38    {
39        // Load the map data
40        map.data.loadGeoJson('highways.json');
41//map.data.loadGeoJson("https://www.dropbox.com/s/qzlj63sqsua07ah/highways.json");
42        // Style the map data by applying the color property to each dot
43        map.data.setStyle(function(feature) 
44        {
45            // Property value can be any HTML color name
46            var ptColor = feature.getProperty("color");
47            return {
48                icon: dotSymbol(ptColor)
49                    };
50        });
51    }
52    // Initialize and add the map
53    function initMap() 
54    {
55        // The location of John Wayne Airport
56        var wayne = {lat: 33.687228, lng: -117.872148};
57        // The map, centered at John Wayne Airport
58        map = new google.maps.Map( document.getElementById('mapdiv'), 
59        {
60            zoom: 13, 
61            center: wayne,
62            styles: [
63                {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
64                {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
65                {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
66                {
67                  featureType: 'administrative.locality',
68                  elementType: 'labels.text.fill',
69                  stylers: [{color: '#d59563'}]
70                },
71                {
72                  featureType: 'poi',
73                  elementType: 'labels.text.fill',
74                  stylers: [{color: '#d59563'}]
75                },
76                {
77                  featureType: 'poi.park',
78                  elementType: 'geometry',
79                  stylers: [{color: '#263c3f'}]
80                },
81                {
82                  featureType: 'poi.park',
83                  elementType: 'labels.text.fill',
84                  stylers: [{color: '#6b9a76'}]
85                },
86                {
87                  featureType: 'road',
88                  elementType: 'geometry',
89                  stylers: [{color: '#38414e'}]
90                },
91                {
92                  featureType: 'road',
93                  elementType: 'geometry.stroke',
94                  stylers: [{color: '#212a37'}]
95                },
96                {
97                  featureType: 'road',
98                  elementType: 'labels.text.fill',
99                  stylers: [{color: '#9ca5b3'}]
100                },
101                {
102                  featureType: 'road.highway',
103                  elementType: 'geometry',
104                  stylers: [{color: '#746855'}]
105                },
106                {
107                  featureType: 'road.highway',
108                  elementType: 'geometry.stroke',
109                  stylers: [{color: '#1f2835'}]
110                },
111                {
112                  featureType: 'road.highway',
113                  elementType: 'labels.text.fill',
114                  stylers: [{color: '#f3d19c'}]
115                },
116                {
117                  featureType: 'transit',
118                  elementType: 'geometry',
119                  stylers: [{color: '#2f3948'}]
120                },
121                {
122                  featureType: 'transit.station',
123                  elementType: 'labels.text.fill',
124                  stylers: [{color: '#d59563'}]
125                },
126                {
127                  featureType: 'water',
128                  elementType: 'geometry',
129                  stylers: [{color: '#17263c'}]
130                },
131                {
132                  featureType: 'water',
133                  elementType: 'labels.text.fill',
134                  stylers: [{color: '#515c6d'}]
135                },
136                {
137                  featureType: 'water',
138                  elementType: 'labels.text.stroke',
139                  stylers: [{color: '#17263c'}]
140                }
141              ]
142            });
143        loadMapData();
144        // Start a time to refresh the map every 30 seconds
145        var myTimer = setInterval(loadMapData, 30000);
146    }
147
148    // Using John's API Key
149    </script>
150    <script async defer
151    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
152    </script>
153  </body>
154</html>
Note: See TracBrowser for help on using the repository browser.