Skip to content

Commit 9fcd927

Browse files
allenhwkimallenhwkim
authored
Merge pull request allenhwkim#850 from CyberAP/directions-fix
Fix directions re-render issue
2 parents babf060 + 53f841c commit 9fcd927

File tree

5 files changed

+208
-52
lines changed

5 files changed

+208
-52
lines changed

‎build/scripts/ng-map.debug.js‎

Lines changed: 55 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -722,6 +722,12 @@ angular.module('ngMap', []);
722722
'use strict';
723723
var NgMap, $timeout, NavigatorGeolocation;
724724

725+
var requestTimeout, routeRequest;
726+
// Delay for each route render to accumulate all requests into a single one
727+
// This is required for simultaneous origin\waypoints\destination change
728+
// 20ms should be enough to merge all request data
729+
var routeRenderDelay = 20;
730+
725731
var getDirectionsRenderer = function(options, events) {
726732
if (options.panel) {
727733
options.panel = document.getElementById(options.panel) ||
@@ -745,28 +751,52 @@ angular.module('ngMap', []);
745751
'durationInTraffic', 'waypoints', 'optimizeWaypoints',
746752
'provideRouteAlternatives', 'avoidHighways', 'avoidTolls', 'region'
747753
];
748-
for(var key in request){
749-
(validKeys.indexOf(key) === -1) && (delete request[key]);
754+
if (request) {
755+
for(var key in request) {
756+
if (request.hasOwnProperty(key)) {
757+
(validKeys.indexOf(key) === -1) && (delete request[key]);
758+
}
759+
}
750760
}
751761

752762
if(request.waypoints) {
753-
// Check fo valid values
754-
if(request.waypoints == "[]" || request.waypoints === "") {
763+
// Check for acceptable values
764+
if(!Array.isArray(request.waypoints)) {
755765
delete request.waypoints;
756766
}
757767
}
758768

759769
var showDirections = function(request) {
760-
directionsService.route(request, function(response, status) {
761-
if (status == google.maps.DirectionsStatus.OK) {
762-
$timeout(function() {
763-
renderer.setDirections(response);
764-
});
770+
if (requestTimeout && request) {
771+
if (!routeRequest) {
772+
routeRequest = request;
773+
} else {
774+
for (var attr in request) {
775+
if (request.hasOwnProperty(attr)) {
776+
routeRequest[attr] = request[attr];
777+
}
778+
}
765779
}
766-
});
780+
} else {
781+
requestTimeout = $timeout(function() {
782+
if (!routeRequest) {
783+
routeRequest = request;
784+
}
785+
directionsService.route(routeRequest, function(response, status) {
786+
if (status == google.maps.DirectionsStatus.OK) {
787+
renderer.setDirections(response);
788+
// Unset request for the next call
789+
routeRequest = undefined;
790+
}
791+
});
792+
$timeout.cancel(requestTimeout);
793+
// Unset expired timeout for the next call
794+
requestTimeout = undefined;
795+
}, routeRenderDelay);
796+
}
767797
};
768798

769-
if (request.origin && request.destination) {
799+
if (request && request.origin && request.destination) {
770800
if (request.origin == 'current-location') {
771801
NavigatorGeolocation.getCurrentPosition().then(function(ll) {
772802
request.origin = new google.maps.LatLng(ll.coords.latitude, ll.coords.longitude);
@@ -799,6 +829,11 @@ angular.module('ngMap', []);
799829
var events = parser.getEvents(scope, filtered);
800830
var attrsToObserve = parser.getAttrsToObserve(orgAttrs);
801831

832+
var attrsToObserve = [];
833+
if (!filtered.noWatcher) {
834+
attrsToObserve = parser.getAttrsToObserve(orgAttrs);
835+
}
836+
802837
var renderer = getDirectionsRenderer(options, events);
803838
mapController.addObject('directionsRenderers', renderer);
804839

@@ -1064,7 +1099,7 @@ angular.module('ngMap', []);
10641099
* set options
10651100
*/
10661101
var options = parser.getOptions(filtered, {scope: scope});
1067-
options.data = $window[attrs.data] || scope[attrs.data];
1102+
options.data = $window[attrs.data] || parseScope(attrs.data, scope);
10681103
if (options.data instanceof Array) {
10691104
options.data = new google.maps.MVCArray(options.data);
10701105
} else {
@@ -1079,6 +1114,13 @@ angular.module('ngMap', []);
10791114
console.log('heatmap-layer options', layer, 'events', events);
10801115

10811116
mapController.addObject('heatmapLayers', layer);
1117+
1118+
//helper get nexted path
1119+
function parseScope( path, obj ) {
1120+
return path.split('.').reduce( function( prev, curr ) {
1121+
return prev[curr];
1122+
}, obj || this );
1123+
}
10821124
}
10831125
}; // return
10841126
}]);
@@ -1989,7 +2031,7 @@ angular.module('ngMap', []);
19892031
* @example
19902032
* Usage:
19912033
* <map MAP_ATTRIBUTES>
1992-
* <shape name=SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></MARKER>
2034+
* <shape name="SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></shape>
19932035
* </map>
19942036
*
19952037
* Example:

‎build/scripts/ng-map.js‎

Lines changed: 55 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -731,6 +731,12 @@ angular.module('ngMap', []);
731731
'use strict';
732732
var NgMap, $timeout, NavigatorGeolocation;
733733

734+
var requestTimeout, routeRequest;
735+
// Delay for each route render to accumulate all requests into a single one
736+
// This is required for simultaneous origin\waypoints\destination change
737+
// 20ms should be enough to merge all request data
738+
var routeRenderDelay = 20;
739+
734740
var getDirectionsRenderer = function(options, events) {
735741
if (options.panel) {
736742
options.panel = document.getElementById(options.panel) ||
@@ -754,28 +760,52 @@ angular.module('ngMap', []);
754760
'durationInTraffic', 'waypoints', 'optimizeWaypoints',
755761
'provideRouteAlternatives', 'avoidHighways', 'avoidTolls', 'region'
756762
];
757-
for(var key in request){
758-
(validKeys.indexOf(key) === -1) && (delete request[key]);
763+
if (request) {
764+
for(var key in request) {
765+
if (request.hasOwnProperty(key)) {
766+
(validKeys.indexOf(key) === -1) && (delete request[key]);
767+
}
768+
}
759769
}
760770

761771
if(request.waypoints) {
762-
// Check fo valid values
763-
if(request.waypoints == "[]" || request.waypoints === "") {
772+
// Check for acceptable values
773+
if(!Array.isArray(request.waypoints)) {
764774
delete request.waypoints;
765775
}
766776
}
767777

768778
var showDirections = function(request) {
769-
directionsService.route(request, function(response, status) {
770-
if (status == google.maps.DirectionsStatus.OK) {
771-
$timeout(function() {
772-
renderer.setDirections(response);
773-
});
779+
if (requestTimeout && request) {
780+
if (!routeRequest) {
781+
routeRequest = request;
782+
} else {
783+
for (var attr in request) {
784+
if (request.hasOwnProperty(attr)) {
785+
routeRequest[attr] = request[attr];
786+
}
787+
}
774788
}
775-
});
789+
} else {
790+
requestTimeout = $timeout(function() {
791+
if (!routeRequest) {
792+
routeRequest = request;
793+
}
794+
directionsService.route(routeRequest, function(response, status) {
795+
if (status == google.maps.DirectionsStatus.OK) {
796+
renderer.setDirections(response);
797+
// Unset request for the next call
798+
routeRequest = undefined;
799+
}
800+
});
801+
$timeout.cancel(requestTimeout);
802+
// Unset expired timeout for the next call
803+
requestTimeout = undefined;
804+
}, routeRenderDelay);
805+
}
776806
};
777807

778-
if (request.origin && request.destination) {
808+
if (request && request.origin && request.destination) {
779809
if (request.origin == 'current-location') {
780810
NavigatorGeolocation.getCurrentPosition().then(function(ll) {
781811
request.origin = new google.maps.LatLng(ll.coords.latitude, ll.coords.longitude);
@@ -808,6 +838,11 @@ angular.module('ngMap', []);
808838
var events = parser.getEvents(scope, filtered);
809839
var attrsToObserve = parser.getAttrsToObserve(orgAttrs);
810840

841+
var attrsToObserve = [];
842+
if (!filtered.noWatcher) {
843+
attrsToObserve = parser.getAttrsToObserve(orgAttrs);
844+
}
845+
811846
var renderer = getDirectionsRenderer(options, events);
812847
mapController.addObject('directionsRenderers', renderer);
813848

@@ -1073,7 +1108,7 @@ angular.module('ngMap', []);
10731108
* set options
10741109
*/
10751110
var options = parser.getOptions(filtered, {scope: scope});
1076-
options.data = $window[attrs.data] || scope[attrs.data];
1111+
options.data = $window[attrs.data] || parseScope(attrs.data, scope);
10771112
if (options.data instanceof Array) {
10781113
options.data = new google.maps.MVCArray(options.data);
10791114
} else {
@@ -1088,6 +1123,13 @@ angular.module('ngMap', []);
10881123
void 0;
10891124

10901125
mapController.addObject('heatmapLayers', layer);
1126+
1127+
//helper get nexted path
1128+
function parseScope( path, obj ) {
1129+
return path.split('.').reduce( function( prev, curr ) {
1130+
return prev[curr];
1131+
}, obj || this );
1132+
}
10911133
}
10921134
}; // return
10931135
}]);
@@ -1997,7 +2039,7 @@ angular.module('ngMap', []);
19972039
* @example
19982040
* Usage:
19992041
* <map MAP_ATTRIBUTES>
2000-
* <shape name=SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></MARKER>
2042+
* <shape name="SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></shape>
20012043
* </map>
20022044
*
20032045
* Example:

‎build/scripts/ng-map.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/scripts/ng-map.no-dependency.js‎

Lines changed: 55 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -731,6 +731,12 @@ angular.module('ngMap', []);
731731
'use strict';
732732
var NgMap, $timeout, NavigatorGeolocation;
733733

734+
var requestTimeout, routeRequest;
735+
// Delay for each route render to accumulate all requests into a single one
736+
// This is required for simultaneous origin\waypoints\destination change
737+
// 20ms should be enough to merge all request data
738+
var routeRenderDelay = 20;
739+
734740
var getDirectionsRenderer = function(options, events) {
735741
if (options.panel) {
736742
options.panel = document.getElementById(options.panel) ||
@@ -754,28 +760,52 @@ angular.module('ngMap', []);
754760
'durationInTraffic', 'waypoints', 'optimizeWaypoints',
755761
'provideRouteAlternatives', 'avoidHighways', 'avoidTolls', 'region'
756762
];
757-
for(var key in request){
758-
(validKeys.indexOf(key) === -1) && (delete request[key]);
763+
if (request) {
764+
for(var key in request) {
765+
if (request.hasOwnProperty(key)) {
766+
(validKeys.indexOf(key) === -1) && (delete request[key]);
767+
}
768+
}
759769
}
760770

761771
if(request.waypoints) {
762-
// Check fo valid values
763-
if(request.waypoints == "[]" || request.waypoints === "") {
772+
// Check for acceptable values
773+
if(!Array.isArray(request.waypoints)) {
764774
delete request.waypoints;
765775
}
766776
}
767777

768778
var showDirections = function(request) {
769-
directionsService.route(request, function(response, status) {
770-
if (status == google.maps.DirectionsStatus.OK) {
771-
$timeout(function() {
772-
renderer.setDirections(response);
773-
});
779+
if (requestTimeout && request) {
780+
if (!routeRequest) {
781+
routeRequest = request;
782+
} else {
783+
for (var attr in request) {
784+
if (request.hasOwnProperty(attr)) {
785+
routeRequest[attr] = request[attr];
786+
}
787+
}
774788
}
775-
});
789+
} else {
790+
requestTimeout = $timeout(function() {
791+
if (!routeRequest) {
792+
routeRequest = request;
793+
}
794+
directionsService.route(routeRequest, function(response, status) {
795+
if (status == google.maps.DirectionsStatus.OK) {
796+
renderer.setDirections(response);
797+
// Unset request for the next call
798+
routeRequest = undefined;
799+
}
800+
});
801+
$timeout.cancel(requestTimeout);
802+
// Unset expired timeout for the next call
803+
requestTimeout = undefined;
804+
}, routeRenderDelay);
805+
}
776806
};
777807

778-
if (request.origin && request.destination) {
808+
if (request && request.origin && request.destination) {
779809
if (request.origin == 'current-location') {
780810
NavigatorGeolocation.getCurrentPosition().then(function(ll) {
781811
request.origin = new google.maps.LatLng(ll.coords.latitude, ll.coords.longitude);
@@ -808,6 +838,11 @@ angular.module('ngMap', []);
808838
var events = parser.getEvents(scope, filtered);
809839
var attrsToObserve = parser.getAttrsToObserve(orgAttrs);
810840

841+
var attrsToObserve = [];
842+
if (!filtered.noWatcher) {
843+
attrsToObserve = parser.getAttrsToObserve(orgAttrs);
844+
}
845+
811846
var renderer = getDirectionsRenderer(options, events);
812847
mapController.addObject('directionsRenderers', renderer);
813848

@@ -1073,7 +1108,7 @@ angular.module('ngMap', []);
10731108
* set options
10741109
*/
10751110
var options = parser.getOptions(filtered, {scope: scope});
1076-
options.data = $window[attrs.data] || scope[attrs.data];
1111+
options.data = $window[attrs.data] || parseScope(attrs.data, scope);
10771112
if (options.data instanceof Array) {
10781113
options.data = new google.maps.MVCArray(options.data);
10791114
} else {
@@ -1088,6 +1123,13 @@ angular.module('ngMap', []);
10881123
void 0;
10891124

10901125
mapController.addObject('heatmapLayers', layer);
1126+
1127+
//helper get nexted path
1128+
function parseScope( path, obj ) {
1129+
return path.split('.').reduce( function( prev, curr ) {
1130+
return prev[curr];
1131+
}, obj || this );
1132+
}
10911133
}
10921134
}; // return
10931135
}]);
@@ -1997,7 +2039,7 @@ angular.module('ngMap', []);
19972039
* @example
19982040
* Usage:
19992041
* <map MAP_ATTRIBUTES>
2000-
* <shape name=SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></MARKER>
2042+
* <shape name="SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></shape>
20012043
* </map>
20022044
*
20032045
* Example:

0 commit comments

Comments
 (0)