// 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 */