Thank's a lot, very nice.
>but on 16+ zoom level, shapes disappears becouse 2^16 = 65536
Also met this issue - on firefox2 the problem start at
worldWidth=65536 as you say, on newer firefox and chrome this number
is more than million, but still can be seen on the map with close
zoom.
I have solved this just by limiting the raphael canvas width/height by
60000 pixels (and currently it is taken as map's worldWidth).
Actually, the user will be hardly able to notice this - if he zooms
16+ (so the canvas width will be less than actual world width), he
will have to drag the map through 60000 pixels right/left/top/bottom
in order to reach the paintable canvas edge - this is really long way.
And if he zooms out/zooms in to reach this border, overlay draw()
method would be called, so the canvas location would be recalculated
and the canvas border would be moved to another location.
Below is my code with this workaround and 2 additional helpful methods
to convert lat/lon coordinates values to the raphael canvas
coordinates and back - this works fine with any zoom level.
Also note, that world center is not (0,0), but current visible map
center - without this detail 60000 pixels limitation workaround will
not work right.
/**
* 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.
