Skip to content

Commit 47e4b9c

Browse files
objectivehtmlobjectivehtml
committed
- (Feature) Added ability to change the map type within the fieldtype
1 parent d18edc6 commit 47e4b9c

File tree

9 files changed

+425
-67
lines changed

9 files changed

+425
-67
lines changed

‎resources/css/app.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@
2121
.oh-google-map-controls { position: absolute; top: 15px; left: 15px; z-index: 100; transition: left .25s; -webkit-transition: left .25s; -moz-transition: left .25s; -o-transition: left .25s; -ms-transition: left .25s; z-index: 99; }
2222
.oh-google-map-controls.hide { left: -100%; }
2323

24-
.oh-google-map-zoom-control { position: absolute; top: 10px; right: 10px; z-index: 100; }
25-
.oh-google-map-zoom-control .oh-google-map-control-button { font-weight: 100; font-size: 18px; display: block; margin: 0 0 5px 0; }
24+
.oh-google-map-side-controls { position: absolute; top: 10px; right: 10px; z-index: 100; }
25+
.oh-google-map-side-controls .oh-google-map-control-button { font-weight: 100; font-size: 18px; display: block; margin: 0 0 5px 0; }
26+
.oh-google-map-side-controls i { font-size: 14px; }
2627

2728
.oh-google-map-control-button { text-align: center; font-size: 16px; background: white; background: rga(255, 255, 255, .6); display: inline-block; padding: 10px 12px; color: rgb(20, 20, 20); text-shadow: 0 1px 0 white; border-radius: 3px; border-top: 1px solid rgb(240, 240, 240); border-left: 1px solid rgb(240, 240, 240); border-right: 1px solid rgb(230, 230, 230); border-bottom: 1px solid rgb(200, 200, 200); box-shadow: 0 0 5px rgba(0, 0, 0, .1); }
2829
.oh-google-map-control-button:hover { text-decoration: none; }
30+
.oh-google-map-control-button.active,
2931
.oh-google-map-control-button:active { background: rgb(250, 250, 250); border-top-color: rgb(180, 180, 0); border-left-color: rgb(180, 180, 180); border-right-color: rgb(180, 180, 180); border-bottom-color: rgb(150, 150, 150); box-shadow: 0 0 5px rgba(0, 0, 0, .3) inset; }
3032
.oh-google-map-control-button.small { font-size: 13px; padding: 6px 8px; }
3133

‎resources/css/app.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/fieldtype.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,13 @@
2121
.oh-google-map-controls { position: absolute; top: 15px; left: 15px; z-index: 100; transition: left .25s; -webkit-transition: left .25s; -moz-transition: left .25s; -o-transition: left .25s; -ms-transition: left .25s; z-index: 99; }
2222
.oh-google-map-controls.hide { left: -100%; }
2323

24-
.oh-google-map-zoom-control { position: absolute; top: 10px; right: 10px; z-index: 100; }
25-
.oh-google-map-zoom-control .oh-google-map-control-button { font-weight: 100; font-size: 18px; display: block; margin: 0 0 5px 0; }
24+
.oh-google-map-side-controls { position: absolute; top: 10px; right: 10px; z-index: 100; }
25+
.oh-google-map-side-controls .oh-google-map-control-button { font-weight: 100; font-size: 18px; display: block; margin: 0 0 5px 0; }
26+
.oh-google-map-side-controls i { font-size: 14px; }
2627

2728
.oh-google-map-control-button { text-align: center; font-size: 16px; background: white; background: rga(255, 255, 255, .6); display: inline-block; padding: 10px 12px; color: rgb(20, 20, 20); text-shadow: 0 1px 0 white; border-radius: 3px; border-top: 1px solid rgb(240, 240, 240); border-left: 1px solid rgb(240, 240, 240); border-right: 1px solid rgb(230, 230, 230); border-bottom: 1px solid rgb(200, 200, 200); box-shadow: 0 0 5px rgba(0, 0, 0, .1); }
2829
.oh-google-map-control-button:hover { text-decoration: none; }
30+
.oh-google-map-control-button.active,
2931
.oh-google-map-control-button:active { background: rgb(250, 250, 250); border-top-color: rgb(180, 180, 0); border-left-color: rgb(180, 180, 180); border-right-color: rgb(180, 180, 180); border-bottom-color: rgb(150, 150, 150); box-shadow: 0 0 5px rgba(0, 0, 0, .3) inset; }
3032
.oh-google-map-control-button.small { font-size: 13px; padding: 6px 8px; }
3133

‎resources/js/app.compiled.js‎

Lines changed: 133 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10117,15 +10117,15 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
1011710117
var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;
1011810118

1011910119

10120-
buffer += "<div class=\"oh-google-map-window\"></div>\n\n<div class=\"oh-google-map-controls\"></div>\n\n<div class=\"oh-google-map-zoom-control\">\n <a href=\"#\" class=\"oh-google-map-control-button oh-google-map-zoom-in\">&plus;</a>\n <a href=\"#\" class=\"oh-google-map-control-button oh-google-map-zoom-out\">&minus;</a>\n</div>\n\n<div class=\"oh-google-map\" style=\"width:";
10120+
buffer += "<div class=\"oh-google-map-window\"></div>\n\n<div class=\"oh-google-map-controls\"></div>\n\n<div class=\"oh-google-map-side-controls\">\n <a href=\"#\" class=\"oh-google-map-control-button oh-google-map-zoom-in\">&plus;</a>\n <a href=\"#\" class=\"oh-google-map-control-button oh-google-map-zoom-out\">&minus;</a>\n <a href=\"#\" class=\"oh-google-map-control-button oh-google-map-map-type\"><i data-icon=\"settings\"></i></a>\n</div>\n\n<div class=\"oh-google-map\" style=\"width:";
1012110121
if (helper = helpers.width) { stack1 = helper.call(depth0, {hash:{},data:data}); }
1012210122
else { helper = (depth0 && depth0.width); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
1012310123
buffer += escapeExpression(stack1)
1012410124
+ "; height:";
1012510125
if (helper = helpers.height) { stack1 = helper.call(depth0, {hash:{},data:data}); }
1012610126
else { helper = (depth0 && depth0.height); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
1012710127
buffer += escapeExpression(stack1)
10128-
+ "\"></div>";
10128+
+ "\"></div>\n\n<div id=\"oh-google-map-map-type-menu\" class=\"menu\" data-align=\"right\">\n <h6>Map Type</h6>\n\n <ul class=\"padded\">\n <li><a href=\"#\" data-type=\"roadmap\">Roadmap</a></li>\n <li><a href=\"#\" data-type=\"satellite\">Satellite</a></li>\n <li><a href=\"#\" data-type=\"terrain\">Terrain</a></li>\n <li><a href=\"#\" data-type=\"hybrid\">Hybrid</a></li>\n </ul>\n</div>";
1012910129
return buffer;
1013010130
});
1013110131

@@ -12609,7 +12609,8 @@ var GoogleMaps = {
1260912609

1261012610
this.mapOptions = _.extend({}, {
1261112611
zoom: 8,
12612-
disableDefaultUI: true
12612+
disableDefaultUI: true,
12613+
mapType: google.maps.MapTypeId.ROADMAP
1261312614
});
1261412615

1261512616
GoogleMaps.Views.LayoutView.prototype.initialize.call(this, options);
@@ -12618,13 +12619,15 @@ var GoogleMaps = {
1261812619
this.model = new Backbone.Model();
1261912620
}
1262012621

12622+
/*
1262112623
if(this.position) {
1262212624
this.mapOptions.center = this.position;
1262312625
}
1262412626
1262512627
if(this.zoom) {
1262612628
this.mapOptions.zoom = this.zoom;
1262712629
}
12630+
*/
1262812631

1262912632
this.model.set({
1263012633
fieldname: this.fieldname,
@@ -12693,6 +12696,49 @@ var GoogleMaps = {
1269312696
e.preventDefault();
1269412697
});
1269512698

12699+
this.mapTypeMenu = new Garnish.Menu(this.$el.find('#oh-google-map-map-type-menu'), {
12700+
attachToElement: this.$el.find('.oh-google-map-map-type')
12701+
});
12702+
12703+
this.$el.find('.oh-google-map-map-type').click(function(e) {
12704+
var $t = $(this);
12705+
12706+
if($t.hasClass('active')) {
12707+
$t.removeClass('active');
12708+
t.mapTypeMenu.hide();
12709+
}
12710+
else {
12711+
$t.addClass('active');
12712+
t.mapTypeMenu.show();
12713+
}
12714+
12715+
e.preventDefault();
12716+
});
12717+
12718+
this.$el.find('#oh-google-map-map-type-menu a').click(function(e) {
12719+
var $t = $(this);
12720+
var type = $t.data('type').toUpperCase();
12721+
12722+
if(google.maps.MapTypeId[type]) {
12723+
t.mapOptions.mapType = google.maps.MapTypeId[type];
12724+
t.setMapTypeId(google.maps.MapTypeId[type]);
12725+
}
12726+
else {
12727+
t.mapOptions.mapType = google.maps.MapTypeId.ROADMAP;
12728+
t.setMapTypeId(google.maps.MapTypeId.ROADMAP);
12729+
}
12730+
12731+
$('#oh-google-map-map-type-menu .sel').removeClass('sel');
12732+
12733+
t.$el.find('.oh-google-map-map-type').removeClass('active');
12734+
12735+
$t.addClass('sel');
12736+
12737+
e.preventDefault();
12738+
});
12739+
12740+
this.$el.find('#oh-google-map-map-type-menu a[data-type="'+t.mapOptions.mapType+'"]').addClass('sel');
12741+
1269612742
// this.$el.find('.oh-google-map-window').css('max-height', parseInt(this.height.replace('px', '')) - 50);
1269712743

1269812744
if(this.savedData) {
@@ -12965,22 +13011,6 @@ var GoogleMaps = {
1296513011
this.setZoom(this.getZoom() - 1);
1296613012
},
1296713013

12968-
getZoom: function() {
12969-
return this.api.getZoom();
12970-
},
12971-
12972-
setZoom: function(x) {
12973-
if(x < 0) {
12974-
x = 0;
12975-
}
12976-
12977-
if(x > 20) {
12978-
x = 20;
12979-
}
12980-
12981-
this.api.setZoom(x);
12982-
},
12983-
1298413014
center: function() {
1298513015
var t = this, bounds = new google.maps.LatLngBounds();
1298613016
var boundsChanged = false;
@@ -13026,12 +13056,96 @@ var GoogleMaps = {
1302613056
this.api.fitBounds(bounds);
1302713057
},
1302813058

13059+
getBounds: function() {
13060+
return this.api.getBounds();
13061+
},
13062+
13063+
getCenter: function() {
13064+
return this.api.getCenter();
13065+
},
13066+
1302913067
getCanvas: function() {
1303013068
return this.$el.find('.oh-google-map').get(0);
1303113069
},
1303213070

1303313071
getMapOptions: function() {
1303413072
return this.mapOptions;
13073+
},
13074+
13075+
getDiv: function() {
13076+
return this.api.getDiv()
13077+
},
13078+
13079+
getHeading: function() {
13080+
return this.api.getHeading();
13081+
},
13082+
13083+
getMapTypeId: function() {
13084+
return this.api.getMapTypeId();
13085+
},
13086+
13087+
getProjection: function() {
13088+
return this.api.getProjection();
13089+
},
13090+
13091+
getStreetView: function() {
13092+
return this.api.getStreetView();
13093+
},
13094+
13095+
getTilt: function() {
13096+
return this.api.getCenter();
13097+
},
13098+
13099+
getZoom: function() {
13100+
return this.api.getZoom();
13101+
},
13102+
13103+
panBy: function(x, y) {
13104+
this.api.panBy(x, y);
13105+
},
13106+
13107+
panTo: function(value) {
13108+
this.api.panTo(value);
13109+
},
13110+
13111+
panToBounds: function(value) {
13112+
this.api.panToBounds(value);
13113+
},
13114+
13115+
setCenter: function(value) {
13116+
this.api.setCenter(value);
13117+
},
13118+
13119+
setHeading: function(value) {
13120+
this.api.setHeading(value);
13121+
},
13122+
13123+
setMapTypeId: function(value) {
13124+
this.api.setMapTypeId(value);
13125+
},
13126+
13127+
setOptions: function(value) {
13128+
this.api.setOptions(value);
13129+
},
13130+
13131+
setStreetView: function(value) {
13132+
this.api.setStreetView(value);
13133+
},
13134+
13135+
setTilt: function(value) {
13136+
this.api.setTilt(value);
13137+
},
13138+
13139+
setZoom: function(x) {
13140+
if(x < 0) {
13141+
x = 0;
13142+
}
13143+
13144+
if(x > 20) {
13145+
x = 20;
13146+
}
13147+
13148+
this.api.setZoom(x);
1303513149
}
1303613150

1303713151
});

0 commit comments

Comments
 (0)