The "VEMap.AddCustomLayer" method in the Bing Maps JavaScript Map Control can be used to add a DIV element to the Map, and have that same DIV element scroll/pan around the Map automatically. Even though Web.Maps.VE doesn't support using the "AddCustomLayer" method from within server-side code, you can still use a little bit of JavaScript on your page to hook into Web.Maps.VE to add any Custom Layers you need.
I've had a few requests for sample code on how to use the "VEMap.AddCustomLayer" method with Web.Maps.VE, so here's a full example that adds a custom layer, and a couple "custom" pushpins. Just copy the below code into an ".aspx" page and hit Run.
<asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
<Simplovation:Map runat="server" ID="Map1" OnClientMapLoaded="Map1_ClientMapLoaded" Width="800"></Simplovation:Map>
<div id="myCustomLayer"></div>
<script type="text/javascript">
var myCustomLayer = null;
var customPoints = []; // same as "new Array()"
var previousZoom = null;
var pinImage = 'http://dev.virtualearth.net/mapcontrol/v6.2/i/bin/6.2.2008082210001.41/pins/poi_usergenerated.gif';
var pinXOffset = -25 / 2; //width of pushpin image divided by 2
var pinYOffset = -30; //height of pushpin image since we want bottom point of image to point to LatLong
// The "OnClientMapLoaded" Event is fired when the Map is finished loading on the page
function Map1_ClientMapLoaded(sender) {
// sender = The Client-Side Web.Maps.VE object that raised the event
// Add some custom pushpin points to the custom layer
customPoints.push(sender.GetCenter());
customPoints.push(new VELatLong(47.6357835908649, -122.376708984375)); // Seattle
customPoints.push(new VELatLong(51.5087424588033, -0.175781249999995)); // London
RenderCustomPoints();
// Attach Event Handler to Redraw Custom Points when needed
sender.AttachEvent("onviewchange", Map1_RedrawEventHandler);
sender.AttachEvent("onendzoom", Map1_RedrawEventHandler);
sender.AttachEvent("onobliquechange", Map1_RedrawEventHandler);
}
function Map1_RedrawEventHandler(sender, e) {
var currentZoom = $find("<%=Map1.ClientID %>").GetZoomLevel();
if (e.eventName !== "onviewchange" || previousZoom != currentZoom) {
previousZoom = currentZoom;
RenderCustomPoints();
}
}
function RenderCustomPoints() {
InitializeCustomLayer();
var map = $find("<%=Map1.ClientID %>"); // Get reference to the Web.Maps.VE Client-Side Object
var s = []; // same as "new Array()"
var pixel;
// Loop through all custom points and create IMG tags
for (var i = 0; i < customPoints.length; i++) {
// Figure out the Pixel coordinate that matches the custom point lat/long
pixel = map.LatLongToPixel(customPoints[i]);
// create the IMG tag
s.push("<img src='" + pinImage + "' style='position:absolute; left: " + (pixel.x + pinXOffset) + "px; top: " + (pixel.y + pinYOffset) + "px;' />");
}
// Add all the IMG tags to the Custom Layer DIV
myCustomLayer.innerHTML = s.join('');
}
function InitializeCustomLayer() {
if (myCustomLayer === null) {
// Add Custom Layer to Map
myCustomLayer = document.createElement("div");
myCustomLayer.style.position = "absolute";
myCustomLayer.style.top = "0px";
myCustomLayer.style.left = "0px";
myCustomLayer.style.zIndex = 1000;
$find("<%=Map1.ClientID %>").AddCustomLayer(myCustomLayer);
}
}
</script>
Conclusion
This is yet again one of the many ways that you can use JavaScript to enhance the already powerful Web.Maps.VE control to customize it to fit the exact needs of your application.
If you have any questions about using Web.Maps.VE, please post them to the Support Forums.