Spot My Otter

by Sam Fereday

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDffceTlO7Lu1ajR7tAUJzn3RYIoqy0ToY&amp;libraries=visualization"></script>
<div id="map"></div>

CSS

#map {
  height: 400px;
  width: 100%;
}

JavaScript

let data = [];
let heatmap, map;

class Model {

  constructor(location, weather, time, date, tide, number) {
    this.location = {
      lat: location.lat,
      lng: location.lng
    }
    this.weatherType = weather;
    this.timeSpotted = time;
    this.dateSpotted = date;
    this.tide = tide;
    this.number = number;
  }

}

function initMap() {
  var mull = {
    lat: 56.4392,
    lng: -6.0009
  };
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: mull
  });
  var marker = new google.maps.Marker({
    position: mull,
    map: map
  });
  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });
  return map;
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    '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(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

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

function changeOpacity() {
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

function getPoints() {

  return data.map(function(x){
  	return new google.maps.LatLng(x.location.lat, x.location.lng);
  });

}

let gmapData = initMap();

google.maps.event.addListener(gmapData, 'click', function(e) {

  let mod = new Model({
    lat: e.latLng.lat(),
    lng: e.latLng.lng()
  }, 0, 0, 0, 0, 0);

  data.push(mod);

  console.log(data);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });

});