Hi,
Thanks for the responses.
Maybe I'm taking the wrong approach.
As I said, I'm trying to add a Canvas tag OverlayView. Basically what
I want to do is a Heatmap, so that I need the canvas for drawing the
heat surfaces.
For performance reasons, I obsiously can't have a canvas that covers
the entire world surface.
What I would like to do is place my canvas element to the top-left
corner every time the draw method is called.
Once called, I would like to draw the geometries that are contained
in the current map bounds.
Here's what I have:
function HeatMapOverlay(points, map) {
google.maps.OverlayView.call(this);
// Now initialize all properties.
this.points = points;
this.map_ = map;
this.canvas_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
HeatMapOverlay.prototype = new google.maps.OverlayView();
HeatMapOverlay.prototype.createCanvas = function()
{
var panes = this.getPanes();
var xy = this.divEl_.getXY()
var canvas = this.canvas_;
var divC = this.divC_
if (!canvas) {
canvas = this.canvas_ = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style.display = 'block';
canvas.style.paddingLeft = "0px";
canvas.style.border = "0px solid none";
panes.overlayLayer.appendChild(canvas);
}
}
HeatMapOverlay.prototype.remove = function() {
if (this.canvas_) {
this.setMap(null);
this.canvas_.parentNode.removeChild(this._canvas);
this.canvas_ = null;
}
}
HeatMapOverlay.prototype.draw = function(firstTime) {
this.createCanvas();
if (!this.canvas_) {
return;
}
this.doDraw();
}
HeatMapOverlay.prototype.doDraw = function() {
var overlayProjection = this.getProjection();
var current_bounds = this.map_.getBounds();
// translate latlng bounds to pixels....
var ne =
overlayProjection.fromLatLngToDivPixel(current_bounds.getNorthEast());
var sw =
overlayProjection.fromLatLngToDivPixel(current_bounds.getSouthWest());
var width = (ne.x - sw.x)
var height = (sw.y - ne.y)
this.canvas_.width = width;
this.canvas_.height = height;
this.canvas_.style.width = width + 'px';
this.canvas_.style.height = height + 'px';
this.canvas_.style.top = '0px';
this.canvas_.style.left = '0px';
var ctx = this.canvas_.getContext('2d');
var len = this.points.length;
for (var i = 0; i< len;i++) {
var p = this.points[i];
if (current_bounds.contains(p.latlng)) {
... draw heatmap....
}
}
Is that feasible? How can I place the canvas tag to the top-left
corner every time draw is called?
@Esa:
I tried attaching the canvas directly to map.getDiv(), but it has 2
problems,
1) It swallows all mouse events, so the map can't be dragged,
2) If it could, the geometries would be wrongly placed until the draw
method was called?
Thanks!!!
On Feb 19, 5:51 am, Martin™ <warwo...@gmail.com> wrote:
> You might have better luck with events reaching your map if you add it
> to the map as a custom control:
>
> http://code.google.com/apis/maps/documentation/javascript/controls.ht...
>
> Martin.
>
> On Feb 18, 5:51 pm, Joan <jangl...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hi,
>
> > I'm trying to add an OverlayView using an html canvas tag.
>
> > My onAdd method looks like:
> > var canvas;
> > canvas = this.canvas_ = document.createElement('canvas');
> > canvas.style.position = 'fixed';
> > canvas.style.top = '100px';
> > canvas.style.left = '100px';
>
> > this.getPanes().overlayLayer.appendChild(canvas);
>
> > My problem is that when dragging the map, the canvas is not "fixed"
> > relative to the browser's window.
>
> > How can I achieve that?
>
> > I did try attach to canvas directly to the maps' div (map.getDiv() )
> > but then I loose the interaction with the map as the canvas swallows
> > al mouse events.
>
> > Thanks!
--
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 google-maps-js-api-v3@googlegroups.com.
To unsubscribe from this group, send email to
google-maps-js-api-v3+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
