From b224d02ecb3da3d50cec5ecf8f390f2905a2c71d Mon Sep 17 00:00:00 2001 From: fhackenberger Date: Thu, 9 Jun 2016 18:51:21 +0200 Subject: [PATCH 1/5] Google maps async loading support and namespacing --- src/maplabel.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/maplabel.js b/src/maplabel.js index 71c88ca..ae97073 100755 --- a/src/maplabel.js +++ b/src/maplabel.js @@ -29,6 +29,7 @@ * @extends google.maps.OverlayView * @param {Object.=} opt_options Optional properties to set. */ +(function() { function MapLabel(opt_options) { this.set('fontFamily', 'sans-serif'); this.set('fontSize', 12); @@ -41,10 +42,29 @@ function MapLabel(opt_options) { this.setValues(opt_options); } -MapLabel.prototype = new google.maps.OverlayView; - -window['MapLabel'] = MapLabel; +// Expose in the namespace googlemaps.jsMapLabel +var googlemaps = window.googlemaps = window.googlemaps || {}; +var jsMapLabel = googlemaps.jsMapLabel = googlemaps.jsMapLabel || {}; +jsMapLabel.initDone = false; +// See if we have google maps available already and can do the init right now +if(window.google && google.maps && google.maps.OverlayView) { + MapLabel.prototype = new google.maps.OverlayView; + jsMapLabel.initDone = true; +} +jsMapLabel.MapLabel = MapLabel; +// If google maps is loaded asynchronously, the library user can call googlemaps.jsMapLabel.init(google.maps) from within their callback function passed to the Google Maps script URL +jsMapLabel.init = function(maps) { + if(jsMapLabel.initDone) + return; + var proto = MapLabel.prototype; + MapLabel.prototype = new maps.OverlayView; + for (var property in proto) { // Copy all the functions this lib defined over into the new protoype + if (proto.hasOwnProperty(property)) + MapLabel.prototype[property] = proto[property]; + } + jsMapLabel.initDone = true; +} /** @inheritDoc */ MapLabel.prototype.changed = function(prop) { @@ -204,3 +224,4 @@ MapLabel.prototype.onRemove = function() { } }; MapLabel.prototype['onRemove'] = MapLabel.prototype.onRemove; +})(); \ No newline at end of file From eee9011ade492e3630285bc94f28535cf6f6687a Mon Sep 17 00:00:00 2001 From: fhackenberger Date: Thu, 9 Jun 2016 18:52:07 +0200 Subject: [PATCH 2/5] Changes from daniellmb for high-DPI screens https://github.com/daniellmb/js-map-label --- src/maplabel.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/maplabel.js b/src/maplabel.js index ae97073..56049a7 100755 --- a/src/maplabel.js +++ b/src/maplabel.js @@ -128,6 +128,14 @@ MapLabel.prototype.onAdd = function() { var canvas = this.canvas_ = document.createElement('canvas'); var style = canvas.style; style.position = 'absolute'; + + // support high DPI screens + if (window.devicePixelRatio > 1) { + var width = 250; + var size = width * window.devicePixelRatio; + canvas.width = canvas.height = size; + style.width = style.height = size + 'px'; + } var ctx = canvas.getContext('2d'); ctx.lineJoin = 'round'; @@ -137,7 +145,7 @@ MapLabel.prototype.onAdd = function() { var panes = this.getPanes(); if (panes) { - panes.mapPane.appendChild(canvas); + panes.overlayMouseTarget.appendChild(canvas); } }; MapLabel.prototype['onAdd'] = MapLabel.prototype.onAdd; From b2215ad7059d397e663317276f86f654aa639f19 Mon Sep 17 00:00:00 2001 From: fhackenberger Date: Thu, 9 Jun 2016 18:53:11 +0200 Subject: [PATCH 3/5] Adds a marginTop config option This is useful to place the text above a marker icon --- src/maplabel.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/maplabel.js b/src/maplabel.js index 56049a7..839074d 100755 --- a/src/maplabel.js +++ b/src/maplabel.js @@ -37,6 +37,7 @@ function MapLabel(opt_options) { this.set('strokeWeight', 4); this.set('strokeColor', '#ffffff'); this.set('align', 'center'); + this.set('marginTop', '-0.4em'); this.set('zIndex', 1e3); @@ -74,6 +75,7 @@ MapLabel.prototype.changed = function(prop) { case 'fontColor': case 'strokeWeight': case 'strokeColor': + case 'marginTop': case 'align': case 'text': return this.drawCanvas_(); @@ -115,9 +117,9 @@ MapLabel.prototype.drawCanvas_ = function() { 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. + // With the default value, bring actual text top in line with desired latitude. // Cheaper than calculating height of text. - style.marginTop = '-0.4em'; + style.marginTop = /** @type string */(this.get('marginTop')); } }; From 50199ed0e22b8572d572ef94b4f29f9de3bc7dcc Mon Sep 17 00:00:00 2001 From: fhackenberger Date: Thu, 9 Jun 2016 18:53:46 +0200 Subject: [PATCH 4/5] Fixes alignment issues The canvas is always 300px wide, so in case the text is longer and cut off, at least it still aligns correctly. --- src/maplabel.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/maplabel.js b/src/maplabel.js index 839074d..38dd5cd 100755 --- a/src/maplabel.js +++ b/src/maplabel.js @@ -159,6 +159,7 @@ MapLabel.prototype['onAdd'] = MapLabel.prototype.onAdd; * @return {number} the margin-left, in pixels. */ MapLabel.prototype.getMarginLeft_ = function(textWidth) { + textWidth = Math.min(textWidth, this.canvas_.width); switch (this.get('align')) { case 'left': return 0; From f49b9a864ff81c10712114b2de587cfcf885c9bc Mon Sep 17 00:00:00 2001 From: fhackenberger Date: Thu, 9 Jun 2016 18:55:08 +0200 Subject: [PATCH 5/5] Cleans up unnecessary code lines --- src/maplabel.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/maplabel.js b/src/maplabel.js index 38dd5cd..4d9a0b1 100755 --- a/src/maplabel.js +++ b/src/maplabel.js @@ -175,15 +175,11 @@ MapLabel.prototype.getMarginLeft_ = function(textWidth) { MapLabel.prototype.draw = function() { var projection = this.getProjection(); - if (!projection) { - // The map projection is not ready yet so do nothing - return; - } + if (!projection) + return; // The map projection is not ready yet so do nothing - if (!this.canvas_) { - // onAdd has not been called yet. - return; - } + if (!this.canvas_) + return; // onAdd has not been called yet. var latLng = /** @type {google.maps.LatLng} */ (this.get('position')); if (!latLng) {