Custom Overlay on Bing Maps

by darcon77

HTML

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='myMap' style="position:relative;width:800px;height:600px;"></div>

CSS

.white{font-family:Arial;font-size:12px;color:black;}
.d1{float:left; height:12px;width:12px; padding:6px; display:block;}
.d3{float:left; height:24px;width:12px; display:block;}
.d2{float:left; height:16px;white-space:nowrap; padding:4px;}
.d2{background:url(http://www.silentpassenger.com/Images/status/label-back-dir-w-m.png) repeat-x;}
.d3{background:url(http://www.silentpassenger.com/Images/status/label-back-dir-w-r.png) no-repeat;}

JavaScript

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

var ImageOverlay;

var canvasIdNumber = 0;

function generateUniqueID() {
    var canvasID = 'strechedImg' + canvasIdNumber;
    canvasIdNumber++;

    if (window[canvasID]) {
        return generateUniqueID();
    }

    return canvasID;
}

// map - Microsoft.Maps.Map object
// imageURL - String URL to where the image is located
// boundingBox - Microsoft.Maps.LocationRect object
ImageOverlay = function (map, vehicleOptions, location) {
    var imageURL = {
        "10":"http://www.silentpassenger.com/Images/status/lostcontact.gif",
        "20":"http://www.silentpassenger.com/Images/status/speeding.gif",
        "30":"http://www.silentpassenger.com/Images/status/speedguage.gif",
        "40":"http://www.silentpassenger.com/Images/status/moving.gif",
        "50":"http://www.silentpassenger.com/Images/status/stopless5.gif",
        "60":"http://www.silentpassenger.com/Images/status/stop5-60.gif",
        "70":"http://www.silentpassenger.com/Images/status/stop60.gif",
        "80":"http://www.silentpassenger.com/Images/status/stop7days.gif",
        "90":"http://www.silentpassenger.com/Images/status/lowbattery.gif"
    };
    
    var _basePushpin = new Microsoft.Maps.Pushpin(location);
    var _opacity = 1;
    var _id = generateUniqueID();

    function render() {
        var size = calculateSize();
        
        var content="<div class='ui-helper-clearfix white'><div class='d1' style='background:url("+leftback()+") no-repeat;'><img src='"+imageURL[vehicleOptions.statusId]+"'/></div><div class='d2'>"+vehicleOptions.name+"</div><div class='d3'></div></div>";

        var pushpinOptions = {
            width: size.width,
            height:...