Untitled

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body,
      #map_canvas {
          margin: 0px;
          padding: 0px;
          height: 100%;
          width: 100%;
          }
     </style>

    <style type="text/css">
    .center {
    float: center;
    width:90%;
    height: 30%;
    padding: 10px;
    border: 1px solid;
    overflow: scroll;
    }
    </style>

    <style>
    #legend {
    background: white;
    padding: 10px;
    }
    </style>

    <style scoped="scoped">
  button.button-bar {
  border: 2px solid #000000;
  background-color: #FFFFFF;
  border-radius: 10px ;
  padding: 4px ;
  -webkit-transition:
  -webkit-transform 0.01s ease-in-out
}
button.button-bar:hover { -webkit-transform: scale(1.2); }
  </style>
  </head>


  <body onload="initialize()">


    <div id="map_canvas" style="background-color:#EEEEEE;height:70%;width:60%;float:left;"></div>


    <div id="menu" style="background-color:#0000;height:100%;width:40%;float:right;">
    <input type='file' id='files' name='file'/></br>

    <select id="optionList" onchange="choosedata()">
    <option selected="selected"></option>
    <option value="1">IMU temperature</option>
    <option value="2">IMU pressure</option>
    <option value="3">wind temperaure</option>
    </select><br>


    <form>
    <input type="text" id='enterurl' name="url" value="http://">
    <input  onclick="overlay()" type="button" value="enter">
    </form>

    <p>
    <br>
    <button class="button-bar" onclick="clearall()"> Clear </button>
    <button class="button-bar"onclick="plotheatmap()"> Heatmap </button>
    <button class="button-bar"onclick="showMarkers()"> Markers </button>
    <button class="button-bar"onclick="showPath()"> Path </button>
    <button class="button-bar"onclick="Opacity()"> Opacity </button>
    <button class="button-bar"onclick="changeGradient()"> Gradient </button>
    <button class="button-bar"onclick="changeRadius()"> Radius </button>
    <br><br>
    </p>


    <div id="poly" class="center"></div>
    </div><br>
    <div id="legend">legend!</div>


    <script
      src="https://maps.googleapis.com/maps/api/js?libraries=visualization,geometry">               // libraries: visualization, geometry
    </script>

    <script>
     var HK = new google.maps.LatLng(22.24785990000, 114.203384299999930000);
     var map;
     var markers=[];       //create markers array
     var json=[];            //create array for JSON data
     var showlength=[];      //create array for distance
     var heatmapData=[];      //create artay for heatmapData
     var fitbound=[];         //create array to contain bound LatLng
     var magnitudes=[];      //create array for magnitudes
     var boatspeeds=[];      //create array to contain boatspeed
     var weight=[];
     Mflag=0;               //signal flag for markers
     Pflag=0;               //signal flag for path

function choosedata(){
     if (document.getElementById("optionList").value == "1"){
           callback1();polylineLength();}

     else if (document.getElementById("optionList").value == "2"){
           callback2();polylineLength();}

    else if (document.getElementById("optionList").value == "3"){
           callback3();polylineLength();}

    }

//choose file
function readBlob() {
      setMarkers(null);          //clear markers using setAllMap function
      markers.length=0;         //empty markers array i.e. clear all markers

      var files = document.getElementById('files').files[0];
      var reader = new FileReader();

    // If we use onload, we need to check the readyState.
    reader.onload = function(evt) {
      if (evt.target.readyState == 2) {
        json=[];
        json.push(reader.result);

      }
    };
    reader.readAsText(files);
  }

document.getElementById('files').addEventListener('change', function(evt) {
      readBlob();}, false);


function initialize() {                             //create map

  var mapOptions = {
    zoom:10,
    center: HK,
    mapTypeId: google.maps.MapTypeId.ROAD
  };

  map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
  document.getElementById('legend'));


}


function overlay(){
   var url = document.getElementById("enterurl").value;
   heatlayer = new google.maps.KmlLayer({
   url: url,
   suppressInfoWindows: true,
   map: map
   });

// a event listener for future development
   google.maps.event.addListener(heatlayer, 'click', function(event) {
    document.getElementById('poly').innerHTML+= 'this is an overlay'+ 'n </br>';
    });
}


function callback1(){


  var getjson = JSON.parse(json);                   //built in JSON commmand, text->JSON
  //var getjason =  eval ("(" + json + ")");        //avoid using eval for security reasons


  for (var i = 0; i < getjson.features.length; i++) {
    var coords = getjson.features[i].geometry.coordinates;     // get coordinates
    var latLng = new google.maps.LatLng(coords[1], coords[0]); // swap lon/lat
    var magnitude = getjson.features[i].properties.imutemperature;      // get magnitude
    var boatspeed = getjson.features[i].properties.boatspeed;           // get speed

    var weightedLoc = {
      location: latLng,
      weight: Math.pow(2, magnitude)
        };

    heatmapData.push(weightedLoc);                       // append GeoJson data
    fitbound.push(latLng);                               // show GeoJson data
    magnitudes.push(magnitude);                          // append magnitude to array
    boatspeeds.push(boatspeed);                          // append boatspeed to array


 // add markers to data points
    var marker = new google.maps.Marker({
            position: latLng,
            clickable: true,
          });
          addinfo(marker,i);

    markers.push(marker);                             //add markers to array
  }


    function addinfo(marker, j) {
        weight[j] = magnitudes.slice(j,j+1)
        google.maps.event.addListener(marker, 'click', function() {
        document.getElementById('poly').innerHTML +=  '<br> point n'+ (j+1)+'<br> Lat/Lng: n' + markers[j].getPosition()+'n <br>' +'imutemperature: n' + weight.slice(j,j+1)+'n degrees </br>' +'boatspeed: n'+ boatspeeds.slice(j,j+1)+'n km/hr </br>';
      });
    };


   heatmap = new google.maps.visualization.HeatmapLayer({        //plot heatmap
    data: heatmapData,
    dissipating: false,
    opacity: 0.5,
    radius: 0.0005,
  });


   var bounds = new google.maps.LatLngBounds();                 //create bounds
for (var i = 0; i < fitbound.length; i++) {
  bounds.extend(fitbound[i]);
}

   google.maps.event.addListener(map, 'click', function() {     //click to fitbounds
    map.fitBounds(bounds);
  });

var polylineLength = 0;                                         //function calculating distance
for (var i = 0; i < fitbound.length; i++) {
     if (i > 0) polylineLength += google.maps.geometry.spherical.computeDistanceBetween(fitbound[i], fitbound[i-1]);
}
    showlength[0]=(polylineLength);

  document.getElementById('legend').innerHTML = 'i m legend1';

}

function callback2(){


  var getjson = JSON.parse(json);                   //built in JSON commmand, text->JSON
  //var getjason =  eval ("(" + json + ")");        //avoid using eval for security reasons


  for (var i = 0; i < getjson.features.length; i++) {
    var coords = getjson.features[i].geometry.coordinates;     // get coordinates
    var latLng = new google.maps.LatLng(coords[1], coords[0]); // swap lon/lat
    var magnitude = getjson.features[i].properties.imupressure;        // get weight
    var boatspeed = getjson.features[i].properties.boatspeed;

    var weightedLoc = {
      location: latLng,
      weight: Math.pow(2, magnitude)
    };

    heatmapData.push(weightedLoc);                       // append GeoJson data
    fitbound.push(latLng);                               // show GeoJson data
    magnitudes.push(magnitude);
    boatspeeds.push(boatspeed);                          // append boatspeed to array

 // add markers to data points
    var marker = new google.maps.Marker({
            position: latLng,
            clickable: true,
          });
          addinfo(marker,i);
          markers.push(marker);                         //add markers to array
  }


    function addinfo(marker, j) {
        weight[j]=magnitudes.slice(j,j+1)
        google.maps.event.addListener(marker, 'click', function() {
        document.getElementById('poly').innerHTML += '<br> point n'+ (j+1)+ '<br>Lat/Lng: n' +  markers[j].getPosition()+'n <br>' +'imupressure: n' + weight.slice(j,j+1)+'n atm  </br>'+'boatspeed: n'+ boatspeeds.slice(j,j+1)+'n km/hr </br>';
         });

      }


   heatmap = new google.maps.visualization.HeatmapLayer({        //plot heatmap
    data: heatmapData,
    dissipating: false,
    opacity: 0.5,
    radius: 0.0005,

  });


   var bounds = new google.maps.LatLngBounds();                 //create bounds
for (var i = 0; i < fitbound.length; i++) {
  bounds.extend(fitbound[i]);
}

   google.maps.event.addListener(map, 'click', function() {     //click to fitbounds
    map.fitBounds(bounds);
  });

var polylineLength = 0;                                         //function calculating distance
for (var i = 0; i < fitbound.length; i++) {
     if (i > 0) polylineLength += google.maps.geometry.spherical.computeDistanceBetween(fitbound[i], fitbound[i-1]);
}
    showlength[0]=(polylineLength);
     document.getElementById('legend').innerHTML = 'i am lengend 2';
}

function callback3(){


  var getjson = JSON.parse(json);                   //built in JSON commmand, text->JSON
  //var getjason =  eval ("(" + json + ")");        //avoid using eval for security reasons


  for (var i = 0; i < getjson.features.length; i++) {
    var coords = getjson.features[i].geometry.coordinates;     // get coordinates
    var latLng = new google.maps.LatLng(coords[1], coords[0]); // swap lon/lat
    var magnitude = getjson.features[i].properties.windtemperature;        // get weight
    var boatspeed = getjson.features[i].properties.boatspeed;

    var weightedLoc = {
      location: latLng,
      weight: Math.pow(2, magnitude)
      //weight: (magnitude)
    };

    heatmapData.push(weightedLoc);                       // append GeoJson data
    fitbound.push(latLng);                               // show GeoJson data
    magnitudes.push(magnitude);
    boatspeeds.push(boatspeed);                          // append boatspeed to array

 // add markers to data points
    var marker = new google.maps.Marker({
            position: latLng,
            clickable: true,
          });
          addinfo(marker,i);
          markers.push(marker);                         //add markers to array
  }

    function addinfo(marker, j) {
        weight[j] = magnitudes.slice(j,j+1)
        google.maps.event.addListener(marker, 'click', function() {
        document.getElementById('poly').innerHTML +=  '<br> point n'+ (j+1)+'<br> Lat/Lng: n' +  markers[j].getPosition()+'n <br>' +'windtemperature: n' + weight.slice(j,j+1)+'n degrees </br>'+'boatspeed: n'+ boatspeeds.slice(j,j+1)+'n km/hr </br>';
      });
      }


   heatmap = new google.maps.visualization.HeatmapLayer({        //plot heatmap
    data: heatmapData,
    dissipating: false,
    opacity: 0.5,
    radius: 0.0005,

  });


   var bounds = new google.maps.LatLngBounds();                 //create bounds
for (var i = 0; i < fitbound.length; i++) {
  bounds.extend(fitbound[i]);
}

   google.maps.event.addListener(map, 'click', function() {     //click to fitbounds
    map.fitBounds(bounds);
  });

var polylineLength = 0;                                         //function calculating distance
for (var i = 0; i < fitbound.length; i++) {
     if (i > 0) polylineLength += google.maps.geometry.spherical.computeDistanceBetween(fitbound[i], fitbound[i-1]);
}
    showlength[0]=(polylineLength);
    document.getElementById('legend').innerHTML = 'i am lengend 3';
}


//plot heatmap
function plotheatmap(){
    heatmap.setMap(heatmap.getMap()? null:map);
}

// Show distance of sailpath.
function polylineLength(){
    document.getElementById('poly').innerHTML+="distance: n"+showlength.toString()+"n m</br>";
      }

// Sets the map on all markers in the array.
function setMarkers(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map),
    markers[0].setIcon("http://maps.google.com/mapfiles/ms/micons/blue.png"),
    markers[i].setIcon("http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0440/flag_red.png"),
    markers[(markers.length)-1].setIcon("http://maps.google.com/mapfiles/ms/micons/yellow.png");
  }
}

function setPath(){
        for (var i = 0; i < markers.length; i++){
           if (boatspeeds[i]>0 & boatspeeds[i]<=0.4 ){
            var path = [markers[i].getPosition(),markers[i+1].getPosition()];
            var addpath = new google.maps.Polyline({
                strokeColor: '#ffffff',
                strokeOpacity: 1.0,
                strokeWeight: 7,
                path: path
                });
                addpath.setMap(map)
        }
        else if (boatspeeds[i]>=0.5 & boatspeeds[i]<=0.9){
            var path = [markers[i].getPosition(),markers[i+1].getPosition()];
            var addpath = new google.maps.Polyline({
                strokeColor: '#03d10c',
                strokeOpacity: 1.0,
                strokeWeight: 7,
                path: path
                });
                addpath.setMap(map)
        }
        else if (boatspeeds[i]>=1 & boatspeeds[i]<=1.4){
            var path = [markers[i].getPosition(),markers[i+1].getPosition()];
            var addpath = new google.maps.Polyline({
                strokeColor: '#ffef00',
                strokeOpacity: 1.0,
                strokeWeight: 7,
                path: path
                });
                addpath.setMap(map)
        }
        else if (boatspeeds[i]>=1.5 & boatspeeds[i]<=1.9){
            var path = [markers[i].getPosition(),markers[i+1].getPosition()];
            var addpath =  new google.maps.Polyline({
                strokeColor: '#b80000',
                strokeOpacity: 1.0,
                strokeWeight: 7,
                path: path
                });
                addpath.setMap(map)
        }
    }
}


// Shows/hide any markers currently in the array.
function showMarkers() {
    if (Mflag == 0){
        setMarkers(map),
        Mflag=1;
    }
    else if(Mflag == 1){
        setMarkers(null),
        Mflag=0;
    }
}


function showPath(){
     if (Pflag == 0){
        setPath(map),
        Pflag=1;
    }
    else if(Pflag == 1){
        setPath(null),
        Pflag=0;
    }
}


//change radius
function changeRadius() {
    heatmap.set('radius', heatmap.get('radius') ? null : 0.0005);          //set radius
}


//change opacity
function Opacity() {
    heatmap.set('opacity', heatmap.get('opacity') ? null:0.4);
}

function changeGradient() {
     var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 0.5)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(64, 0, 124, 1)',
'rgba(154, 0, 110, 1)',
'rgba(195, 0, 135, 1)',
'rgba(255, 0, 0, 1)'
  ]

  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}


//clear all add-on layers
function clearall() {
  heatmap.setMap(null),
  setMarkers(null),
  fitbound.length=0,
  markers.length=0,
  heatmapData.length=0,
  magnitudes.length=0,
  heatlayer.setMap(null);
}

        </script>
     </div>
</body>