Skip to content

Commit 9b5fdae

Browse files
eczajk1eczajk1
committed
map-types directive
Added a directive for map-types, which allows control of the order in which multiple map-type layers are drawn.
1 parent 2319369 commit 9b5fdae

File tree

5 files changed

+302
-31
lines changed

5 files changed

+302
-31
lines changed

‎dist/angular-google-maps.js‎

Lines changed: 156 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! angular-google-maps 2.3.3 2016-05-13
1+
/*! angular-google-maps 2.3.3 2016-06-14
22
* AngularJS directives for Google Maps
33
* git: https://github.com/angular-ui/angular-google-maps.git
44
*/
@@ -4809,30 +4809,38 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
48094809
MapTypeParentModel = (function(superClass) {
48104810
extend(MapTypeParentModel, superClass);
48114811

4812-
function MapTypeParentModel(scope, element, attrs, gMap, $log) {
4812+
function MapTypeParentModel(scope, element, attrs, gMap, $log, childModel, propMap) {
4813+
var watchChildModelOptions, watchChildModelShow, watchOptions, watchShow;
48134814
this.scope = scope;
48144815
this.element = element;
48154816
this.attrs = attrs;
48164817
this.gMap = gMap;
48174818
this.$log = $log != null ? $log : Logger;
4819+
this.childModel = childModel;
4820+
this.propMap = propMap;
4821+
this.refreshShown = bind(this.refreshShown, this);
48184822
this.hideOverlay = bind(this.hideOverlay, this);
48194823
this.showOverlay = bind(this.showOverlay, this);
48204824
this.refreshMapType = bind(this.refreshMapType, this);
48214825
this.createMapType = bind(this.createMapType, this);
4822-
if (this.attrs.options == null) {
4826+
if (this.scope.options == null) {
48234827
this.$log.info('options attribute for the map-type directive is mandatory. Map type creation aborted!!');
48244828
return;
48254829
}
48264830
this.id = this.gMap.overlayMapTypesCount = this.gMap.overlayMapTypesCount + 1 || 0;
48274831
this.doShow = true;
48284832
this.createMapType();
4829-
if (angular.isDefined(this.attrs.show)) {
4830-
this.doShow = this.scope.show;
4831-
}
4833+
this.refreshShown();
48324834
if (this.doShow && (this.gMap != null)) {
48334835
this.showOverlay();
48344836
}
4835-
this.scope.$watch('show', (function(_this) {
4837+
watchChildModelShow = (function(_this) {
4838+
return function() {
4839+
return _this.childModel[_this.attrs.show];
4840+
};
4841+
})(this);
4842+
watchShow = this.childModel ? watchChildModelShow : 'show';
4843+
this.scope.$watch(watchShow, (function(_this) {
48364844
return function(newValue, oldValue) {
48374845
if (newValue !== oldValue) {
48384846
_this.doShow = newValue;
@@ -4843,8 +4851,14 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
48434851
}
48444852
}
48454853
};
4846-
})(this), true);
4847-
this.scope.$watchCollection('options', (function(_this) {
4854+
})(this));
4855+
watchChildModelOptions = (function(_this) {
4856+
return function() {
4857+
return _this.childModel[_this.attrs.options];
4858+
};
4859+
})(this);
4860+
watchOptions = this.childModel ? watchChildModelOptions : 'options';
4861+
this.scope.$watchCollection(watchOptions, (function(_this) {
48484862
return function(newValue, oldValue) {
48494863
var different, mapTypeProps;
48504864
if (!_.isEqual(newValue, oldValue)) {
@@ -4876,21 +4890,28 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
48764890
}
48774891

48784892
MapTypeParentModel.prototype.createMapType = function() {
4879-
if (this.scope.options.getTile != null) {
4880-
this.mapType = this.scope.options;
4881-
} else if (this.scope.options.getTileUrl != null) {
4882-
this.mapType = new google.maps.ImageMapType(this.scope.options);
4893+
var id, idAttr, mapType;
4894+
mapType = this.childModel ? (this.attrs.options ? this.childModel[this.attrs.options] : this.childModel) : this.scope.options;
4895+
if (mapType.getTile != null) {
4896+
this.mapType = mapType;
4897+
} else if (mapType.getTileUrl != null) {
4898+
this.mapType = new google.maps.ImageMapType(mapType);
48834899
} else {
48844900
this.$log.info('options should provide either getTile or getTileUrl methods. Map type creation aborted!!');
48854901
return;
48864902
}
4887-
if (this.attrs.id && this.scope.id) {
4888-
this.gMap.mapTypes.set(this.scope.id, this.mapType);
4903+
idAttr = this.attrs.id ? (this.childModel ? this.attrs.id : 'id') : void 0;
4904+
id = idAttr ? (this.childModel ? this.childModel[idAttr] : this.scope[idAttr]) : void 0;
4905+
if (id) {
4906+
this.gMap.mapTypes.set(id, this.mapType);
48894907
if (!angular.isDefined(this.attrs.show)) {
48904908
this.doShow = false;
48914909
}
48924910
}
4893-
return this.mapType.layerId = this.id;
4911+
this.mapType.layerId = this.id;
4912+
if (this.childModel && angular.isDefined(this.scope.index)) {
4913+
return this.propMap.put(this.mapType.layerId, this.scope.index);
4914+
}
48944915
};
48954916

48964917
MapTypeParentModel.prototype.refreshMapType = function() {
@@ -4903,7 +4924,28 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
49034924
};
49044925

49054926
MapTypeParentModel.prototype.showOverlay = function() {
4906-
return this.gMap.overlayMapTypes.push(this.mapType);
4927+
var found;
4928+
if (angular.isDefined(this.scope.index)) {
4929+
found = false;
4930+
if (this.gMap.overlayMapTypes.getLength()) {
4931+
return this.gMap.overlayMapTypes.forEach((function(_this) {
4932+
return function(mapType, index) {
4933+
var layerIndex;
4934+
if (!found) {
4935+
layerIndex = _this.propMap.get(mapType.layerId.toString());
4936+
if (layerIndex > _this.scope.index || !angular.isDefined(layerIndex)) {
4937+
found = true;
4938+
_this.gMap.overlayMapTypes.insertAt(index, _this.mapType);
4939+
}
4940+
}
4941+
};
4942+
})(this));
4943+
} else {
4944+
return this.gMap.overlayMapTypes.push(this.mapType);
4945+
}
4946+
} else {
4947+
return this.gMap.overlayMapTypes.push(this.mapType);
4948+
}
49074949
};
49084950

49094951
MapTypeParentModel.prototype.hideOverlay = function() {
@@ -4919,13 +4961,62 @@ Original idea from: http://stackoverflow.com/questions/22758950/google-map-drawi
49194961
})(this));
49204962
};
49214963

4964+
MapTypeParentModel.prototype.refreshShown = function() {
4965+
return this.doShow = angular.isDefined(this.attrs.show) ? (this.childModel ? this.childModel[this.attrs.show] : this.scope.show) : true;
4966+
};
4967+
49224968
return MapTypeParentModel;
49234969

49244970
})(BaseObject);
49254971
return MapTypeParentModel;
49264972
}
49274973
]);
49284974

4975+
}).call(this);
4976+
;(function() {
4977+
var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
4978+
hasProp = {}.hasOwnProperty;
4979+
4980+
angular.module('uiGmapgoogle-maps.directives.api.models.parent').factory('uiGmapMapTypesParentModel', [
4981+
'uiGmapBaseObject', 'uiGmapLogger', 'uiGmapMapTypeParentModel', 'uiGmapPropMap', function(BaseObject, Logger, MapTypeParentModel, PropMap) {
4982+
var MapTypesParentModel;
4983+
MapTypesParentModel = (function(superClass) {
4984+
extend(MapTypesParentModel, superClass);
4985+
4986+
function MapTypesParentModel(scope, element, attrs, gMap, $log) {
4987+
var pMap;
4988+
this.scope = scope;
4989+
this.element = element;
4990+
this.attrs = attrs;
4991+
this.gMap = gMap;
4992+
this.$log = $log != null ? $log : Logger;
4993+
if (this.attrs.mapTypes == null) {
4994+
this.$log.info('layers attribute for the map-types directive is mandatory. Map types creation aborted!!');
4995+
return;
4996+
}
4997+
pMap = new PropMap;
4998+
this.scope.mapTypes.forEach((function(_this) {
4999+
return function(l, i) {
5000+
var childScope, mockAttr;
5001+
mockAttr = {
5002+
options: _this.scope.options,
5003+
show: _this.scope.show,
5004+
refresh: _this.scope.refresh
5005+
};
5006+
childScope = _this.scope.$new();
5007+
childScope.index = i;
5008+
new MapTypeParentModel(childScope, null, mockAttr, _this.gMap, _this.$log, l, pMap);
5009+
};
5010+
})(this));
5011+
}
5012+
5013+
return MapTypesParentModel;
5014+
5015+
})(BaseObject);
5016+
return MapTypesParentModel;
5017+
}
5018+
]);
5019+
49295020
}).call(this);
49305021
;
49315022
/*global _:true,angular:true, */
@@ -7877,6 +7968,54 @@ This directive creates a new scope.
78777968
}
78787969
]);
78797970

7971+
}).call(this);
7972+
;
7973+
/*
7974+
Map Layers directive
7975+
7976+
This directive is used to create any type of Layer from the google maps sdk.
7977+
This directive creates a new scope.
7978+
*/
7979+
7980+
(function() {
7981+
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
7982+
7983+
angular.module('uiGmapgoogle-maps').directive("uiGmapMapTypes", [
7984+
"$timeout", "uiGmapLogger", "uiGmapMapTypesParentModel", function($timeout, Logger, MapTypesParentModel) {
7985+
var MapTypes;
7986+
MapTypes = (function() {
7987+
function MapTypes() {
7988+
this.link = bind(this.link, this);
7989+
this.$log = Logger;
7990+
this.restrict = "EMA";
7991+
this.require = '^' + 'uiGmapGoogleMap';
7992+
this.priority = -1;
7993+
this.transclude = true;
7994+
this.template = '<span class=\"angular-google-map-layers\" ng-transclude></span>';
7995+
this.scope = {
7996+
mapTypes: "=mapTypes",
7997+
show: "=show",
7998+
options: "=options",
7999+
refresh: "=refresh",
8000+
id: "=idKey"
8001+
};
8002+
}
8003+
8004+
MapTypes.prototype.link = function(scope, element, attrs, mapCtrl) {
8005+
return mapCtrl.getScope().deferred.promise.then((function(_this) {
8006+
return function(map) {
8007+
return new MapTypesParentModel(scope, element, attrs, map);
8008+
};
8009+
})(this));
8010+
};
8011+
8012+
return MapTypes;
8013+
8014+
})();
8015+
return new MapTypes();
8016+
}
8017+
]);
8018+
78808019
}).call(this);
78818020
;
78828021
/*

‎spec/coffee/directives/api/models/parent/map-types-parent-model.spec.coffee‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
describe 'uiGmapMapTypesParentModelSpec', ->
2+
beforeEach ->
3+
4+
window['uiGmapInitiator'].initMock @, (apiMock) =>
5+
apiMock.mockAPI()
6+
apiMock.mockMap()
7+
@tempMaps = google.maps
8+
@mapCtrl = new window.google.maps.Map()
9+
10+
angular.module('mockModule', ['uiGmapgoogle-maps', 'uiGmapgoogle-maps.mocks'])
11+
.value('mapCtrl', {})
12+
.value('element', {})
13+
.value('attrs', {})
14+
.value('model', {})
15+
.value('scope', @scope)
16+
17+
scope = mapTypes: [
18+
{ options:
19+
getTileUrl: ->
20+
visible: true }
21+
{ options:
22+
getTileUrl: ->
23+
visible: false }
24+
]
25+
26+
@attrs =
27+
options: 'options'
28+
show: 'visible'
29+
30+
@timeout = (fnc, time) =>
31+
fnc()
32+
33+
@injects.push (uiGmapMapTypesParentModel) =>
34+
@constructor = uiGmapMapTypesParentModel
35+
_.extend @scope, scope
36+
@subject = new @constructor(@scope, {}, @attrs, @mapCtrl)
37+
38+
@injectAll()
39+
40+
it 'constructor is defined', ->
41+
expect(@constructor).toBeDefined()
42+
it 'subject is defined', ->
43+
expect(@subject).toBeDefined()

0 commit comments

Comments
 (0)