Databases
StackOverflow2013
Postsdbo
POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
    primarykey
    data
    text
    <p>I am trying to implement a custom overlay in Google Maps API v3, with some custom drawing done through a canvas element. Basically I am reproducing the Polygon element from the API, but with the ability to receive events from the user (the goal is to drop some stuff on the zone, with native drag'n drop).</p> <p>So drawing works fine, I attach a listener to the canvas element and that's where trouble happens. Safari (tested with 5.1.4) delivers the event, until I do some drawing on the canvas element by retrieving the context and adding a path. For Chrome (17), Firefox (10), and Opera (11), no issues.</p> <p>You can view the page <a href="http://dev.vicould.net/simple_event.html" rel="nofollow">here</a>. When you click on the gray polygon on the center of the map, a <code>plop</code> should be added below the map, as a check that the event was delivered.</p> <p>Here are some parts of the code, first creating the overlay and adding it to the panes.</p> <pre><code>EventReceiverOverlay.prototype.onAdd = function() { var holder = document.createElement('canvas'); holder.style.opacity = 0.5; this.canvas_ = holder; google.maps.event.addDomListener(holder, 'click', function(event) { /* holder.addEventListener('click', function(event) { */ document.getElementById('message_container').innerHTML += 'plop'; }, false); this.getPanes().overlayLayer.appendChild(holder); } </code></pre> <p>Then drawing the overlay (updateScreenPoints allows to convert all the coordinates of the points to pixel coordinates):</p> <pre><code>EventReceiverOverlay.prototype.draw = function() { var overlayProjection = this.getProjection(); var swCorner = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); var neCorner = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); this.updateScreenPoints(); var canvas = this.canvas_; if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.save(); ctx.strokeStyle = '#f00'; ctx.lineWidth = 2; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.style.width, canvas.style.height); canvas.style.position = 'relative'; canvas.style.left = Math.round(swCorner.x) + 'px'; canvas.style.top = Math.round(neCorner.y) + 'px'; ctx.beginPath(); ctx.moveTo(this.screenPoints_[0].x, this.screenPoints_[0].y); for (var i = 1; i &lt; this.screenPoints_.length; i++) { ctx.lineTo(this.screenPoints_[i].x, this.screenPoints_[i].y); } ctx.fill(); ctx.restore(); } } </code></pre> <p>I tested with different events (click, mouseover, dragenter, etc.), different ways to attach the event (through <code>google.maps.event.addDOMListener</code>, browser <code>addEventListener</code>, and jQuery <code>on</code>), with the same results: Safari refuses to play nicely, whereas the others work as expected, triggering my function.</p> <p>I also tried to add the overlay to another map pane, such as the overlayMouseTarget or the floatPane, with no additional changes.</p> <p>To give another try, I implemented a simple canvas (with the same shape, more or less the same drawing process) to test if Safari receives the event in that case, and yes, it's working. </p> <p>Doing the same with a simple div element works perfectly, the issue happens as soon as I begin to draw on the canvas. </p> <p>I am not sure of what I did wrong, or if there is a bug between the Google Maps API and Safari. So your help will be greatly appreciated, if you manage to go through the whole story I just wrote :)</p> <p>Thanks</p> <p><strong>Edit</strong> Apparently as Brendan Kenny reports there are no issues with OS X 10.6.8 and Safari 5.1.2. I tested it with OS X 10.6.8 and Safari 5.0.5, and no issues as well.</p> <p>I made a second page, <a href="http://dev.vicould.net/no_drawing.html" rel="nofollow">here</a>, with no other changes than removing the drawing part (I deleted all the parts that were using the context from the canvas in the <code>draw</code> method). When clicking on the red rectangle, a "plop" is added to the div below, and it works as expected in Safari 5.1.4.</p> <p><strong>Edit 2</strong> Fixed in Safari 6.0, guess I won't know what happened.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USvicould
    1. USvicould
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
      1. This table or related slice is empty.
      1. VTUpMod
    1. COTo be clear: the expected behavior is that clicks on the canvas that contains the grey polygon should add a 'plop' to the div below the map? What OS are you running? On OS X 10.6.8 (running Safari 5.1.2), the plop appears whenever I click on the canvas on the page, and appears to have all the same reactions as Chrome.
      singulars
      1. POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
      1. USBrendan Kenny
    2. COYep exactly, it should add a plop in the div below the map when clicking on the grey polygon. I am running OS X 10.7.3, with Safari 5.1.4. I will try to test on older versions of Safari, if I can find one, and update the question with the results.
      singulars
      1. POGoogle Maps API v3: Custom overlay with canvas drawing not receiving events in safari
      1. USvicould
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload