Use AddCustomLayer with Web.Maps.VE v3.0 To Add "Custom" Pushpins

by Chris Pietschmann 16. October 2009 06:55

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 = '';
    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(new VELatLong(47.6357835908649, -122.376708984375)); // Seattle
        customPoints.push(new VELatLong(51.5087424588033, -0.175781249999995)); // London


        // 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;

    function RenderCustomPoints() {
        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");
   = "absolute";
   = "0px";
   = "0px";
   = 1000;

            $find("<%=Map1.ClientID %>").AddCustomLayer(myCustomLayer);


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.

Currently rated 2.0 by 6 people

  • Currently 2/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: ,

Tutorials | Web.Maps.VE v3.0

Comments are closed