map.html

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
      <meta charset="utf-8"/>
      <style type="text/css">
         html { height: 100% }
         body { height: 100%; margin: 0; padding: 0 }
         #map-canvas { height: 100% }
      </style>
      <script type="text/javascript"
         src="https://maps.googleapis.com/maps/api/js?
         key=AIzaSyALt375cV7B_ZO_HCHtKM6G79sJsyI0zmU
         &libraries=drawing"></script>
   </head>
   <body ondragstart="return false">
      <br>
      <div id="latitudeText" class="generalInputField">Latitude<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
      </div>
      <form id="latitudeForm" class="inputValue" onsubmit="initLocation(); return false">
         <input id="latitudeField" class="inputBorder numberField" type="number" step="any"  name="latitudeInput" placeholder="37.698612">
      </form>
      <div id="longitudeText" class="generalInputField">Longitude<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
      </div>
      <form id="longitudeForm" class="inputValue" onsubmit="initLocation(); return false">
         <input id="longitudeField" class="inputBorder numberField" type="number" step="any" name="longitudeInput" placeholder=" -121.710155">
      </form>
      <br>
      <button type="button" id="startButton" onclick="initLocation(); return false">Start Program</button>
      <br>
      <br>
      <div id="info"></div>
       
       <div class="slidecontainer">
  <input type="range" min="1" max="1000" value="50" class="slider" id="myRange">
</div>
       <div id="sliderOutput">Speed (ms): 800</div>
       
       
       <br>
       <div id="altitude">Altitude: </div>
       <div id="windspeed">Wind Speed: </div>
       <div id="winddirection">Wind Direction</div>
       
       <script>
       var slider = document.getElementById("myRange");
var output = document.getElementById("sliderOutput");
output.innerHTML = "Speed: " + slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    var output = document.getElementById("sliderOutput");
    slider.value = this.value;
    output.innerHTML = "Speed (ms): " + this.value;
    console.log("value: " + this.value);
}
       </script>
       
      <div id ="map-canvas"></div>
      <input class="w3-button w3-black" type="button" value="Input Button">
      <script type="text/javascript" >
         var map;
                  var markerXPos;
                  var markerYPos;
         var currentTime = 0.0;
         var marker;
         // Starting position of the map
//         var latitude = 37.374712;
//         var longitude = -120.577858;
          
        var latitude = 37.698612;
         var longitude = -121.710155;
                  
                  var outerPolygon;
                  var innerPolygon;
         
         // Current position of drone
         var droneLatLng = null;
         
         function initialize()
         {
         	// Add map
                      
                      markerXPos = latitude;
                      markerYPos = longitude;
                      
         	var mapOptions =
         	{
         		// center: new google.maps.LatLng(37.374712, -120.577858),
         		center: new google.maps.LatLng(latitude, longitude),
         		zoom: 19,
         		mapTypeId: google.maps.MapTypeId.SATELLITE,
                          keyboardShortcuts: false,
         	};
         	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
         	map.setTilt(0);
         	
         	var drawingManager = new google.maps.drawing.DrawingManager({
         		drawingMode: google.maps.drawing.OverlayType.MARKER,
         		drawingControl: true,
         		drawingControlOptions: {
         			position: google.maps.ControlPosition.TOP_CENTER,
         			drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
         		},
         		markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
         		circleOptions: {
         			fillColor: 'rgba(0, 98, 255, 0.46)',
         			fillOpacity: 1,
         			strokeWeight: 5,
         			clickable: false,
         			editable: true,
         			zIndex: 1
         		},
                               polygonOptions: {
                  fillColor: 'rgba(255, 255, 255, 0)',
                  fillOpacity: 0.5,
                  strokeWeight: 3,
                  strokeColor: '#ff0000',
                  clickable: false,
                  editable: false,
                  zIndex: 1
              }
         	});
                          console.log(drawingManager)
         
         	drawingManager.setMap(map);
                      
                         google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
              document.getElementById('info').innerHTML += "polygon points:" + "<br>";
              for (var i = 0; i < polygon.getPath().getLength(); i++) {
                  document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
              
                 
              }
          
             // Define the LatLng coordinates for polygon's inner path. These come from the user selected points
             var innerCoords = polygon.getPath();
                                                             
                 // Define the LatLng coordinates for the polygon's  outer path.
              var outerCoords = [
                {lat: 37.288447, lng: -121.136101},
                {lat: 37.860948, lng: -120.603264},
                {lat: 37.242545, lng: -120.102013}
              ];
                             
         
              // Construct the polygon, including both paths.
              var fogOfWar = new google.maps.Polygon({
                paths: [outerCoords, innerCoords],
                strokeColor: '#FFC107',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: 'rgba(0, 0, 0, 0.69)',
                fillOpacity: 0.9
              });
              fogOfWar.setMap(map);
         
          });
                      
         	
         	// Add event listener
         	google.maps.event.addListener(map, 'zoom_changed',
         		function()
         		{
         		//alert(map.getZoom());
         		}
         	);
         	
         	// Add marker
         	marker = new google.maps.Marker(
         	{
         		position: new google.maps.LatLng(37.374712, -120.577858),
         		map: map,
         		title: "Marker A",
                          icon: 'arrowIcon.png',
         	});
         	google.maps.event.addListener(marker, 'click', function()
         	{
         		map.panTo(marker.getPosition());
         	});
         	marker.setMap(map); 
                      
                      
                      
                      
         }
         
         
         
         google.maps.event.addDomListener(window, 'load', initialize);
         
         function updateMarkerLocation(lat,lon){
         
         	droneLatLng = new google.maps.LatLng (lat, lon);
         	marker.setPosition (droneLatLng);
         	
         	console.log ("Updated location to (" + lat + ", " + lon + ")\n");
                      
                      markerXPos = lat;
                      markerYPos = lon;
         };
         
         function circlePoint(time) {
         	var radius = 0.001;
         	var x = Math.cos(time) * radius;
         	var y = Math.sin(time) * radius;
         	updateMarkerLocation (latitude + x, longitude + y);
         	//return {lat:window.lat + y, lng:window.lng + x};
         };
         
         function updateMarker () {
         	currentTime = currentTime + 0.01;
         	circlePoint (currentTime);
         }
         
         function initLocation(){
         	latitude = Number(document.forms[0].latitudeInput.value);	   
         	longitude = Number(document.forms[1].longitudeInput.value);
                      
                      markerXPos = latitude;
                      markerYPos = longitude;
                      
         	initialize();
                      
                    
                      
                      updateMarkerLocation(latitude, longitude);
         }
         //setInterval ("updateMarker ()", 10);
                  
                  
                  
                  
         // When an arrow key is pressed, use checkKey function
                  
                  window.addEventListener("keydown", function(e) {
          // space and arrow keys
          if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
              e.preventDefault();
          }
         }, false);
                  
         document.onkeydown = checkKey;      
                  
         // Use cases depending on key pressed
         function checkKey(e) {
         
          e = e || window.event;
         
          if (e.keyCode == '38') {
              // up arrow
              updateMarkerLocation(markerXPos + 0.000015, markerYPos);
             
          }
          else if (e.keyCode == '40') {
              // down arrow
                     updateMarkerLocation(markerXPos - 0.000015, markerYPos);
          }
          else if (e.keyCode == '37') {
             // left arrow
                     updateMarkerLocation(markerXPos, markerYPos - 0.000015);
          }
          else if (e.keyCode == '39') {
             // right arrow
                     updateMarkerLocation(markerXPos, markerYPos + 0.000015);
          }
         
         }
         
      </script>
       
    <style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>

  var output = [];
  var tempArray = [];
  var timeColumn = [];
  
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
      var stringOutput = evt.target.result;
       
        output = stringOutput.split('\n');
        
        
        document.getElementById('byte_content').textContent = 				output[0];
          
    var i = 0;
          var check = function(){
              var slider = document.getElementById("myRange");
    if(i < output.length){
                    tempArray = output[i].split(" ");
            timeColumn.push(tempArray[0]);

            
//            updateMarkerLocation(markerXPos - 0.000015, markerYPos);
//            console.log(tempArray[0]);
        
        var altitude = document.getElementById("altitude");
        var windspeed = document.getElementById("windspeed");
        var winddirection = document.getElementById("winddirection");
        
        altitude.innerHTML = "Altitude: " + tempArray[8];
        windspeed.innerHTML = "Wind Speed (m/s): " + tempArray[13];
        winddirection.innerHTML = "Wind Direciton (angle from north): " + tempArray[14];


                    updateMarkerLocation(tempArray[6], tempArray[7]);

            i++;
        console.log("checked");
        setTimeout(check, slider.value); // check again in a second
    }

}

check();
        
 
		
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>


       
   </body>
</html>