Comments (1)
I got this to work by rotating the canvas using CSS. Search for "//rotate" in code below.
- I'm using @rcknr's pull request: #9
- set default property in constructor.
- added rotation update to redraw in changed
- Updated draw to set transform CSS property on canvas.
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('fontFamily', 'Roboto,Arial,sans-serif');
this.set('fontSize', 12);
this.set('rotation', 0); // rotate
this.set('strokeColor', '#ffffff');
this.set('strokeWeight', 1);
this.set('zIndex', 1e3);
this.setValues(opt_options);
}
window['MapLabel'] = MapLabel;
/** @inheritDoc */
MapLabel.prototype.changed = function (prop) {
switch (prop) {
case 'fontFamily':
case 'fontSize':
case 'fontColor':
case 'rotation': // rotate
case 'strokeWeight':
case 'strokeColor':
case 'text':
this.drawCanvas_();
case 'align':
case 'maxZoom':
case 'minZoom':
case 'position':
return this.draw();
}
};
/**
* @inheritDoc
*/
MapLabel.prototype.draw = function () {
var projection = this.getProjection();
if (!projection) {
// The map projection is not ready yet so do nothing
return;
}
if (!this.canvas_) {
// onAdd has not been called yet.
return;
}
var latLng = /** @type {google.maps.LatLng} */ (this.get('position'));
if (!latLng) {
return;
}
var pos = projection.fromLatLngToDivPixel(latLng);
var style = this.canvas_.style;
style['top'] = pos.y + 'px';
style['transform'] = 'scale(' + this.map.getZoom() / 17 + ') rotate(' + this.get('rotation') + 'rad)'; //rotate
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_();
};
`
from js-map-label.
Related Issues (10)
- Support the asynchronous maps API. HOT 7
- how to change icon with js-map-label
- This dependency was not found
- How to remove label from map
- Text doesn't always fit into the canvas
- Support Retina Displays HOT 5
- How do I position the label above my marker? HOT 4
- What are the differences between git repository and googlecode repository? HOT 1
- Multiline / Wrap Text Support HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from js-map-label.