<script language="javaScript">
ss_developer_key = "481408-W6ojv/Rz76BB6NJd/tQ3lwtW9MXa5yk07x/Ovs7i4J8=";
(function (){
var myApp = angular.module("myApp", ["ui.bootstrap", "ngMap", "ngTable"]);
myApp.factory("dataService", function ($rootScope, $q){
var data = {
referralID: "10408",
participant: "Lisa Simpson",
participantFullAddress: "251 Callingwood Two NW, Edmonton, T3C 2Z2, Alberta",
participantAddress: "251 Callingwood Two NW",
participantCity: "Edmonton",
participantProvince: "Alberta",
participantPostalCode: "T3C 2Z2",
participantCoords: {},
maps: [],
markers: [],
participantMap: {
"object": {},
"center": []
},
clinicArray: [
{
"id": "482760",
"name": "LM - ON - Brampton",
"address": "2 Fisherman Drive",
"city": "Brampton",
"state": "Ontario",
"postalCode": "L7A 1B5",
"phone": "(905) 455-5870",
"fax": "",
"latlng": {
"lat": "43.7149641",
"lng": "-79.80043089999998"
}
},
{
"id": "482410",
"name": "LM - ON - Cambridge",
"address": "900 Jamieson Pkwy",
"city": "Cambridge",
"state": "Ontario",
"postalCode": "N3C 4N6",
"phone": "(519) 740-0031",
"fax": "(519) 740-0527",
"latlng": {
"lat": "43.4236881",
"lng": "-80.2854532"
}
},
{
"id": "482614",
"name": "LM - ON - Hamilton - Mohawk",
"address": "210 Mohawk Road East Unit 3",
"city": "Hamilton",
"state": "Ontario",
"postalCode": "L9A 2H6",
"phone": "(905) 388-3902",
"fax": "(905) 388-3680",
"latlng": {
"lat": "43.2255507",
"lng": "-79.87150869999999"
}
}
],
"ClinicDistanceArray": [],
Client: "Taro Pharmaceuticals Inc."
};
var rad = function (x){
return x * Math.PI / 180;
};
var calcDistance = function (p1, p2){
if (p1 === undefined || p2 === undefined)
return;
var p3 = new google.maps.LatLng(parseFloat(p2.lat), parseFloat(p2.lng));
var R = 6371; // Earth s mean radius in meter
var dLat = rad(p3.lat() - p1.lat());
var dLong = rad(p3.lng() - p1.lng());
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(p1.lat())) * Math.cos(rad(p3.lat())) *
Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d.toFixed(2); // returns the distance in kilometers
};
var addParticipantMarker = function (item){
data.markers = [];
var contentString = '<div ng-non-bindable="" style="width:400px;overflow:hidden">';
contentString += '<div class="row" style="border-bottom:solid 1px #eee;padding-left:15px;color:#337ab7">';
contentString += '<label>PARTICIPANT</label>';
contentString += '</div>';
contentString += '<div class="row" style="border-bottom:solid 1px #eee;">';
contentString += '<div class="col-xs-2 mapInfoLabel">';
contentString += '<label>Address:</label>';
contentString += '</div>';
contentString += '<div class="col-xs-10">';
contentString += data.participantFullAddress;
contentString += '</div>';
contentString += '</div>';
contentString += '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: item,
map: data.participantMap.object,
title: 'Participant',
icon: 'https://s3.amazonaws.com/code.centrichealth.ca/images/Map-Marker-Ball-Chartreuse-48.png'
});
marker.addListener('click', function (){
infowindow.open(map, marker);
});
data.markers.push(marker);
};
var showRadius = function (){
for(i in data.markers){
if (data.markers[i].title === "Participant"){
data.markers[i].setMap(data.participantMap.object);
break;
}
}
angular.forEach(data.maps, function (index){
index.setCenter(dataService.data.participantCoords);
google.maps.event.trigger(index, 'center');
google.maps.event.trigger(index, 'resize');
});
};
var getLatLong = function(){
var deferred = $q.defer();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': data.participantFullAddress}, function (results, status){
if(status == google.maps.GeocoderStatus.OK){
data.participantCoords = results[0].geometry.location;
data.participantMap.center = results[0].geometry.location;
deferred.resolve();
}
else{
deferred.reject(status);
}
}
);
return deferred.promise;
};
return {
data: data,
calcDistance: function (p1, p2){
return calcDistance(p1, p2);
},
addParticipantMarker: addParticipantMarker,
showRadius: showRadius,
getLatLong: getLatLong
};
});
myApp.controller("myCtrl", function($scope, dataService, NgMap, $rootScope, NgTableParams, $filter, $q){
$scope.dataService = dataService;
$scope.data = dataService.data;
$scope.buildClinicDistanceArray = function (){
for(var i = 0; i < $scope.data.clinicArray.length; i++){
$scope.data.ClinicDistanceArray.push(
{
"id": i,
"name": $scope.data.clinicArray[i].name,
"address": $scope.data.clinicArray[i].address + ", " + $scope.data.clinicArray[i].city + ", " + $scope.data.clinicArray[i].postalCode + ", " + $scope.data.clinicArray[i].state,
"pos": [parseFloat($scope.data.clinicArray[i].latlng.lat), parseFloat($scope.data.clinicArray[i].latlng.lng)],
"distance": dataService.calcDistance($scope.data.participantCoords, $scope.data.clinicArray[i].latlng)
}
);
}
};
$scope.dataService.getLatLong()
.then(function(){
$scope.buildClinicDistanceArray();
$scope.tableParams = new NgTableParams({
page: 1,
count: 10
}, {
getData: function($defer, params){
var results = params.filter() ? $filter("filter")($scope.data.ClinicDistanceArray, params.filter()) : $scope.data.ClinicDistanceArray;
params.total(results.length);
$defer.resolve(results.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}, function(response){
alert('Plese fix Participant Address.');
});
$scope.$on('mapInitialized', function (evt, evtMap) { console.log('mapInitialized');
$scope.data.maps.push(evtMap);
$scope.data.participantMap.object = evtMap;
dataService.addParticipantMarker($scope.data.participantCoords);
dataService.showRadius();
});
});
})();
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="//s3.amazonaws.com/code.centrichealth.ca/scripts/ng-map.min.js"></script>
<body>
<div class="container-fluid" ng-controller="myCtrl" style="margin-top:5px;">
<ng-map default-style="true" zoom="5" center="{{data.participantMap.center}}" refresh="true">
<marker ng-repeat="m in data.ClinicDistanceArray" position="{{m.pos}}" title="{{m.address}} [ {{m.distance}}km ]" icon="https://s3.amazonaws.com/code.centrichealth.ca/images/Map-Marker-Marker-Outside-Azure-32.png" on-click="showPrimaryInfo(event, m.id)"></marker>
</ng-map>
</div>
</body>