Skip to content

Commit

Permalink
- (Feature) Added ability to change the map type within the fieldtype
Browse files Browse the repository at this point in the history
  • Loading branch information
@objectivehtml
objectivehtml committed Sep 9, 2014
1 parent d18edc6 commit 47e4b9c
Show file tree
Hide file tree
Showing 9 changed files with 425 additions and 67 deletions.
6 changes: 4 additions & 2 deletions resources/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@
.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; }
.oh-google-map-controls.hide { left: -100%; }

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

.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); }
.oh-google-map-control-button:hover { text-decoration: none; }
.oh-google-map-control-button.active,
.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; }
.oh-google-map-control-button.small { font-size: 13px; padding: 6px 8px; }

Expand Down
2 changes: 1 addition & 1 deletion resources/css/app.min.css
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions resources/css/fieldtype.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@
.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; }
.oh-google-map-controls.hide { left: -100%; }

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

.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); }
.oh-google-map-control-button:hover { text-decoration: none; }
.oh-google-map-control-button.active,
.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; }
.oh-google-map-control-button.small { font-size: 13px; padding: 6px 8px; }

Expand Down
152 changes: 133 additions & 19 deletions resources/js/app.compiled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10117,15 +10117,15 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;


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:";
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:";
if (helper = helpers.width) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.width); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "; height:";
if (helper = helpers.height) { stack1 = helper.call(depth0, {hash:{},data:data}); }
else { helper = (depth0 && depth0.height); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
buffer += escapeExpression(stack1)
+ "\"></div>";
+ "\"></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>";
return buffer;
});

Expand Down Expand Up @@ -12609,7 +12609,8 @@ var GoogleMaps = {

this.mapOptions = _.extend({}, {
zoom: 8,
disableDefaultUI: true
disableDefaultUI: true,
mapType: google.maps.MapTypeId.ROADMAP
});

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

/*
if(this.position) {
this.mapOptions.center = this.position;
}
if(this.zoom) {
this.mapOptions.zoom = this.zoom;
}
*/

this.model.set({
fieldname: this.fieldname,
Expand Down Expand Up @@ -12693,6 +12696,49 @@ var GoogleMaps = {
e.preventDefault();
});

this.mapTypeMenu = new Garnish.Menu(this.$el.find('#oh-google-map-map-type-menu'), {
attachToElement: this.$el.find('.oh-google-map-map-type')
});

this.$el.find('.oh-google-map-map-type').click(function(e) {
var $t = $(this);

if($t.hasClass('active')) {
$t.removeClass('active');
t.mapTypeMenu.hide();
}
else {
$t.addClass('active');
t.mapTypeMenu.show();
}

e.preventDefault();
});

this.$el.find('#oh-google-map-map-type-menu a').click(function(e) {
var $t = $(this);
var type = $t.data('type').toUpperCase();

if(google.maps.MapTypeId[type]) {
t.mapOptions.mapType = google.maps.MapTypeId[type];
t.setMapTypeId(google.maps.MapTypeId[type]);
}
else {
t.mapOptions.mapType = google.maps.MapTypeId.ROADMAP;
t.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}

$('#oh-google-map-map-type-menu .sel').removeClass('sel');

t.$el.find('.oh-google-map-map-type').removeClass('active');

$t.addClass('sel');

e.preventDefault();
});

this.$el.find('#oh-google-map-map-type-menu a[data-type="'+t.mapOptions.mapType+'"]').addClass('sel');

// this.$el.find('.oh-google-map-window').css('max-height', parseInt(this.height.replace('px', '')) - 50);

if(this.savedData) {
Expand Down Expand Up @@ -12965,22 +13011,6 @@ var GoogleMaps = {
this.setZoom(this.getZoom() - 1);
},

getZoom: function() {
return this.api.getZoom();
},

setZoom: function(x) {
if(x < 0) {
x = 0;
}

if(x > 20) {
x = 20;
}

this.api.setZoom(x);
},

center: function() {
var t = this, bounds = new google.maps.LatLngBounds();
var boundsChanged = false;
Expand Down Expand Up @@ -13026,12 +13056,96 @@ var GoogleMaps = {
this.api.fitBounds(bounds);
},

getBounds: function() {
return this.api.getBounds();
},

getCenter: function() {
return this.api.getCenter();
},

getCanvas: function() {
return this.$el.find('.oh-google-map').get(0);
},

getMapOptions: function() {
return this.mapOptions;
},

getDiv: function() {
return this.api.getDiv()
},

getHeading: function() {
return this.api.getHeading();
},

getMapTypeId: function() {
return this.api.getMapTypeId();
},

getProjection: function() {
return this.api.getProjection();
},

getStreetView: function() {
return this.api.getStreetView();
},

getTilt: function() {
return this.api.getCenter();
},

getZoom: function() {
return this.api.getZoom();
},

panBy: function(x, y) {
this.api.panBy(x, y);
},

panTo: function(value) {
this.api.panTo(value);
},

panToBounds: function(value) {
this.api.panToBounds(value);
},

setCenter: function(value) {
this.api.setCenter(value);
},

setHeading: function(value) {
this.api.setHeading(value);
},

setMapTypeId: function(value) {
this.api.setMapTypeId(value);
},

setOptions: function(value) {
this.api.setOptions(value);
},

setStreetView: function(value) {
this.api.setStreetView(value);
},

setTilt: function(value) {
this.api.setTilt(value);
},

setZoom: function(x) {
if(x < 0) {
x = 0;
}

if(x > 20) {
x = 20;
}

this.api.setZoom(x);
}

});
Expand Down
Loading

0 comments on commit 47e4b9c

Please sign in to comment.