diff --git a/src/maplabel-compiled.js b/src/maplabel-compiled.js index e45170b..389ad02 100755 --- a/src/maplabel-compiled.js +++ b/src/maplabel-compiled.js @@ -1,4 +1,4 @@ -(function(){/* +/* Copyright 2011 Google Inc. @@ -7,7 +7,7 @@ you may not use this file except in compliance with the License. You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 + http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, @@ -15,7 +15,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -var d="prototype";function e(a){this.set("fontFamily","sans-serif");this.set("fontSize",12);this.set("fontColor","#000000");this.set("strokeWeight",4);this.set("strokeColor","#ffffff");this.set("align","center");this.set("zIndex",1E3);this.setValues(a)}e.prototype=new google.maps.OverlayView;window.MapLabel=e;e[d].changed=function(a){switch(a){case "fontFamily":case "fontSize":case "fontColor":case "strokeWeight":case "strokeColor":case "align":case "text":return h(this);case "maxZoom":case "minZoom":case "position":return this.draw()}}; -function h(a){var b=a.a;if(b){var f=b.style;f.zIndex=a.get("zIndex");var c=b.getContext("2d");c.clearRect(0,0,b.width,b.height);c.strokeStyle=a.get("strokeColor");c.fillStyle=a.get("fontColor");c.font=a.get("fontSize")+"px "+a.get("fontFamily");var b=Number(a.get("strokeWeight")),g=a.get("text");if(g){if(b)c.lineWidth=b,c.strokeText(g,b,b);c.fillText(g,b,b);a:{c=c.measureText(g).width+b;switch(a.get("align")){case "left":a=0;break a;case "right":a=-c;break a}a=c/-2}f.marginLeft=a+"px";f.marginTop= -"-0.4em"}}}e[d].onAdd=function(){var a=this.a=document.createElement("canvas");a.style.position="absolute";var b=a.getContext("2d");b.lineJoin="round";b.textBaseline="top";h(this);(b=this.getPanes())&&b.mapPane.appendChild(a)};e[d].onAdd=e[d].onAdd; -e[d].draw=function(){var a=this.getProjection();if(a&&this.a){var b=this.get("position");if(b){b=a.fromLatLngToDivPixel(b);a=this.a.style;a.top=b.y+"px";a.left=b.x+"px";var b=this.get("minZoom"),f=this.get("maxZoom");if(b===void 0&&f===void 0)b="";else{var c=this.getMap();c?(c=c.getZoom(),b=cf?"hidden":""):b=""}a.visibility=b}}};e[d].draw=e[d].draw;e[d].onRemove=function(){var a=this.a;a&&a.parentNode&&a.parentNode.removeChild(a)};e[d].onRemove=e[d].onRemove;})() +MapLabel=function(a){if(!MapLabel.prototype.setValues)for(var b in google.maps.OverlayView.prototype)MapLabel.prototype.hasOwnProperty(b)||(MapLabel.prototype[b]=google.maps.OverlayView.prototype[b]);this.set("align","center");this.set("fontColor","#000000");this.set("fontFamily","Roboto,Arial,sans-serif");this.set("fontSize",12);this.set("strokeColor","#ffffff");this.set("strokeWeight",4);this.set("zIndex",1E3);this.setValues(a)};window.MapLabel=MapLabel; +MapLabel.prototype.changed=function(a){switch(a){case "fontFamily":case "fontSize":case "fontColor":case "strokeWeight":case "strokeColor":case "text":g(this);case "align":case "maxZoom":case "minZoom":case "position":return this.draw()}}; +function g(a){var b=a.a;if(b){var e=b.style;e.position="absolute";e.zIndex=a.get("zIndex");var c=b.getContext("2d");c.font=a.get("fontSize")+"px "+a.get("fontFamily");var d=Number(a.get("strokeWeight")),f=a.get("text");b.width=Math.ceil(c.measureText(f).width+2*d);b.height=Math.ceil(parseInt(a.get("fontSize"),10)+2*d);1e?"hidden":""):b=""}a.visibility=b}}};MapLabel.prototype.draw=MapLabel.prototype.draw;MapLabel.prototype.onRemove=function(){var a=this.a;a&&a.parentNode&&a.parentNode.removeChild(a)};MapLabel.prototype.onRemove=MapLabel.prototype.onRemove; diff --git a/src/maplabel.js b/src/maplabel.js index 71c88ca..1e51847 100755 --- a/src/maplabel.js +++ b/src/maplabel.js @@ -1,3 +1,8 @@ +// ==ClosureCompiler== +// @output_file_name maplabels-compiled.js +// @compilation_level ADVANCED_OPTIMIZATIONS +// @externs_url https://raw.githubusercontent.com/google/closure-compiler/master/contrib/externs/maps/google_maps_api_v3.js +// ==/ClosureCompiler== /** * @license * @@ -29,19 +34,25 @@ * @extends google.maps.OverlayView * @param {Object.=} opt_options Optional properties to set. */ -function MapLabel(opt_options) { - this.set('fontFamily', 'sans-serif'); - this.set('fontSize', 12); +MapLabel = function(opt_options) { + if (!MapLabel.prototype.setValues) { + for (var property in google.maps.OverlayView.prototype) { + if(!MapLabel.prototype.hasOwnProperty(property)) { + MapLabel.prototype[property] = google.maps.OverlayView.prototype[property]; + } + } + } + + this.set('align', 'center'); this.set('fontColor', '#000000'); - this.set('strokeWeight', 4); + this.set('fontFamily', 'Roboto,Arial,sans-serif'); + this.set('fontSize', 12); this.set('strokeColor', '#ffffff'); - this.set('align', 'center'); - + this.set('strokeWeight', 4); this.set('zIndex', 1e3); this.setValues(opt_options); } -MapLabel.prototype = new google.maps.OverlayView; window['MapLabel'] = MapLabel; @@ -54,9 +65,9 @@ MapLabel.prototype.changed = function(prop) { case 'fontColor': case 'strokeWeight': case 'strokeColor': - case 'align': case 'text': - return this.drawCanvas_(); + this.drawCanvas_(); + case 'align': case 'maxZoom': case 'minZoom': case 'position': @@ -73,17 +84,35 @@ MapLabel.prototype.drawCanvas_ = function() { if (!canvas) return; var style = canvas.style; + style.position = 'absolute'; style.zIndex = /** @type number */(this.get('zIndex')); var ctx = canvas.getContext('2d'); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.strokeStyle = this.get('strokeColor'); - ctx.fillStyle = this.get('fontColor'); ctx.font = this.get('fontSize') + 'px ' + this.get('fontFamily'); var strokeWeight = Number(this.get('strokeWeight')); - var text = this.get('text'); + var textMeasure = ctx.measureText(text); + + canvas.width = Math.ceil(textMeasure.width + strokeWeight * 2); + canvas.height = Math.ceil(parseInt(this.get('fontSize'), 10) + strokeWeight * 2); + + if (window.devicePixelRatio > 1) { + style.width = canvas.width + 'px'; + style.height = canvas.height + 'px'; + canvas.width = canvas.width * window.devicePixelRatio; + canvas.height = canvas.height * window.devicePixelRatio; + ctx.scale(window.devicePixelRatio, window.devicePixelRatio); + } + + ctx.lineJoin = 'round'; + ctx.textBaseline = 'top'; + ctx.textAlign = 'left'; + ctx.strokeStyle = this.get('strokeColor'); + ctx.fillStyle = this.get('fontColor'); + ctx.font = this.get('fontSize') + 'px ' + this.get('fontFamily'); + ctx.clearRect(0, 0, canvas.width, canvas.height); + if (text) { if (strokeWeight) { ctx.lineWidth = strokeWeight; @@ -91,13 +120,6 @@ MapLabel.prototype.drawCanvas_ = function() { } ctx.fillText(text, strokeWeight, strokeWeight); - - var textMeasure = ctx.measureText(text); - var textWidth = textMeasure.width + strokeWeight; - style.marginLeft = this.getMarginLeft_(textWidth) + 'px'; - // Bring actual text top in line with desired latitude. - // Cheaper than calculating height of text. - style.marginTop = '-0.4em'; } }; @@ -106,38 +128,16 @@ MapLabel.prototype.drawCanvas_ = function() { */ MapLabel.prototype.onAdd = function() { var canvas = this.canvas_ = document.createElement('canvas'); - var style = canvas.style; - style.position = 'absolute'; - - var ctx = canvas.getContext('2d'); - ctx.lineJoin = 'round'; - ctx.textBaseline = 'top'; this.drawCanvas_(); var panes = this.getPanes(); if (panes) { - panes.mapPane.appendChild(canvas); + panes.overlayLayer.appendChild(canvas); } }; MapLabel.prototype['onAdd'] = MapLabel.prototype.onAdd; -/** - * Gets the appropriate margin-left for the canvas. - * @private - * @param {number} textWidth the width of the text, in pixels. - * @return {number} the margin-left, in pixels. - */ -MapLabel.prototype.getMarginLeft_ = function(textWidth) { - switch (this.get('align')) { - case 'left': - return 0; - case 'right': - return -textWidth; - } - return textWidth / -2; -}; - /** * @inheritDoc */ @@ -163,7 +163,23 @@ MapLabel.prototype.draw = function() { var style = this.canvas_.style; style['top'] = pos.y + 'px'; - style['left'] = pos.x + 'px'; + + switch(this.get('align')) { + case 'left': + style['left'] = pos.x - (this.canvas_.width / (window.devicePixelRatio ? window.devicePixelRatio : 1)) + 'px'; + style['margin-left'] = '-1em'; + style['margin-top'] = '-0.4em'; + break; + case 'right': + style['left'] = pos.x + 'px'; + style['margin-left'] = '1em'; + style['margin-top'] = '-0.4em'; + break; + default: + style['left'] = (pos.x - (this.canvas_.width / (window.devicePixelRatio ? window.devicePixelRatio : 1)) / 2) + 'px'; + style['margin-left'] = 0; + style['margin-top'] = '1em'; + } style['visibility'] = this.getVisible_(); };