// REFERENCE: https://blog.vizuri.com/how-to-create-a-choropleth-map-with-geojson-and-google-maps

var app = angular.module('indiamap', []);
var zlevel = 'state';
app.controller('MainCtrl', function($scope, $http) {
  vm = this;
  $scope.stDist = 'STATE / DISTRICT';
  // Set the Map Options to be applied when the map is set.
  var mapOptions = {
    zoom: 4,
    scrollwheel: false,
    center: new google.maps.LatLng(23, 81),
    disableDefaultUI: true,
    gestureHandling: 'cooperative',
    styles: [
        {
          featureType: 'all',
          elementType: 'all',
          stylers: [{visibility: 'off'}]
        }
    ]
  }

    // Set a blank infoWindow to be used for each to state on click
    var infoWindow = new google.maps.InfoWindow({
        content: ""
    });

    // Set the map to the element ID and give it the map options to be applied
    vm.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // Create the state data layer and load the GeoJson Data
    var stateLayer = new google.maps.Data();
    stateLayer.loadGeoJson('https://raw.githubusercontent.com/datameet/maps/master/docs/data/geojson/dists11.geojson', null, hideLoader);

    // Set and apply styling to the stateLayer 
    // NOTE TO CEA - PLEASE APPLY COLORING LOGIC HERE
    stateLayer.setStyle(function(feature) {
    var colors = {'Andhra Pradesh': 'red', 'Arunanchal Pradesh': 'green', 'Assam': 'red', 'Bihar': 'orange', 'Chhattisgarh': 'blue', 'Goa': 'blue', 'Gujarat': 'blue', 'Haryana': 'red', 'Himachal Pradesh': 'green', 'Jammu & Kashmir': 'red', 'Jharkhand': 'red', 'Karnataka': 'orange', 'Kerala': 'green', 'Madhya Pradesh': 'orange', 'Maharashtra': 'red', 'Manipur': 'yellow', 'Meghalaya': 'blue', 'Mizoram': 'orange', 'Nagaland': 'blue', 'NCT of Delhi': 'green', 'Odisha': 'orange', 'Punjab': 'orange', 'Rajasthan': 'green', 'Sikkim': 'red', 'Tamil Nadu': 'blue', 'Telangana': 'green', 'Tripura': 'yellow', 'Uttarakhand': 'orange', 'Uttar Pradesh': 'blue', 'West Bengal': 'yellow'};
    var stName = feature.getProperty('ST_NM');
    if (stName) {
        if (colors[stName]) {
            return {
              fillColor: colors[stName],
              strokeWeight: 0.2, fillOpacity: 0.5
            }
        } else {
            return {
              fillColor: '#EAB18D',
              strokeWeight: 0.2, fillOpacity: 0.5
            }
        }
    }
    else {
        return {
          fillColor: 'navyblue',
          strokeWeight: 0.2, fillOpacity: 0.5
        }
    }
    });

    // Create the DIV to hold the control and call the CenterControl()
    // constructor passing in this DIV.
    var centerControlDiv = document.createElement('div');
    var centerControl = new CenterControl(centerControlDiv, vm.map);
    centerControlDiv.index = 1;
    vm.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
    
  // Add mouseover and mouse out styling for the GeoJSON State data
    stateLayer.addListener('mouseover', function(e) {
        stateLayer.overrideStyle(e.feature, {
          strokeColor: '#2a2a2a',
          strokeWeight: 1,
          zIndex: 2,
          fillOpacity: 1
        });
        $scope.stDist = e.feature.getProperty('ST_NM') + ' / ' + e.feature.getProperty('DISTRICT');
        $scope.$apply();
    });

    stateLayer.addListener('mouseout', function(e) {
        stateLayer.revertStyle();
    });

    stateLayer.addListener('click', function(e) {
        var mylat = e.latLng.lat();
        var mylng = e.latLng.lng();
        vm.map.setCenter({lat: mylat, lng: mylng});
        if (zlevel == 'state') {
            vm.map.setZoom(5);
            zlevel='dist';
        } else {
            vm.map.setZoom(7);
            zlevel='state';
        }
        $scope.stDist = e.feature.getProperty('ST_NM') + ' / ' + e.feature.getProperty('DISTRICT');
        $scope.$apply();
    });   

    /* Adds an info window on click with in a state that includes the state name and COLI
    stateLayer.addListener('click', function(e) {
        console.log(e);
        infoWindow.setContent('<div style="line-height:1.00;overflow:hidden;white-space:nowrap;">' +
          e.feature.getProperty('ST_NM') + '<br>' +
          e.feature.getProperty('DISTRICT') + '</div>');
        var anchor = new google.maps.MVCObject();
        anchor.set("position", e.latLng);
        infoWindow.open(vm.map, anchor);
    }); */


    // Final step here sets the stateLayer GeoJSON data onto the map
    stateLayer.setMap(vm.map);

});

function CenterControl(controlDiv, map) {
    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '10px';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to recenter the map';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '10px';
    controlText.style.lineHeight = '20px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = 'RESET MAP';
    controlUI.appendChild(controlText);

    // Setup the click event listeners: simply set the map to Chicago.
    controlUI.addEventListener('click', function() {
        map.setCenter({lat: 23, lng: 81});
        map.setZoom(4);
        zlevel='state';
     });
}

function hideLoader() {
    // alert('hideLoader');
    document.getElementById('loader').style.display = "none";
}
<!DOCTYPE html>
<html ng-app="indiamap">

<head>
  <meta charset="utf-8" />
  <title>Angular JS / Google Map / India District</title>
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16"></script>
  <!-- NOTE TO CEA - PLEASE GENERATE AND REPLACE API KEY BELOW -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7hhiE-hFUDHvXqfdiTLrXOgj5ES9Czgw"></script>
  <script src="app.js"></script>
  <style>
    /* Put your css in here */
    
    @media only screen and (max-width: 480px) {
      #map-canvas {
        position: absolute;
        top: 0;
        width: 100%;
        height: 80%;
      }
    }
    
    #map-canvas {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }
    
    #loader {
      position: absolute;
      top: 10%;
      left: 20%;
      width: 100%;
      z-index: 20;
    }
  </style>
</head>

<body ng-controller="MainCtrl">
  <div id="map-canvas">
  </div>
  <div id="loader">
    <img src="http://catalysts.org/l4i/map_loading.gif" style="width: 8%;" />
  </div>
  <h3 style="position: absolute; top: 75%; left: 20%; z-index: 99; background-color: white; border-radius: 3px; padding: 3px; font-size: 11px; font-family: Roboto,Arial,sans-serif;">{{stDist}}</h3>
</body>

</html>
/* Put your css in here */