dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #36121
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18486: event|tracker-capture: capturing coordinate through google map is now complete
------------------------------------------------------------
revno: 18486
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Thu 2015-03-05 16:48:50 +0100
message:
event|tracker-capture: capturing coordinate through google map is now complete
added:
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js
modified:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties
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/styles/style.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html
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-event-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html 2015-03-04 12:38:52 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html 2015-03-05 15:48:50 +0000
@@ -13,6 +13,7 @@
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false";></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.textoverlay.js"></script>
+ <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.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>
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css 2015-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css 2015-03-05 15:48:50 +0000
@@ -907,6 +907,15 @@
pointer-events: none;
}
+.disabled-context-menu-item {
+ pointer-events: none;
+ color: #dddddd;
+ cursor: none;
+}
+.enable-context-menu-item {
+ cursor:pointer;
+}
+
@media print {
#header, #leftBar, .not-printable {
display: none;
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2015-02-12 10:51:40 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2015-03-05 15:48:50 +0000
@@ -275,4 +275,9 @@
value_must_be_between=Value must be between
locate_organisation_unit_by_name=Locate organisation unit by name
dashboard_layout_not_saved=Dashboard layout not saved
-ou_search_scope=Orgunit scope to use
\ No newline at end of file
+ou_search_scope=Orgunit scope to use
+zoom_map=Zoom map
+zoom_in=Zoom in
+zoom_out=Zoom out
+center_map=Center map
+capture_coordinate=Capture coordinate
\ No newline at end of file
=== 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-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html 2015-03-05 15:48:50 +0000
@@ -14,6 +14,7 @@
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false";></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.textoverlay.js"></script>
+ <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.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>
@@ -94,7 +95,7 @@
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="scripts/services.js"></script>
<script type="text/javascript" src="scripts/filters.js"></script>
- <script type="text/javascript" src="scripts/directives.js"></script>
+ <script type="text/javascript" src="scripts/directives.js"></script>
<script type="text/javascript" src="scripts/controllers.js"></script>
<script type="text/javascript" src="scripts/leftbar-menu-controller.js"></script>
<script type="text/javascript" src="scripts/report-types-controller.js"></script>
=== 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-03-03 16:55:58 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2015-03-05 15:48:50 +0000
@@ -859,7 +859,6 @@
}
}
-
.org-unit-tree {
margin-left: -5px;
color: #000;
@@ -947,4 +946,31 @@
padding: 5px;
font-size: 15px;
position: absolute;
+}
+
+.map_context_menu{
+ background-color:white;
+ border:1px solid gray;
+ z-index: 1000;
+}
+.map_context_menu_item{
+ padding:3px 6px;
+}
+.map_context_menu_item:hover{
+ background-color:#CCCCCC;
+}
+.map_context_menu_separator{
+ background-color:gray;
+ height:1px;
+ margin:0;
+ padding:0;
+}
+
+.disabled-context-menu-item {
+ pointer-events: none;
+ color: #dddddd;
+ cursor: none;
+}
+.enable-context-menu-item {
+ cursor:pointer;
}
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html 2015-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html 2015-03-05 15:48:50 +0000
@@ -11,5 +11,5 @@
</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>
+ <button class="btn btn-default" data-ng-click="close()">{{'close'| 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-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js 2015-03-05 15:48:50 +0000
@@ -253,21 +253,6 @@
};
})
-/*.directive('d2Sortable', function() {
-
- return {
- restrict: 'A',
- link: function(scope, element, attrs){
- element.sortable({
- connectWith: ".connectedSortable",
- placeholder: "ui-state-highlight",
- tolerance: "pointer",
- handle: '.handle'
- });
- }
- };
-})*/
-
.directive('d2Sortable', function($timeout) {
return {
@@ -340,7 +325,7 @@
};
})
-.directive('d2GoogleMap', function ($parse, $http, CurrentSelection) {
+.directive('d2GoogleMap', function ($parse, $http, $translate, CurrentSelection) {
return {
restrict: 'E',
replace: true,
@@ -350,7 +335,7 @@
var ouLevels = CurrentSelection.getOuLevels();
//remove angular bootstrap ui modal draggable
- $(".modal-content").draggable({ disabled: true });
+ $(".modal-content").draggable({ disabled: true });
//get a default center
var latCenter = 12.31, lngCenter = 51.48;
@@ -365,7 +350,7 @@
//default map configurations
var mapOptions = {
- zoom: 3,
+ zoom: 4,
center: new google.maps.LatLng(latCenter, lngCenter),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
@@ -388,20 +373,40 @@
}
}
- var currentLayer, currentGeojson, currentGeojsonFeatures;
-
- function getGeoJsonByOuLevel(initialize, event){
-
+ var currentLayer = 0, currentGeojson, currentGeojsonFeatures;
+
+ var contextMenuOptions={};
+ contextMenuOptions.classNames={menu:'map_context_menu', menuSeparator:'map_context_menu_separator'};
+
+ //create an array of MapContextMenuItem objects
+ var menuItems=[];
+ menuItems.push({className: 'map_context_menu_item', eventName: 'zoom_in', id: 'zoomIn', label: '<i class="fa fa-search-plus"></i> ' + $translate('zoom_in')});
+ menuItems.push({className: 'map_context_menu_item', eventName: 'zoom_out', id: 'zoomOut', label: '<i class="fa fa-search-minus"></i> ' + $translate('zoom_out')});
+ menuItems.push({});
+ menuItems.push({className: 'map_context_menu_item', eventName: 'centerMap', label: '<i class="fa fa-crosshairs"></i> ' + $translate('center_map')});
+ menuItems.push({});
+ menuItems.push({className: 'map_context_menu_item', eventName: 'captureCoordinate', label: '<i class="fa fa-map-marker"></i> ' + $translate('capture_coordinate')});
+ contextMenuOptions.menuItems=menuItems;
+ var mapContextMenu = new MapContextMenu(map, contextMenuOptions);
+
+ function getGeoJsonByOuLevel(initialize, event, mode){
var url = '';
- if(currentLayer >= ouLevels.length-1 || initialize){
+ if(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;
+ if(mode === 'IN'){
+ currentLayer++;
+ url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level + '&parent=' + event.feature.D;
+ }
+ if(mode === 'OUT'){
+ currentLayer--;
+ var parents = event.feature.k.parentGraph.substring(1,event.feature.k.parentGraph.length-1).split('/');
+ url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level + '&parent=' + parents[parents.length-2];
+ }
}
-
+
$http.get( url ).then(function(response){
currentGeojson = response.data;
currentGeojsonFeatures = map.data.addGeoJson(currentGeojson);
@@ -434,11 +439,11 @@
});
}
- function centerMap(){
+ function centerMap(){
if(currentGeojson && currentGeojson.features){
var latLngBounds = getMapCenter(currentGeojson);
map.fitBounds(latLngBounds);
- map.panToBounds(latLngBounds);
+ map.panToBounds(latLngBounds);
}
}
@@ -476,6 +481,41 @@
getGeoJsonByOuLevel(true, null);
}
+ function zoomMap(event, mode){
+
+ for(var i = 0; i < currentGeojsonFeatures.length; i++){
+ map.data.remove(currentGeojsonFeatures[i]);
+ }
+
+ for(var i=0; i<overLays.length; i++){
+ overLays[i].setMap(null);
+ }
+
+ getGeoJsonByOuLevel(false, event, mode);
+ }
+
+ function enableDisableZoom(){
+ if(currentLayer >= ouLevels.length-1){
+ $("#zoomIn").addClass('disabled-context-menu-item');
+ $("#zoomIn").removeClass('enable-context-menu-item');
+ $('#zoomIn').attr('disabled', "disabled");
+ }else{
+ $("#zoomIn").removeClass('disabled-context-menu-item');
+ $("#zoomIn").addClass('enable-context-menu-item');
+ $('#zoomIn').attr('disabled', "");
+ }
+ if(currentLayer === 0){
+ $("#zoomOut").addClass('disabled-context-menu-item');
+ $("#zoomOut").removeClass('enable-context-menu-item');
+ $('#zoomOut').attr('disabled', "disabled");
+ }
+ else{
+ $("#zoomOut").removeClass('disabled-context-menu-item');
+ $("#zoomOut").addClass('enable-context-menu-item');
+ $('#zoomIn').attr('disabled', "");
+ }
+ }
+
//get lable for current polygon
map.data.addListener('mouseover', function(e) {
$("#polygon-label").text( e.feature.k.name );
@@ -490,28 +530,61 @@
});
//drill-down based on polygons assigned to orgunits
- map.data.addListener('rightclick', function(e){
- for(var i = 0; i < currentGeojsonFeatures.length; i++){
- map.data.remove(currentGeojsonFeatures[i]);
- }
-
- for(var i=0; i<overLays.length; i++){
- overLays[i].setMap(null);
- }
- getGeoJsonByOuLevel(false, e);
-
+ map.data.addListener('rightclick', function(e){
+ mapContextMenu.show(e);
+ enableDisableZoom();
+ });
+
+ //drill-down based on points assigned to orgunits
+ google.maps.event.addListener(marker, 'rightclick', function(e){
+ mapContextMenu.show(e);
+ enableDisableZoom();
+ });
+
+ //capturing coordinate from anywhere in the map - incase no polygons are defined
+ google.maps.event.addListener(map, 'rightclick', function(e){
+ mapContextMenu.show(e);
});
- //capturing coordinate from defined polygons
+ //remove context menu onclick
map.data.addListener('click', function(e) {
- applyMarker(e);
+ mapContextMenu.hide();
});
- //capturing coordinate from anywhere in the map - incase no polygons are defined
google.maps.event.addListener(map, 'click', function(e){
- applyMarker(e);
+ mapContextMenu.hide();
+ });
+
+ //listen for the clicks on mapContextMenu
+ google.maps.event.addListener(mapContextMenu, 'menu_item_selected', function(e, latLng, eventName){
+ switch(eventName){
+ case 'zoom_in':
+ if(e.feature){
+ zoomMap(e, 'IN');
+ }
+ else{
+ map.setZoom(map.getZoom()+1);
+ }
+
+ break;
+ case 'zoom_out':
+ if(e.feature){
+ zoomMap(e, 'OUT');
+ }
+ else{
+ map.setZoom(map.getZoom()-1);
+ }
+
+ break;
+ case 'centerMap':
+ map.panTo(latLng);
+ break;
+ case 'captureCoordinate':
+ applyMarker(e);
+ break;
+ }
});
-
+
initializeMap();
}
};
=== added file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js 2015-03-05 15:48:50 +0000
@@ -0,0 +1,138 @@
+/*
+ MapContextMenu v1.0
+
+ A context menu for Google Maps API v3
+ http://code.martinpearman.co.uk/googlemapsapi/contextmenu/
+
+ Copyright Martin Pearman
+ Last updated 21st November 2011
+
+ developer@xxxxxxxxxxxxxxxxxxx
+
+ This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+function MapContextMenu(map, options){
+ options=options || {};
+
+ this.setMap(map);
+
+ this.classNames_=options.classNames || {};
+ this.map_=map;
+ this.mapDiv_=map.getDiv();
+ this.menuItems_=options.menuItems || [];
+ this.pixelOffset=options.pixelOffset || new google.maps.Point(10, -5);
+}
+
+MapContextMenu.prototype=new google.maps.OverlayView();
+
+MapContextMenu.prototype.draw=function(){
+ if(this.isVisible_){
+ var mapSize=new google.maps.Size(this.mapDiv_.offsetWidth, this.mapDiv_.offsetHeight);
+ var menuSize=new google.maps.Size(this.menu_.offsetWidth, this.menu_.offsetHeight);
+ var mousePosition=this.getProjection().fromLatLngToDivPixel(this.position_);
+
+ var left=mousePosition.x;
+ var top=mousePosition.y;
+
+ if(mousePosition.x>mapSize.width-menuSize.width-this.pixelOffset.x){
+ left=left-menuSize.width-this.pixelOffset.x;
+ } else {
+ left+=this.pixelOffset.x;
+ }
+
+ if(mousePosition.y>mapSize.height-menuSize.height-this.pixelOffset.y){
+ top=top-menuSize.height-this.pixelOffset.y;
+ } else {
+ top+=this.pixelOffset.y;
+ }
+
+ this.menu_.style.left=left+'px';
+ this.menu_.style.top=top+'px';
+ }
+};
+
+MapContextMenu.prototype.getVisible=function(){
+ return this.isVisible_;
+};
+
+MapContextMenu.prototype.hide=function(){
+ if(this.isVisible_){
+ this.menu_.style.display='none';
+ this.isVisible_=false;
+ }
+};
+
+MapContextMenu.prototype.onAdd=function(){
+ function createMenuItem(values){
+ var menuItem=document.createElement('div');
+ menuItem.innerHTML=values.label;
+ if(values.className){
+ menuItem.className=values.className;
+ }
+ if(values.id){
+ menuItem.id=values.id;
+ }
+ menuItem.style.cssText='white-space:nowrap; font-size: 12pt;';
+ menuItem.onclick=function(){
+ google.maps.event.trigger($this, 'menu_item_selected', $this.event_, $this.position_, values.eventName);
+ };
+ return menuItem;
+ }
+ function createMenuSeparator(){
+ var menuSeparator=document.createElement('div');
+ if($this.classNames_.menuSeparator){
+ menuSeparator.className=$this.classNames_.menuSeparator;
+ }
+ return menuSeparator;
+ }
+ var $this=this; // used for closures
+
+ var menu=document.createElement('div');
+ if(this.classNames_.menu){
+ menu.className=this.classNames_.menu;
+ }
+ menu.style.cssText='display:none; position:absolute';
+
+ for(var i=0, j=this.menuItems_.length; i<j; i++){
+ if(this.menuItems_[i].label && this.menuItems_[i].eventName){
+ menu.appendChild(createMenuItem(this.menuItems_[i]));
+ } else {
+ menu.appendChild(createMenuSeparator());
+ }
+ }
+
+ delete this.classNames_;
+ delete this.menuItems_;
+
+ this.isVisible_=false;
+ this.menu_=menu;
+ this.position_=new google.maps.LatLng(0, 0);
+
+ google.maps.event.addListener(this.map_, 'click', function(mouseEvent){
+ $this.hide();
+ });
+
+ this.getPanes().floatPane.appendChild(menu);
+};
+
+MapContextMenu.prototype.onRemove=function(){
+ this.menu_.parentNode.removeChild(this.menu_);
+ delete this.mapDiv_;
+ delete this.menu_;
+ delete this.position_;
+};
+
+MapContextMenu.prototype.show=function(e){
+ if(!this.isVisible_){
+ this.menu_.style.display='block';
+ this.isVisible_=true;
+ }
+ this.position_=e.latLng;
+ this.event_=e;
+ this.draw();
+};
\ No newline at end of file
