Skip to content

Commit 792043a

Browse files
allenhwkimallenhwkim
authored
Merge pull request allenhwkim#852 from CyberAP/custom-marker-perf
Custom marker performance improvement, z-index 0 issue fix
2 parents 9fcd927 + 5ea9f29 commit 792043a

File tree

5 files changed

+164
-56
lines changed

5 files changed

+164
-56
lines changed

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

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -488,11 +488,22 @@ angular.module('ngMap', []);
488488
'use strict';
489489
var parser, $timeout, $compile, NgMap;
490490

491+
var supportedTransform = (function getSupportedTransform() {
492+
var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
493+
var div = document.createElement('div');
494+
for(var i = 0; i < prefixes.length; i++) {
495+
if(div && div.style[prefixes[i]] !== undefined) {
496+
return prefixes[i];
497+
}
498+
}
499+
return false;
500+
})();
501+
491502
var CustomMarker = function(options) {
492503
options = options || {};
493504

494505
this.el = document.createElement('div');
495-
this.el.style.display = 'inline-block';
506+
this.el.style.display = 'block';
496507
this.el.style.visibility = "hidden";
497508
this.visible = true;
498509
for (var key in options) { /* jshint ignore:line */
@@ -507,6 +518,8 @@ angular.module('ngMap', []);
507518
CustomMarker.prototype.setContent = function(html, scope) {
508519
this.el.innerHTML = html;
509520
this.el.style.position = 'absolute';
521+
this.el.style.top = 0;
522+
this.el.style.left = 0;
510523
if (scope) {
511524
$compile(angular.element(this.el).contents())(scope);
512525
}
@@ -534,8 +547,12 @@ angular.module('ngMap', []);
534547
var posPixel = _this.getProjection().fromLatLngToDivPixel(_this.position);
535548
var x = Math.round(posPixel.x - (_this.el.offsetWidth/2));
536549
var y = Math.round(posPixel.y - _this.el.offsetHeight - 10); // 10px for anchor
537-
_this.el.style.left = x + "px";
538-
_this.el.style.top = y + "px";
550+
if (supportedTransform) {
551+
_this.el.style[supportedTransform] = "translate(" + x + "px, " + y + "px)";
552+
} else {
553+
_this.el.style.left = x + "px";
554+
_this.el.style.top = y + "px";
555+
}
539556
_this.el.style.visibility = "visible";
540557
};
541558
if (_this.el.offsetWidth && _this.el.offsetHeight) {
@@ -548,16 +565,22 @@ angular.module('ngMap', []);
548565
};
549566

550567
CustomMarker.prototype.setZIndex = function(zIndex) {
551-
zIndex && (this.zIndex = zIndex); /* jshint ignore:line */
552-
this.el.style.zIndex = this.zIndex;
568+
if (zIndex === undefined) return;
569+
(this.zIndex !== zIndex) && (this.zIndex = zIndex); /* jshint ignore:line */
570+
(this.el.style.zIndex !== this.zIndex) && (this.el.style.zIndex = this.zIndex);
553571
};
554572

555573
CustomMarker.prototype.getVisible = function() {
556574
return this.visible;
557575
};
558576

559577
CustomMarker.prototype.setVisible = function(visible) {
560-
this.el.style.display = visible ? 'inline-block' : 'none';
578+
if (this.el.style.display === 'none' && visible)
579+
{
580+
this.el.style.display = 'block';
581+
} else if (this.el.style.display !== 'none' && !visible) {
582+
this.el.style.display = 'none';
583+
}
561584
this.visible = visible;
562585
};
563586

@@ -608,29 +631,32 @@ angular.module('ngMap', []);
608631
console.log("custom-marker options", options);
609632
var customMarker = new CustomMarker(options);
610633

611-
$timeout(function() { //apply contents, class, and location after it is compiled
634+
// Do we really need a timeout with $scope.$apply() here?
635+
setTimeout(function() { //apply contents, class, and location after it is compiled
612636

613-
scope.$watch('[' + varsToWatch.join(',') + ']', function() {
637+
scope.$watch('[' + varsToWatch.join(',') + ']', function(newVal, oldVal) {
614638
customMarker.setContent(orgHtml, scope);
615639
}, true);
616640

617641
customMarker.setContent(element[0].innerHTML, scope);
618-
var classNames = element[0].firstElementChild.className;
642+
var classNames =
643+
(element[0].firstElementChild) && (element[0].firstElementChild.className || '');
644+
customMarker.class && (classNames += " " + customMarker.class);
619645
customMarker.addClass('custom-marker');
620-
customMarker.addClass(classNames);
646+
classNames && customMarker.addClass(classNames);
621647
console.log('customMarker', customMarker, 'classNames', classNames);
622648

623649
if (!(options.position instanceof google.maps.LatLng)) {
624650
NgMap.getGeoLocation(options.position).then(
625-
function(latlng) {
626-
customMarker.setPosition(latlng);
627-
}
651+
function(latlng) {
652+
customMarker.setPosition(latlng);
653+
}
628654
);
629655
}
630656

631657
});
632658

633-
console.log("custom-marker events", "events");
659+
console.log("custom-marker events", events);
634660
for (var eventName in events) { /* jshint ignore:line */
635661
google.maps.event.addDomListener(
636662
customMarker.el, eventName, events[eventName]);
@@ -665,6 +691,7 @@ angular.module('ngMap', []);
665691
restrict: 'E',
666692
require: ['?^map','?^ngMap'],
667693
compile: function(element) {
694+
console.log('el', element);
668695
setCustomMarker();
669696
element[0].style.display ='none';
670697
var orgHtml = element.html();

‎build/scripts/ng-map.js‎

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -497,11 +497,22 @@ angular.module('ngMap', []);
497497
'use strict';
498498
var parser, $timeout, $compile, NgMap;
499499

500+
var supportedTransform = (function getSupportedTransform() {
501+
var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
502+
var div = document.createElement('div');
503+
for(var i = 0; i < prefixes.length; i++) {
504+
if(div && div.style[prefixes[i]] !== undefined) {
505+
return prefixes[i];
506+
}
507+
}
508+
return false;
509+
})();
510+
500511
var CustomMarker = function(options) {
501512
options = options || {};
502513

503514
this.el = document.createElement('div');
504-
this.el.style.display = 'inline-block';
515+
this.el.style.display = 'block';
505516
this.el.style.visibility = "hidden";
506517
this.visible = true;
507518
for (var key in options) { /* jshint ignore:line */
@@ -516,6 +527,8 @@ angular.module('ngMap', []);
516527
CustomMarker.prototype.setContent = function(html, scope) {
517528
this.el.innerHTML = html;
518529
this.el.style.position = 'absolute';
530+
this.el.style.top = 0;
531+
this.el.style.left = 0;
519532
if (scope) {
520533
$compile(angular.element(this.el).contents())(scope);
521534
}
@@ -543,8 +556,12 @@ angular.module('ngMap', []);
543556
var posPixel = _this.getProjection().fromLatLngToDivPixel(_this.position);
544557
var x = Math.round(posPixel.x - (_this.el.offsetWidth/2));
545558
var y = Math.round(posPixel.y - _this.el.offsetHeight - 10); // 10px for anchor
546-
_this.el.style.left = x + "px";
547-
_this.el.style.top = y + "px";
559+
if (supportedTransform) {
560+
_this.el.style[supportedTransform] = "translate(" + x + "px, " + y + "px)";
561+
} else {
562+
_this.el.style.left = x + "px";
563+
_this.el.style.top = y + "px";
564+
}
548565
_this.el.style.visibility = "visible";
549566
};
550567
if (_this.el.offsetWidth && _this.el.offsetHeight) {
@@ -557,16 +574,22 @@ angular.module('ngMap', []);
557574
};
558575

559576
CustomMarker.prototype.setZIndex = function(zIndex) {
560-
zIndex && (this.zIndex = zIndex); /* jshint ignore:line */
561-
this.el.style.zIndex = this.zIndex;
577+
if (zIndex === undefined) return;
578+
(this.zIndex !== zIndex) && (this.zIndex = zIndex); /* jshint ignore:line */
579+
(this.el.style.zIndex !== this.zIndex) && (this.el.style.zIndex = this.zIndex);
562580
};
563581

564582
CustomMarker.prototype.getVisible = function() {
565583
return this.visible;
566584
};
567585

568586
CustomMarker.prototype.setVisible = function(visible) {
569-
this.el.style.display = visible ? 'inline-block' : 'none';
587+
if (this.el.style.display === 'none' && visible)
588+
{
589+
this.el.style.display = 'block';
590+
} else if (this.el.style.display !== 'none' && !visible) {
591+
this.el.style.display = 'none';
592+
}
570593
this.visible = visible;
571594
};
572595

@@ -617,23 +640,26 @@ angular.module('ngMap', []);
617640
void 0;
618641
var customMarker = new CustomMarker(options);
619642

620-
$timeout(function() { //apply contents, class, and location after it is compiled
643+
// Do we really need a timeout with $scope.$apply() here?
644+
setTimeout(function() { //apply contents, class, and location after it is compiled
621645

622-
scope.$watch('[' + varsToWatch.join(',') + ']', function() {
646+
scope.$watch('[' + varsToWatch.join(',') + ']', function(newVal, oldVal) {
623647
customMarker.setContent(orgHtml, scope);
624648
}, true);
625649

626650
customMarker.setContent(element[0].innerHTML, scope);
627-
var classNames = element[0].firstElementChild.className;
651+
var classNames =
652+
(element[0].firstElementChild) && (element[0].firstElementChild.className || '');
653+
customMarker.class && (classNames += " " + customMarker.class);
628654
customMarker.addClass('custom-marker');
629-
customMarker.addClass(classNames);
655+
classNames && customMarker.addClass(classNames);
630656
void 0;
631657

632658
if (!(options.position instanceof google.maps.LatLng)) {
633659
NgMap.getGeoLocation(options.position).then(
634-
function(latlng) {
635-
customMarker.setPosition(latlng);
636-
}
660+
function(latlng) {
661+
customMarker.setPosition(latlng);
662+
}
637663
);
638664
}
639665

@@ -674,6 +700,7 @@ angular.module('ngMap', []);
674700
restrict: 'E',
675701
require: ['?^map','?^ngMap'],
676702
compile: function(element) {
703+
void 0;
677704
setCustomMarker();
678705
element[0].style.display ='none';
679706
var orgHtml = element.html();

‎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: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -497,11 +497,22 @@ angular.module('ngMap', []);
497497
'use strict';
498498
var parser, $timeout, $compile, NgMap;
499499

500+
var supportedTransform = (function getSupportedTransform() {
501+
var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
502+
var div = document.createElement('div');
503+
for(var i = 0; i < prefixes.length; i++) {
504+
if(div && div.style[prefixes[i]] !== undefined) {
505+
return prefixes[i];
506+
}
507+
}
508+
return false;
509+
})();
510+
500511
var CustomMarker = function(options) {
501512
options = options || {};
502513

503514
this.el = document.createElement('div');
504-
this.el.style.display = 'inline-block';
515+
this.el.style.display = 'block';
505516
this.el.style.visibility = "hidden";
506517
this.visible = true;
507518
for (var key in options) { /* jshint ignore:line */
@@ -516,6 +527,8 @@ angular.module('ngMap', []);
516527
CustomMarker.prototype.setContent = function(html, scope) {
517528
this.el.innerHTML = html;
518529
this.el.style.position = 'absolute';
530+
this.el.style.top = 0;
531+
this.el.style.left = 0;
519532
if (scope) {
520533
$compile(angular.element(this.el).contents())(scope);
521534
}
@@ -543,8 +556,12 @@ angular.module('ngMap', []);
543556
var posPixel = _this.getProjection().fromLatLngToDivPixel(_this.position);
544557
var x = Math.round(posPixel.x - (_this.el.offsetWidth/2));
545558
var y = Math.round(posPixel.y - _this.el.offsetHeight - 10); // 10px for anchor
546-
_this.el.style.left = x + "px";
547-
_this.el.style.top = y + "px";
559+
if (supportedTransform) {
560+
_this.el.style[supportedTransform] = "translate(" + x + "px, " + y + "px)";
561+
} else {
562+
_this.el.style.left = x + "px";
563+
_this.el.style.top = y + "px";
564+
}
548565
_this.el.style.visibility = "visible";
549566
};
550567
if (_this.el.offsetWidth && _this.el.offsetHeight) {
@@ -557,16 +574,22 @@ angular.module('ngMap', []);
557574
};
558575

559576
CustomMarker.prototype.setZIndex = function(zIndex) {
560-
zIndex && (this.zIndex = zIndex); /* jshint ignore:line */
561-
this.el.style.zIndex = this.zIndex;
577+
if (zIndex === undefined) return;
578+
(this.zIndex !== zIndex) && (this.zIndex = zIndex); /* jshint ignore:line */
579+
(this.el.style.zIndex !== this.zIndex) && (this.el.style.zIndex = this.zIndex);
562580
};
563581

564582
CustomMarker.prototype.getVisible = function() {
565583
return this.visible;
566584
};
567585

568586
CustomMarker.prototype.setVisible = function(visible) {
569-
this.el.style.display = visible ? 'inline-block' : 'none';
587+
if (this.el.style.display === 'none' && visible)
588+
{
589+
this.el.style.display = 'block';
590+
} else if (this.el.style.display !== 'none' && !visible) {
591+
this.el.style.display = 'none';
592+
}
570593
this.visible = visible;
571594
};
572595

@@ -617,23 +640,26 @@ angular.module('ngMap', []);
617640
void 0;
618641
var customMarker = new CustomMarker(options);
619642

620-
$timeout(function() { //apply contents, class, and location after it is compiled
643+
// Do we really need a timeout with $scope.$apply() here?
644+
setTimeout(function() { //apply contents, class, and location after it is compiled
621645

622-
scope.$watch('[' + varsToWatch.join(',') + ']', function() {
646+
scope.$watch('[' + varsToWatch.join(',') + ']', function(newVal, oldVal) {
623647
customMarker.setContent(orgHtml, scope);
624648
}, true);
625649

626650
customMarker.setContent(element[0].innerHTML, scope);
627-
var classNames = element[0].firstElementChild.className;
651+
var classNames =
652+
(element[0].firstElementChild) && (element[0].firstElementChild.className || '');
653+
customMarker.class && (classNames += " " + customMarker.class);
628654
customMarker.addClass('custom-marker');
629-
customMarker.addClass(classNames);
655+
classNames && customMarker.addClass(classNames);
630656
void 0;
631657

632658
if (!(options.position instanceof google.maps.LatLng)) {
633659
NgMap.getGeoLocation(options.position).then(
634-
function(latlng) {
635-
customMarker.setPosition(latlng);
636-
}
660+
function(latlng) {
661+
customMarker.setPosition(latlng);
662+
}
637663
);
638664
}
639665

@@ -674,6 +700,7 @@ angular.module('ngMap', []);
674700
restrict: 'E',
675701
require: ['?^map','?^ngMap'],
676702
compile: function(element) {
703+
void 0;
677704
setCustomMarker();
678705
element[0].style.display ='none';
679706
var orgHtml = element.html();

0 commit comments

Comments
 (0)