I am trying to add a "display by crime type" functionality to my crime map. I have 7 different crime types and am using the Google Maps JavaScript API to display them on the map.
I have set up the icons and dropdown choices for crime types on the frontend. My next step is to use Angular.js to display only the chosen type of crime.
How could one go about doing that? Here are my main.html and main.js (controller) files:
main.html
<div class="row height100">
<div id="main-sidebar" class="col-md-2">
<div id="main-container">
<span id="main-header">Title</span>
<br>
<span id="main-subHeader">
Subtitle
</span>
<br><br>
<span id="main-addInput" class="height100">
<!-- The 'options' & 'details' are ngAutoComplete attributes -->
<!-- 'details="details"' is where the lat/long information comes from -->
<input type="text" value="Enter Address" ng-autocomplete ng-model="autocomplete" options="options" details="details"/>
</span>
<br><br>
</div>
<div class="navigation" id="main-navList">
<div class="dropdown">
<a href="#" class="fa fa-tasks crime-type" id="dropdownMenu1" data-toggle="dropdown"></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">All</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Rape</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Murder</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Felony Assault</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Grand Larceny</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Robbery</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Burglary</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Grand Larceny of Motor Vehicle</a></li>
</ul>
</div>
<br>
<a href="/about">ABOUT</a>
<br>
<a href="/crime">CRIME STATISTICS</a>
</div>
<br>
<br>
<br>
<ul class="about-icons">
<li class="twitter">
<a href="https://twitter.com/hacker_adi">
<span class="fa fa-twitter fa-2x" style="color: #CCC"></span>
</a>
</li>
<li class="github">
<a href="https://github.com/AdiedX">
<span class="fa fa-github fa-2x" style="color: #CCC"></span>
</a>
</li>
</ul>
</div>
<div class="col-md-10 height100 no-padding">
<google-map class="height100" center="map.center" zoom="map.zoom" draggable="true" options="map.options" control="mapControl">
</google-map>
</div>
</div>
And here is main.js (the controller):
'use strict';
var app = angular.module('crimespaceAngularApp');
app.controller('MainCtrl', function ($scope, $http){
$http.get('/api/getCrimeData').success(function(crimeData){
console.log(crimeData.length);
$scope.crimeMarkers = crimeData;
// $scope.$apply();
});
// Add map object to the $scope:
$scope.map = {
center: {
latitude: 40.7127,
longitude: -74.0059
},
zoom: 10,
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}]
}
};
// SETTING UP MARKERS THE OLD SCHOOL WAY:
// This empty object is for the "control" attribute of the google-maps angular directive which will allow us to obtain the direct reference to the google map instance being used by the directive:
$scope.mapControl = {};
// var str_title = element.type + ' ' + element.month + ', ' + element.year;
//--------------------------------------------------
// Connect ng-autoComplete output to viewable map area:
$scope.$watch('details', function(details) {
// console.log(details);
// debugger;
$scope.map.center = {
latitude: details.geometry.location.lat(),
longitude: details.geometry.location.lng()
};
$scope.map.zoom = 16;
});
//--------------------------------------------------
// '$watch' registers a listener callback to be called whenever the watchExpression changes:
$scope.$watch('mapControl', function(mapControl){
var map = $scope.mapControl.getGMap();
$http.get('/api/getCrimeData').success(function(crimeData){
var markers = _.map(crimeData, function(element){
var myLatlng = new google.maps.LatLng(element.latitude, element.longitude);
var marker = new google.maps.Marker({
position: myLatlng,
title: element.type
});
//---------------------------------------------
// INFO WINDOWS:
var infowindow = new google.maps.InfoWindow({
content: '<div style="width: 135px; height: 50px; font-size: 12px; font-family: Courier; color: black"><b>' + element.type + '<br>' + 'MONTH: ' + element.month + '<br>' + 'YEAR: ' + element.year +'<b></div>'
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
//---------------------------------------------
return marker;
});
// Need to add options to the following cluster constructor:
var mc = new MarkerClusterer(map, markers, {
maxZoom: 16
});
});
});
});
Should I use a directive? How can I get access to the crimeData array of all crime data inside a directive?