crimeMap_pt2_addRemove.js

var mapComponents = (function(){
    var markers = [];
    var circles = [];
    var crimes = [];

    return {

        markers: markers,
        circles: circles,
        crimes: crimes,
    };
})();

function clearMapComponents(places){
    for (var i = 0, marker; marker = mapComponents.markers[i]; i++) {
      marker.setMap(null);
    }
    for (var i = 0, circle; circle = mapComponents.circles[i]; i++) {
      circle.setMap(null);
    }
}

function setMapBounds(map, place){
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(place.geometry.location);
  map.fitBounds(bounds);
  map.setZoom(14);
}

function drawCrimes(map, data, selectedCrimeTypes, places, picker){

  for (var i = 0, crime; crime = data[i]; i++) {
    mapComponents.crimes.push(crime);
    var crimePosition = new google.maps.LatLng(crime.geolocation.coordinates[1], crime.geolocation.coordinates[0]);

    var marker = new google.maps.Marker({
        map: map,
        icon: {
            path: fontawesome.markers.MAP_MARKER,
            scale: 0.5,
            strokeWeight: 0.2,
            strokeColor: 'black',
            strokeOpacity: 1,
            fillColor: getIconColor(crime.crime),
            fillOpacity: 0.9,
        },
        title: crime.crime,
        position: crimePosition,
        crime:crime
    });
    initializeInfoWindow(crime, marker, map);
    mapComponents.markers.push(marker);

  }
  var displayCrimeFormat = [];

  $.each(selectedCrimeTypes, function(index, value){
    displayCrimeFormat.push('<i style="color:'+getIconColor(value)+'" class="mdi-maps-place"></i> ' + value.toProperCase());
  });

  var displayCrimeFormat = displayCrimeFormat.join(' ');

  var displayDateFormat = 'MMMM D, YYYY';
  $("#reportHeader").html(mapComponents.crimes.length + " crimes occurred near <strong>" + places[0].name + '</strong> between ' + picker.startDate.format(displayDateFormat) + ' and ' + picker.endDate.format(displayDateFormat));
  $('#reportLegend').html(displayCrimeFormat);
}

function getIconColor(crimeType){
  var crimeColors = {
    "ASSAULT": '#536DFE', //
    "BATTERY": '#7B1FA2',
    "BUSINESS ROBBERY" : '#FCC107',
    "CRIMINAL DAMAGE TO PROPERTY": '#CDDC39',
    "FIREARM": '#00BCD4',
    "HOMICIDE": '#D32F2F',
    "INDIVIDUAL ROBBERY": '#8BC34A',
    "NARCOTICS": '#FFEB3B',
    "NON-RESIDENTIAL BURGLARY": '#388E3C',
    "NUISANCE": '#9E9E9E',
    "RESIDENTIAL BURGLARY": '#388E3C',
    "ROBBERY": '#FF5772',
    "THEFT": '#FFCCBC',
    "VEHICLE BURGLARY": '#455A64',
    "VICE": '#512DA8'
  }

  return crimeColors[crimeType];
}

function initializeInfoWindow(crime, marker, map){
  var infoWindow = new google.maps.InfoWindow();
  var crimeDate = moment(crime.offense_date).format('MMMM Do YYYY');
  var content = '<h4>' + crime.crime + '</h4>' +
                '<p><strong>Offense: </strong>' + crime.offense_desc + ' ' + crime.offense + '</p>' +
                '<p><strong>Status: </strong>' + crime.a_c + '</p>' +
                '<p><strong>Date: </strong>' + crimeDate + '</p>' +
                '<p><strong>Address: </strong>' + crime.address +'</p>';
  google.maps.event.addListener(marker, 'click', (function(marker,content,infoWindow){
    return function(){
      infoWindow.setContent(content);
      infoWindow.open(map, marker);
    }
  })(marker,content,infoWindow));
}

function setMapComponents(map, places, crimeRadius){
  for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      var circle = new google.maps.Circle({
        map: map,
        radius: parseInt(crimeRadius),    // 2 miles in metres
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        //fillColor: '#FF0000',
        fillOpacity: 0.01,
        center: place.geometry.location
      });

      mapComponents.circles.push(circle);
      mapComponents.markers.push(marker);

      console.log('Selected place: ' + place.geometry.location);
      console.log('Selected name: ' + place.name);

      setMapBounds(map, place);

    }
}