Canvas Pushpins

Author: Ricky Brundritt

Category: Layout

Module Size: 3 kb (minified 1 kb)

Original Source: TBA

Dependencies: Requires browser to support HTML5 canvas. use excanvas to support IE7/8


This module wraps the standard pushpin class to create a new HTML5 Canvas pushpin class. There are a lot of cool and interesting things we can do with the canvas that would require a lot more work using traditional HTML and JavaScript. By using this module tasks such as rotating a pushpin or programmatically changing the color can be easily achieved.

Screenshots of samples:




Last edited Feb 8, 2014 at 10:38 PM by rbrundritt, version 6


cheznoid Dec 16, 2013 at 7:48 PM 
I tried adding the above comment about moving the new line of code to the page linked above, but kept getting an error, so couldn't add my comment there. :-(

cheznoid Dec 16, 2013 at 7:46 PM 
I figured out the answers to the above questions:

- Text for the pin is generated by adding a call to context.strokeText(pin.getText(), x, y) in the CanvasPushpin's img.onload implementation.

- See the comments at this page for what needs to be added for the click event handler to work: I still had a problem after implementing that solution - the last pin added would not respond to click events. That problem was resolved by moving the the new line added (containing .find('.MapPushpinBase')) AFTER the canvasLayer.push(pin) line. Once that was done, all pushpins responded to the click event.

cheznoid Dec 14, 2013 at 8:36 AM 
Once the new CanvasPushpin is created, I call setOptions on the returned Microsoft.Maps.Pushpin to set its text, and also call Microsoft.Maps.Events.addHandler() to add a click handler for the pin. However, when the pin is rendered there is no text on the pin, and my click event handler isn't called when the pin is clicked. Am I doing something wrong, or or those capabilities lost with the CanvasPushpin class?