gmaps.js

var TILE_SIZE = 256;
var tileCoordinate, zoomLevel, currentLatLng;
var marker;
var coordInfo;
var aqiLevel;
var waterLevel;

var weatherApiKey;

init();
// TODO : save map state on reaload, using API maybe
// TODO : show model analysis data

function init() {
  loadMap();
  getAndUpdateAnalysisResult();
  loadWeatherData();
  // link generateModel button with the API call. If you directly call generateModel(),
  // then it will call it infinitely (every time the page refreshes)
  generateModelButton = document.getElementById('generateModelsButton');
  generateModelButton.onclick = generateModel;
  
  placeObjectOnMapButton = document.getElementById('placeStuffButton');
  placeObjectOnMapButton.onclick = placeObjectOnMapRedirect;

  coordInfo = document.getElementById('coordInfo');
  aqiLevel = document.getElementById('aqi-index');
  aqiBox = document.getElementById('aqi');

  waterLevel = document.getElementById('water-index');
  waterBox = document.getElementById('water-table');
}

function placeObjectOnMapRedirect() {
  if (currentLatLng==undefined){
    window.open(`placeObjects.html`);
  }
  else{
    window.open(`placeObjects.html?lat=${currentLatLng.lat()}&lng=${currentLatLng.lng()}&zoom=${zoomLevel}`);    
  }
}

async function loadWeatherData() {
  const response = await fetch('http://127.0.0.1:5000/getWeatherApiKey', {
      mode: 'cors'
  });
  weatherApiKey = await response.json();
  /*global jQuery, Highcharts, OWM , from loader.js */
  (loadWeatherData(jQuery, OWM));
}
async function getPreviousPos() {
  const response = await fetch(`http://127.0.0.1:5000/getLastPosition`, {
    mode: 'cors'
  });
  const json = await response.json();
  console.log(json);

  if (json == 'False') {
    return false;
  } else {
    var lat = parseFloat(json['lat']);
    var long = parseFloat(json['long']);
    console.log(`LATLONG ${lat}, ${long}`);
    return json;
    // return [lat, long]
    // currentLatLng = new google.maps.LatLng(lat, long)
    //add marker to position
  }
}

async function getAndUpdateAnalysisResult() {
  const response = await fetch(`http://127.0.0.1:5000/getAnalysisResult`, {
    mode: 'cors'
  });
  const json = await response.json();
  // return json;
  if (json != 'False') {
    var result = document.getElementById('analysisResult');
    var pbar = document.getElementById('pbar');
    var buildingTopArea = json['FlatSurfaceArea'];
    var totalArea = json['TotalArea'];
    result.innerHTML = `Analysis result:<br>BuildingTop area : ${buildingTopArea}, Total area : ${totalArea}`;
    var percent = (buildingTopArea/totalArea)*100;
    pbar.style = `width : ${percent}%`
    
  }
}

async function generateModel() {
  var tilex = tileCoordinate.x;
  var tiley = tileCoordinate.y;
  console.log(`Current location ${tileCoordinate}, ${zoomLevel}`);
  // console.log(tileCoordinate);
  console.log(zoomLevel);
  if (zoomLevel < 15) {
    console.log(
      'Terrain export is only available over zoom 15. Please zoom in more!'
    );
  } else {
    console.log('Calling API..');
    const response = await fetch(
      `http://127.0.0.1:5000/run/${tilex}/${tiley}/${zoomLevel}/${currentLatLng.lat()}/${currentLatLng.lng()}`,
      { mode: 'cors' }
    );
    const myJson = await response.json();
    console.log(myJson);
  }
}

async function loadMap() {
  console.log('Getting key..');
  const response = await fetch('http://127.0.0.1:5000/getApiKey', {
    mode: 'cors'
  });
  const key = await response.json();
  console.log(key);
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&callback=initMap`;
  document.body.appendChild(script);
}

async function initMap() {
  var pos, map;
  var prev = await getPreviousPos();
  if (prev == false) {
    pos = new google.maps.LatLng(1.334, 103.847); // Singapore
    map = new google.maps.Map(document.getElementById('map'), {
      center: pos,
      zoom: 3,
      gestureHandling: 'greedy'
    });
    tileCoordinate = getTileCoord(pos);
  } else {
    pos = new google.maps.LatLng(prev['lat'], prev['long']);
    currentLatLng = pos;
    map = new google.maps.Map(document.getElementById('map'), {
      center: pos,
      zoom: parseInt(prev['zoom']),
      gestureHandling: 'greedy'
    });
    tileCoordinate = new google.maps.Point(
      parseInt(prev['tilex']),
      parseInt(prev['tiley'])
    );
  }

  marker = new google.maps.Marker({
    position: pos,
    map: map,
    title: 'Drag me around!',
    draggable: true,
    animation: google.maps.Animation.DROP
  });
  marker.setMap(map);

  zoomLevel = map.getZoom();
  console.log(tileCoordinate, zoomLevel);
  // if (currentLatLng != undefined) {
  //   showPositionInfo(
  //     tileCoordinate.x,
  //     tileCoordinate.y,
  //     zoomLevel,
  //     currentLatLng.lat(),
  //     currentLatLng.lng()
  //   );
  // }

  google.maps.event.addListener(marker, 'mouseup', function() {
    updateMarkerLocation(map, marker);
  });

  map.addListener('zoom_changed', function() {
    updateMarkerLocation(map, marker);
  });
}

// function showPositionInfo(tilex, tiley, zoom, lat, long) {
//   coordInfo.innerHTML = `Latitude ${lat} Longitude ${long}<br>tilex : ${tilex} tiley: ${tiley} zoom: ${zoom}`;
// }

function updateMarkerLocation(map, marker) {
  zoomLevel = map.getZoom();
  var oldLatLng = currentLatLng;
  currentLatLng = marker.getPosition();
  tileCoordinate = getTileCoord(currentLatLng, zoomLevel);
  console.log(tileCoordinate, zoomLevel);
  console.log('Updated! ^');
  // showPositionInfo(
  //   tileCoordinate.x,
  //   tileCoordinate.y,
  //   zoomLevel,
  //   currentLatLng.lat(),
  //   currentLatLng.lng()
  // );

  if (zoomLevel < 15) {
    generateModelButton.classList.add('disabled');
  } else {
    generateModelButton.classList.remove('disabled');
  }

  if (oldLatLng !== currentLatLng) {
    water = Math.floor(Math.random() * 300 + 1);
    waterLevel.innerHTML = water;
    if (water <= 50) {
      waterBox.style.backgroundColor = '#FE1603';
    } else if (water > 50 && water <= 100) {
      waterBox.style.backgroundColor = '#FE7103';
    } else if (water > 100 && water <= 150) {
      waterBox.style.backgroundColor = '#F7D209';
    } else if (water > 150 && water <= 200) {
      waterBox.style.backgroundColor = '#08E6F7';
    } else if (water > 200 && water <= 300) {
      waterBox.style.backgroundColor = '#0DA8E3';
    } else {
      waterBox.style.backgroundColor = '#0D26E3';
    }

    axios
      .get(
        'https://api.waqi.info/feed/geo:' +
          currentLatLng.lat() +
          ';' +
          currentLatLng.lng() +
          '/?token=' +
          AQI_KEY,
        null,
        null
      )
      .then(response => {
        const data = response.data.data;
        aqi = data.aqi;
        aqiLevel.innerHTML = aqi;
        if (aqi <= 50) {
          aqiBox.style.backgroundColor = '#00ff4c';
        } else if (aqi > 50 && aqi <= 100) {
          aqiBox.style.backgroundColor = '#e1ff00';
        } else if (aqi > 100 && aqi <= 150) {
          aqiBox.style.backgroundColor = '#ffae00';
        } else if (aqi > 150 && aqi <= 200) {
          aqiBox.style.backgroundColor = '#ff000d';
        } else if (aqi > 200 && aqi <= 300) {
          aqiBox.style.backgroundColor = '#850099';
        } else {
          aqiBox.style.backgroundColor = '#800000';
        }
      })
      .catch(error => console.error('Error in getting AQI', error));
      var jugad = Math.floor((Math.random() * 3) + 1);
      var suggestions = ''
      if(jugad == 1) {
          suggestions+="<li>Build more solar panels</li>";
          } else if(jugad == 2){
            suggestions+="<li>Build more rainwater harvesters</li>";
          } else if(jugad == 3){
            suggestions+="<li>Build more windmills</li>";
          }else if(aqi > 100 || water < 150){
            suggestions+="<li>Plant more trees</li>";
          }else if(aqi > 100 || water < 150){ //ROHAN CHANGE THIS LINE TO If (Ratio of trees/roads<0.6) == plant more trees
            suggestions+="<li>Plant more trees</li>";
          }
      var sug = document.getElementById("dynamic_sug");
      sug.innerHTML = suggestions;
  }
}

function getTileCoord(currentLatLng, zoom) {
  var scale = 1 << zoom;
  var worldCoordinate = project(currentLatLng);
  tileCoordinate = new google.maps.Point(
    Math.floor((worldCoordinate.x * scale) / TILE_SIZE),
    Math.floor((worldCoordinate.y * scale) / TILE_SIZE)
  );
  return tileCoordinate;
}

// The mapping between latitude, longitude and pixels is defined by the web
// mercator projection.
function project(latLng) {
  var siny = Math.sin((latLng.lat() * Math.PI) / 180);

  // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  // about a third of a tile past the edge of the world tile.
  siny = Math.min(Math.max(siny, -0.9999), 0.9999);

  return new google.maps.Point(
    TILE_SIZE * (0.5 + latLng.lng() / 360),
    TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI))
  );
}

async function Export() {
  //URL of Google Static Maps.
  const response = await fetch('http://127.0.0.1:5000/getApiKey', {
    mode: 'cors'
  });
  const key = await response.json();
  var staticMapUrl = 'https://maps.googleapis.com/maps/api/staticmap';

  //Set the Google Map Center.
  staticMapUrl += '?center=' + currentLatLng.lat() + ',' + currentLatLng.lng();

  //Set the Google Map Size.
  staticMapUrl += '&size=600x900';

  //Set the Google Map Zoom.
  staticMapUrl += '&zoom=' + zoomLevel;

  //Set the Google Map Type.
  staticMapUrl += '&maptype=satellite';

  //Set the Google Map Type.
  staticMapUrl += `&key=${key}`;

  //Display the Image of Google Map.
  var imgMap = document.getElementById('element-out');
  imgMap.src = staticMapUrl;
  imgMap.style.display = 'block';

  // console.log("BEANS");
  
  // const response = await fetch(`http://127.0.0.1:5000/getImage/${currentLatLng.lat()}/${currentLatLng.lng()}/${zoomLevel}`, {
  //   mode: 'cors'
  // });
  // const json = await response.json();
  // console.log(json);
  // document.getElementById('colorInfo').innerHTML = json
  // var a = document.getElementById('dynamic_link');
  // a.href = staticMapUrl;
}