| 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( |
|---|
| 59 | document.getElementById('mapdiv'), {zoom: 13, center: wayne}); |
|---|
| 60 | loadMapData(); |
|---|
| 61 | // Start a time to refresh the map every 30 seconds |
|---|
| 62 | var myTimer = setInterval(loadMapData, 30000); |
|---|
| 63 | } |
|---|
| 64 | |
|---|
| 65 | // Using John's API Key |
|---|
| 66 | </script> |
|---|
| 67 | <script async defer |
|---|
| 68 | src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap"> |
|---|
| 69 | </script> |
|---|
| 70 | </body> |
|---|
| 71 | </html> |
|---|
