dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #36073
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18470: tracker-capture: capture latitude and longitude from google map - WIP
------------------------------------------------------------
revno: 18470
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2015-03-03 17:55:58 +0100
message:
tracker-capture: capture latitude and longitude from google map - WIP
added:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/custom-overlay.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/map.html
modified:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/tracker-capture.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js 2015-02-26 11:22:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js 2015-03-03 16:55:58 +0000
@@ -6,6 +6,7 @@
$modal,
$timeout,
$filter,
+ TCStorageService,
orderByFilter,
storage,
TEIService,
@@ -23,6 +24,14 @@
$scope.selectedProgram;
$scope.selectedTei;
+ //get ouLevels
+ TCStorageService.currentStore.open().done(function(){
+ TCStorageService.currentStore.getAll('ouLevels').done(function(response){
+ var ouLevels = response;
+ CurrentSelection.setOuLevels(orderByFilter(ouLevels, '-level').reverse());
+ });
+ });
+
//dashboard items
var getDashboardLayout = function(){
$rootScope.dashboardWidgets = [];
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js 2015-02-26 12:06:33 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js 2015-03-03 16:55:58 +0000
@@ -88,7 +88,7 @@
angular.forEach(events, function(dhis2Event){
if(dhis2Event.enrollment === $scope.selectedEnrollment.enrollment && dhis2Event.orgUnit){
if(dhis2Event.notes){
- dhis2Event.notes = orderByFilter(dhis2Event.notes, '-storedDate');
+ dhis2Event.notes = orderByFilter(dhis2Event.notes, '-storedDate');
angular.forEach(dhis2Event.notes, function(note){
note.storedDate = DateUtils.formatToHrsMins(note.storedDate);
});
@@ -442,20 +442,20 @@
$scope.saveCoordinate = function(type){
- if(type === 'LAT'){
+ if(type === 'LAT' || type === 'LATLNG' ){
$scope.latitudeSaved = false;
}
- else{
+ if(type === 'LAT' || type === 'LATLNG'){
$scope.longitudeSaved = false;
}
- if( type === 'LAT' && $scope.outerForm.latitude.$invalid ||
- type === 'LNG' && $scope.outerForm.longitude.$invalid ){//invalid coordinate
+ if( (type === 'LAT' || type === 'LATLNG') && $scope.outerForm.latitude.$invalid ||
+ (type === 'LNG' || type === 'LATLNG') && $scope.outerForm.longitude.$invalid ){//invalid coordinate
return;
}
- if( type === 'LAT' && $scope.currentEvent.coordinate.latitude === $scope.currentEventOriginal.coordinate.latitude ||
- type === 'LNG' && $scope.currentEvent.coordinate.longitude === $scope.currentEventOriginal.coordinate.longitude){//no change
+ if( (type === 'LAT' || type === 'LATLNG') && $scope.currentEvent.coordinate.latitude === $scope.currentEventOriginal.coordinate.latitude ||
+ (type === 'LNG' || type === 'LATLNG') && $scope.currentEvent.coordinate.longitude === $scope.currentEventOriginal.coordinate.longitude){//no change
return;
}
@@ -464,10 +464,10 @@
DHIS2EventFactory.update(dhis2Event).then(function(response){
$scope.currentEventOriginal = angular.copy($scope.currentEvent);
- if(type === 'LAT'){
+ if(type === 'LAT' || type === 'LATLNG' ){
$scope.latitudeSaved = true;
}
- else{
+ if(type === 'LAT' || type === 'LATLNG'){
$scope.longitudeSaved = true;
}
});
@@ -672,6 +672,32 @@
}
}
};
+
+ $scope.showMap = function(event){
+ var modalInstance = $modal.open({
+ templateUrl: 'views/map.html',
+ controller: 'MapController',
+ windowClass: 'modal-full-window',
+ resolve: {
+ location: function () {
+ return {lat: event.coordinate.latitude, lng: event.coordinate.longitude};
+ },
+ geoJsons: function(){
+ return $scope.geoJsons;
+ }
+ }
+ });
+
+ modalInstance.result.then(function (location) {
+ if(angular.isObject(location)){
+ event.coordinate.latitude = location.lat;
+ event.coordinate.longitude = location.lng;
+ $scope.saveCoordinate('LATLNG');
+ }
+ }, function () {
+ });
+ };
+
})
.controller('EventCreationController',
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html 2015-02-20 15:06:35 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html 2015-03-03 16:55:58 +0000
@@ -105,7 +105,7 @@
<!-- coordinates begin -->
<div class="row" ng-if="currentStage.captureCoordinates && currentEvent.eventDate">
<div class="col-md-6">
- {{'latitude'| translate}}
+ {{'latitude'| translate}}<span><a href ng-click="showMap(currentEvent)" title="{{'get_from_map'| translate}}"><i class="fa fa-map-marker fa-2x"></i></a></span>
<input type="number"
ng-model="currentEvent.coordinate.latitude"
class="form-control"
@@ -119,7 +119,7 @@
<span ng-show="outerForm.latitude.$invalid" class="required">{{'value_must_be_between'| translate}} [-90 ... 90]</span>
</div>
<div class="col-md-6">
- {{'longitude'| translate}}
+ {{'longitude'| translate}}<span><a href ng-click="showMap(currentEvent)" title="{{'get_from_map'| translate}}"><i class="fa fa-map-marker fa-2x"></i></a></span>
<input type="number"
ng-model="currentEvent.coordinate.longitude"
class="form-control"
@@ -131,7 +131,7 @@
ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE' || currentEvent.editingNotAllowed"
ng-required="false"/>
<span ng-show="outerForm.longitude.$invalid" class="required">{{'value_must_be_between'| translate}}[-180 ... 180]</span>
- </div>
+ </div>
</div>
<!-- coordinates begin -->
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html 2015-02-06 20:22:45 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html 2015-03-03 16:55:58 +0000
@@ -8,6 +8,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <script type="text/javascript">
+ window.google = null;
+ </script>
+
+ <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false";></script>
+ <script src="scripts/custom-overlay.js"></script>
+
<script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/jquery.plugin.min.js"></script>
=== added file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/custom-overlay.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/custom-overlay.js 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/custom-overlay.js 2015-03-03 16:55:58 +0000
@@ -0,0 +1,101 @@
+//adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
+//text overlays
+function TxtOverlay(pos, txt, cls, map) {
+
+ // Now initialize all properties.
+ this.pos = pos;
+ this.txt_ = txt;
+ this.cls_ = cls;
+ this.map_ = map;
+
+ // We define a property to hold the image's
+ // div. We'll actually create this div
+ // upon receipt of the add() method so we'll
+ // leave it null for now.
+ this.div_ = null;
+
+ // Explicitly call setMap() on this overlay
+ this.setMap(map);
+}
+
+TxtOverlay.prototype = new google.maps.OverlayView();
+
+
+
+TxtOverlay.prototype.onAdd = function () {
+
+ // Note: an overlay's receipt of onAdd() indicates that
+ // the map's panes are now available for attaching
+ // the overlay to the map via the DOM.
+
+ // Create the DIV and set some basic attributes.
+ var div = document.createElement('DIV');
+ div.className = this.cls_;
+
+ div.innerHTML = this.txt_;
+
+ // Set the overlay's div_ property to this DIV
+ this.div_ = div;
+ var overlayProjection = this.getProjection();
+ var position = overlayProjection.fromLatLngToDivPixel(this.pos);
+ div.style.left = position.x + 'px';
+ div.style.top = position.y + 'px';
+ // We add an overlay to a map via one of the map's panes.
+
+ var panes = this.getPanes();
+ panes.floatPane.appendChild(div);
+}
+TxtOverlay.prototype.draw = function () {
+
+
+ var overlayProjection = this.getProjection();
+
+ // Retrieve the southwest and northeast coordinates of this overlay
+ // in latlngs and convert them to pixels coordinates.
+ // We'll use these coordinates to resize the DIV.
+ var position = overlayProjection.fromLatLngToDivPixel(this.pos);
+
+
+ var div = this.div_;
+ div.style.left = position.x + 'px';
+ div.style.top = position.y + 'px';
+
+
+
+}
+//Optional: helper methods for removing and toggling the text overlay.
+TxtOverlay.prototype.onRemove = function () {
+ this.div_.parentNode.removeChild(this.div_);
+ this.div_ = null;
+}
+TxtOverlay.prototype.hide = function () {
+ if (this.div_) {
+ this.div_.style.visibility = "hidden";
+ }
+}
+
+TxtOverlay.prototype.show = function () {
+ if (this.div_) {
+ this.div_.style.visibility = "visible";
+ }
+}
+
+TxtOverlay.prototype.toggle = function () {
+ if (this.div_) {
+ if (this.div_.style.visibility == "hidden") {
+ this.show();
+ }
+ else {
+ this.hide();
+ }
+ }
+}
+
+TxtOverlay.prototype.toggleDOM = function () {
+ if (this.getMap()) {
+ this.setMap(null);
+ }
+ else {
+ this.setMap(this.map_);
+ }
+}
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js 2015-02-27 09:37:56 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js 2015-03-03 16:55:58 +0000
@@ -8,46 +8,13 @@
var store = new dhis2.storage.Store({
name: "dhis2tc",
adapters: [dhis2.storage.IndexedDBAdapter, dhis2.storage.DomSessionStorageAdapter, dhis2.storage.InMemoryAdapter],
- objectStores: ['programs', 'programStages', 'trackedEntities', 'trackedEntityForms', 'attributes', 'relationshipTypes', 'optionSets', 'programValidations']
+ objectStores: ['programs', 'programStages', 'trackedEntities', 'trackedEntityForms', 'attributes', 'relationshipTypes', 'optionSets', 'programValidations', 'ouLevels']
});
return{
currentStore: store
};
})
-/* Factory to fetch geojsons */
-.factory('GeoJsonFactory', function($q, $rootScope, TCStorageService) {
- return {
- getAll: function(){
-
- var def = $q.defer();
-
- TCStorageService.currentStore.open().done(function(){
- TCStorageService.currentStore.getAll('geoJsons').done(function(geoJsons){
- $rootScope.$apply(function(){
- def.resolve(geoJsons);
- });
- });
- });
-
- return def.promise;
- },
- get: function(level){
-
- var def = $q.defer();
-
- TCStorageService.currentStore.open().done(function(){
- TCStorageService.currentStore.get('geoJsons', level).done(function(geoJson){
- $rootScope.$apply(function(){
- def.resolve(geoJson);
- });
- });
- });
- return def.promise;
- }
- };
-})
-
/* Service to fetch/store dasboard widgets */
.service('DashboardLayoutService', function($http) {
@@ -247,15 +214,15 @@
})
/* Factory to fetch programValidations */
-.factory('ProgramValidationFactory', function($q, $rootScope, ECStorageService) {
+.factory('ProgramValidationFactory', function($q, $rootScope, TCStorageService) {
return {
get: function(uid){
var def = $q.defer();
- ECStorageService.currentStore.open().done(function(){
- ECStorageService.currentStore.get('programValidations', uid).done(function(pv){
+ TCStorageService.currentStore.open().done(function(){
+ TCStorageService.currentStore.get('programValidations', uid).done(function(pv){
$rootScope.$apply(function(){
def.resolve(pv);
});
@@ -1122,6 +1089,7 @@
this.relationshipInfo = '';
this.optionSets = null;
this.attributesById = null;
+ this.ouLevels = null;
this.set = function(currentSelection){
this.currentSelection = currentSelection;
@@ -1149,7 +1117,14 @@
};
this.getAttributesById = function(){
return this.attributesById;
- };
+ };
+
+ this.setOuLevels = function(ouLevels){
+ this.ouLevels = ouLevels;
+ };
+ this.getOuLevels = function(){
+ return this.ouLevels;
+ };
})
.service('TEIGridService', function(OrgUnitService, OptionSetService, DateUtils, $translate, AttributesFactory){
@@ -1272,7 +1247,7 @@
};
})
-.service('EventUtils', function(DateUtils, CalendarService, OptionSetService, OrgUnitService, $filter, orderByFilter){
+.service('EventUtils', function(DateUtils, CalendarService, OptionSetService, $filter, orderByFilter){
return {
createDummyEvent: function(eventsPerStage, programStage, orgUnit, enrollment){
var today = DateUtils.getToday();
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/tracker-capture.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/tracker-capture.js 2015-02-27 09:37:56 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/tracker-capture.js 2015-03-03 16:55:58 +0000
@@ -26,7 +26,7 @@
dhis2.tc.store = new dhis2.storage.Store({
name: 'dhis2tc',
adapters: [dhis2.storage.IndexedDBAdapter, dhis2.storage.DomSessionStorageAdapter, dhis2.storage.InMemoryAdapter],
- objectStores: ['programs', 'programStages', 'trackedEntities', 'trackedEntityForms', 'attributes', 'relationshipTypes', 'optionSets', 'programValidations']
+ objectStores: ['programs', 'programStages', 'trackedEntities', 'trackedEntityForms', 'attributes', 'relationshipTypes', 'optionSets', 'programValidations', 'ouLevels']
});
(function($) {
@@ -168,6 +168,7 @@
promise = promise.then( getMetaProgramValidations );
promise = promise.then( getProgramValidations );
promise = promise.then( getTrackedEntityForms );
+ promise = promise.then( getOrgUnitLevels );
promise.done(function() {
//Enable ou selection after meta-data has downloaded
@@ -711,7 +712,8 @@
programValidation.id &&
programValidation.program &&
programValidation.program.id ) {
-
+
+ //
dhis2.tc.store.set( 'programValidations', programValidation );
}
});
@@ -749,4 +751,29 @@
return def.promise();
});
+}
+
+function getOrgUnitLevels()
+{
+ dhis2.tc.store.getKeys( 'ouLevels').done(function(res){
+ if(res.length > 0){
+ return;
+ }
+ var def = $.Deferred();
+
+ $.ajax({
+ url: '../api/organisationUnitLevels.json',
+ type: 'GET',
+ data:'filter=level:gt:1&fields=id,name,level&paging=false'
+ }).done(function(response) {
+ if(response.organisationUnitLevels){
+ dhis2.tc.store.setAll( 'ouLevels', response.organisationUnitLevels );
+ }
+ def.resolve();
+ }).fail(function(){
+ def.resolve();
+ });
+
+ return def.promise();
+ });
}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2015-02-20 12:08:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2015-03-03 16:55:58 +0000
@@ -177,9 +177,9 @@
}
.alert-default {
- color: #55514d;
- background-color: #D5CBC1;
- border-color: #aaa29a;
+ color: #55514d;
+ background-color: #D5CBC1;
+ border-color: #aaa29a;
}
.red {
@@ -817,12 +817,12 @@
}
.ui-datepicker-group .ui-datepicker-header {
- //height: 1.5em;
+ //height: 1.5em;
height: inherit; //this is to make it play nice with bootstrap
}
#ui-datepicker-div, .calendars-popup {
- z-index: 2000; //has to be greater than bootsrap's modal z-index
+ z-index: 2000; //has to be greater than bootsrap's modal z-index
}
//Necessary to override the .panel-group .panel { overflow: hidden; } in bootstrap.
@@ -931,3 +931,20 @@
font-weight: bold;
color: #FF8000;
}
+
+#map-container {
+ height: 800px;
+ width: 100%;
+}
+
+#polygon-label {
+ text-align: center;
+ padding: 5px;
+ font-size: 15px;
+}
+
+.polygon-name {
+ padding: 5px;
+ font-size: 15px;
+ position: absolute;
+}
\ No newline at end of file
=== added file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/map.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/map.html 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/views/map.html 2015-03-03 16:55:58 +0000
@@ -0,0 +1,15 @@
+<div class="modal-header remove-default-padding">
+ <h2>
+ {{'point_and_click_for_coordinate'| translate}}
+ </h2>
+</div>
+<div class="modal-body remove-default-padding">
+ <div class="align-center">
+ <span id='polygon-label'></span>
+ </div>
+ <d2-google-map location="location" id="map-container"></d2-google-map>
+</div>
+<div class="modal-footer remove-default-padding">
+ <button class="btn btn-primary" data-ng-click="captureCoordinate()">{{'capture'| translate}}</button>
+ <button class="btn btn-default" data-ng-click="close()">{{'cancel'| translate}}</button>
+</div>
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js 2015-02-06 20:22:45 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js 2015-03-03 16:55:58 +0000
@@ -340,13 +340,15 @@
};
})
-.directive('d2GoogleMap', function ($parse, $compile, storage) {
+.directive('d2GoogleMap', function ($parse, $http, CurrentSelection) {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function(scope, element, attrs){
+ var ouLevels = CurrentSelection.getOuLevels();
+
//remove angular bootstrap ui modal draggable
$(".modal-content").draggable({ disabled: true });
@@ -366,18 +368,15 @@
zoom: 3,
center: new google.maps.LatLng(latCenter, lngCenter),
mapTypeId: google.maps.MapTypeId.ROADMAP
- },featureStyle = {
+ },
+ featureStyle = {
strokeWeight: 2,
strokeOpacity: 0.4,
fillOpacity: 0.4,
fillColor: 'green'
- };
-
- var geojsons = $parse(attrs.geojsons)(scope);
- var currentLayer = 0, currentGeojson = geojsons[0];
-
- var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
- var currentGeojsonFeatures = map.data.addGeoJson(currentGeojson);
+ };
+
+ var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
var marker = new google.maps.Marker({
map: map
@@ -389,106 +388,134 @@
}
}
+ var currentLayer, currentGeojson, currentGeojsonFeatures;
+
+ function getGeoJsonByOuLevel(initialize, event){
+
+ var url = '';
+ if(currentLayer >= ouLevels.length-1 || initialize){
+ currentLayer = 0;
+ url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level;
+ }
+ else{
+ currentLayer++;
+ url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level + '&parent=' + event.feature.D;
+ }
+
+ $http.get( url ).then(function(response){
+ currentGeojson = response.data;
+ currentGeojsonFeatures = map.data.addGeoJson(currentGeojson);
+
+ if(initialize){
+ google.maps.event.addListenerOnce(map, 'idle', function(){
+ google.maps.event.trigger(map, 'resize');
+ map.data.setStyle(featureStyle);
+ centerMap();
+ });
+ }
+ else{
+ centerMap();
+ }
+ });
+ }
+
function addMarker(loc){
var latLng = new google.maps.LatLng(loc.lat, loc.lng);
marker.setPosition(latLng);
}
+ function applyMarker(event){
+ scope.$apply(function(){
+ addMarker({
+ lat: event.latLng.lat(),
+ lng: event.latLng.lng()
+ });
+ $parse(attrs.location).assign(scope.$parent, {lat: event.latLng.lat(), lng: event.latLng.lng()});
+ });
+ }
+
function centerMap(){
-
if(currentGeojson && currentGeojson.features){
- var latLngBounds = new google.maps.LatLngBounds();
- angular.forEach(currentGeojson.features, function(feature){
- if(feature.geometry.type === 'MultiPolygon'){
- angular.forEach(feature.geometry.coordinates[0][0], function(coordinate){
- latLngBounds.extend(new google.maps.LatLng(coordinate[1],coordinate[0]));
- });
- }
- else if(feature.geometry.type === 'Point'){
- latLngBounds.extend(new google.maps.LatLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]));
- }
- });
-
+ var latLngBounds = getMapCenter(currentGeojson);
map.fitBounds(latLngBounds);
map.panToBounds(latLngBounds);
- }
+ }
}
+
+ var overLays = [];
+ function getMapCenter(geoJson){
+ map.data.setStyle(featureStyle);
+ if(!geoJson || !geoJson.features){
+ return;
+ }
+
+ var latLngBounds = new google.maps.LatLngBounds();
+ overLays = [];
+ angular.forEach(geoJson.features, function(feature){
+ var customTxt = '<div>' + feature.properties.name + '</div>';
+ if(feature.geometry.type === 'MultiPolygon'){
+ var polygonPoints = new google.maps.LatLngBounds();
+ angular.forEach(feature.geometry.coordinates[0][0], function(coordinate){
+ latLngBounds.extend(new google.maps.LatLng(coordinate[1],coordinate[0]));
+ polygonPoints.extend(new google.maps.LatLng(coordinate[1],coordinate[0]));
+ });
+ var txt = new TxtOverlay(polygonPoints.getCenter(), customTxt, "polygon-name", map);
+ overLays.push(txt);
+ }
+ else if(feature.geometry.type === 'Point'){
+ latLngBounds.extend(new google.maps.LatLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]));
+ var txt = new TxtOverlay(new google.maps.LatLng(feature.geometry.coordinates[1],feature.geometry.coordinates[0]),customTxt, "polygon-name",map );
+ overLays.push(txt);
+ }
+ });
+
+ return latLngBounds;
+ }
function initializeMap(){
- google.maps.event.addListenerOnce(map, 'idle', function(){
- google.maps.event.trigger(map, 'resize');
- map.data.setStyle(featureStyle);
- centerMap();
- });
+ getGeoJsonByOuLevel(true, null);
}
- map.data.addListener('mouseover', function(e) {
+ //get lable for current polygon
+ map.data.addListener('mouseover', function(e) {
$("#polygon-label").text( e.feature.k.name );
map.data.revertStyle();
map.data.overrideStyle(e.feature, {fillOpacity: 0.8});
});
- map.data.addListener('mouseout', function() {
+ //remove polygon label
+ map.data.addListener('mouseout', function() {
$("#polygon-label").text( '' );
map.data.revertStyle();
});
//drill-down based on polygons assigned to orgunits
map.data.addListener('rightclick', function(e){
- for (var i = 0; i < currentGeojsonFeatures.length; i++){
+ for(var i = 0; i < currentGeojsonFeatures.length; i++){
map.data.remove(currentGeojsonFeatures[i]);
}
-
- if(currentLayer >= geojsons.length-1){
- currentLayer = 0;
- currentGeojson = angular.copy(geojsons[currentLayer]);
+
+ for(var i=0; i<overLays.length; i++){
+ overLays[i].setMap(null);
}
- else{
- currentLayer++;
- currentGeojson = angular.copy(geojsons[currentLayer]);
- currentGeojson.features = [];
- var selectedFeatures = [];
- angular.forEach(geojsons[currentLayer].features, function(feature){
- if(feature.properties.parent === e.feature.B){
- selectedFeatures.push(feature);
- }
- });
-
- if(selectedFeatures.length){
- currentGeojson.features = selectedFeatures;
- }
- }
- currentGeojsonFeatures = map.data.addGeoJson(currentGeojson);
- centerMap();
+ getGeoJsonByOuLevel(false, e);
+
});
//capturing coordinate from defined polygons
map.data.addListener('click', function(e) {
- scope.$apply(function(){
- addMarker({
- lat: e.latLng.lat(),
- lng: e.latLng.lng()
- });
- $parse(attrs.location).assign(scope.$parent, {lat: e.latLng.lat(), lng: e.latLng.lng()});
- });
+ applyMarker(e);
});
//capturing coordinate from anywhere in the map - incase no polygons are defined
google.maps.event.addListener(map, 'click', function(e){
- scope.$apply(function(){
- addMarker({
- lat: e.latLng.lat(),
- lng: e.latLng.lng()
- });
- $parse(attrs.location).assign(scope.$parent, {lat: e.latLng.lat(), lng: e.latLng.lng()});
- });
+ applyMarker(e);
});
initializeMap();
}
};
})
-
.directive('d2CustomForm', function($compile) {
return{
restrict: 'E',
