Bing Maps 8 Programmatically Making Pushpins

I’ve been looking at a pre-release version of the Bing Maps 8 library. One way to display pushpins on a map is to predefine a boatload of .png images and then use them. I don’t like this approach mostly because I’m much more of a developer than an artist.

I investigated creating pushpins programmatically. There are two main approaches in Bing Maps 8. You can create a pushpin icon using an HTML5 canvas (think a mini drawing area), or you can use SVG (scalable vector graphics).

In my demo, I place a default pushpin at the center of the map. It’s purple and looks like it has a radius of about 8 pixels. Then I programmatically generate two HTML5 canvas red pushpins with radius 6, and place them above and to the left of center.

Then I programmatically generate two SVG green pushpins with radius 6, and place them below and to the right of center.


The key code for the canvas approach is:

function CreateCvsDot(radius, clr) {
  var c = document.createElement('canvas');
  var ctx=c.getContext("2d");
  // arc(cx, cy  r  sa, ea)
  ctx.arc(radius,radius, radius, 0, 2*Math.PI);  
  ctx.fillStyle = clr;

The canvas approach is like drawing and returning the drawn object.

The key code for the SVG approach is:

function CreateSvgDot(radius, clr) {
  var s = '<svg xmlns=""';
  s += ' width="' + radius * 2 +'"';
  s += ' height="' + radius * 2 + '"';
  s += '>';
  s += '<circle cx="' + radius + '"';
  s += ' cy="' + radius + '"';
  s += ' r="' + radius + '"';
  s += ' fill="' + clr + '"';
  s += ' /></svg>';

The SVG approach generates a long string. Both techniques require roughly the same programmer effort. Which approach is better probably depends on a particular scenario with regards to performance (which I haven’t investigated yet).


This entry was posted in Machine Learning, Miscellaneous. Bookmark the permalink.