Agrr.. google groups has eaten my message..
>shapes disappears becouse 2^16 = 65536
below is my code to avoid this + 2 convenient methods to convert
canvas coordinates to map lat/lon and back.
Key points:
- limit canvas size by 60000 pixel - this is far enough for the user
being able to drag the map though all that pixels to reach canvas
drawing bound without changing zoom, and if he changes zoom, the
canvas bounds are recalculated
- world center is map's visible center, not 0,0
/**
* Draw with raphael library over google map.
*/
function RaphaelOverlay() {
}
RaphaelOverlay.prototype = new google.maps.OverlayView();
/**
* Convert lan/lng map coordinates to the canvas point coordinates.
*/
RaphaelOverlay.prototype.fromLatLngToCanvasPixel = function(latLng) {
var divPixel = this.getProjection().fromLatLngToDivPixel(latLng);
var left = this.canvasCenter.x - this.canvasWidth / 2;
var top = this.canvasCenter.y - this.canvasHeight / 2;
var x = divPixel.x - left;
var y = divPixel.y - top;
var canvasPixel = new google.maps.Point(x, y);
return canvasPixel;
}
/**
* Convert canvas point coordinates to the lan/lng map coordinates.
*/
RaphaelOverlay.prototype.fromCanvasPixelToLatLng =
function(canvasPixel) {
// borders of the map
var left = this.canvasCenter.x - this.canvasWidth / 2;
var top = this.canvasCenter.y - this.canvasHeight / 2;
// point coondinates on the canvas layer
var x = canvasPixel.x + left;
var y = canvasPixel.y + top;
var divPixel = new google.maps.Point(x, y);
var latLng = this.getProjection().fromDivPixelToLatLng(divPixel);
return latLng;
}
RaphaelOverlay.prototype.onAdd = function() {
// painting for the layer
this.div = document.createElement('div');
this.div.style.border = 'none';
this.div.style.position = 'absolute';
this.div.style.overflow = 'visible';
this.getPanes().overlayImage.appendChild(this.div);
this.canvas = Raphael(this.div);
};
RaphaelOverlay.prototype.draw = function() {
this.canvasCenter =
this.getProjection().fromLatLngToDivPixel(this.getMap().getCenter());
this.canvasWidth = Math.min(this.getProjection().getWorldWidth(),
60000);
this.canvasHeight = Math.min(this.getProjection().getWorldWidth(),
60000);
this.div.style.left = this.canvasCenter.x - this.canvasWidth / 2 +
'px';
this.div.style.top = this.canvasCenter.y - this.canvasHeight / 2 +
'px';
this.div.style.width = this.canvasWidth + 'px';
this.div.style.height = this.canvasHeight + 'px';
this.canvas.setSize(this.canvasWidth, this.canvasHeight);
rebuildPath(this, this.canvas);
};
RaphaelOverlay.prototype.onRemove = function() {
this.div.parentNode.removeChild(this.div);
};
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
