Search code examples
javascripthtmlbing-mapsshapesvirtual-earth

How to Clear entire Shape Layer in Microsoft VirtualEarth 6.3 using pure javascript?

The code snippet shown below (HTML5/javascript) loads Microsoft Bing Map (VirtualEarth 6.3), then adds two Shape layers and two sample Pushpins, one per each layer.

QUESTION: What pure javascript function (or solution) to use in order to clear all pushpins from just the 1st layer keeping the other layer intact? Note: clear layer function should be implemented without deleting the entire layer.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bing VE Map w/layers</title>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
    <script type="text/javascript">

        // VE map
        var _map;
        // 1st shape layer
        var _layer1 ;
        // 2nd shape layer
        var _layer2;

        function MapLoad() {

            // load map
            _map = new VEMap('Map');
            _map.LoadMap();

            // center point (Columbus Circle NY)
            var _center = new VELatLong(40.7681, -73.9819);

            // set center point and initial zoom level
            _map.SetCenterAndZoom(_center, 12);

            // set Map style
            _map.SetMapStyle(VEMapStyle.Shaded);

            // add 1st shape layer1 to Map obj
            _layer1 = new VEShapeLayer()
            _map.AddShapeLayer(_layer1);

            // add 2nd shape layer2 to Map obj
            _layer2 = new VEShapeLayer()
            _map.AddShapeLayer(_layer2);

            // add pushpin to layer1
            var _pushpin1 = new VEShape(VEShapeType.Pushpin, _center);
             _layer1.AddShape(_pushpin1);

            // add pushpin (Apple Store on 5th) to layer2
             var _pushpin2 = new VEShape(VEShapeType.Pushpin, new VELatLong(40.7639, -73.9725));
             _layer2.AddShape(_pushpin2);


            // QUESTION: HOW TO CLEAR ALL SHAPES FROM LAYER 1, (BUT NOT DELETING THE ENTIRE LAYER)?
        }
    </script>

</head>
<body onload="MapLoad();">
    <div id="Map" style="position:absolute; top:100px; height:90%; width:100%;"></div>
</body>
</html>
Solution

  • You could use the dedicated method DeleteAllShapes() of the VEShapeLayer class, see the MSDN:

    https://msdn.microsoft.com/en-us/library/bb412473.aspx

    See the example: 

    // Delete all shapes within the layer at the selected index.
function DeleteAllShapes()
{
  layer = map.GetShapeLayerByIndex(selIndex);
  layer.DeleteAllShapes();
  IndexChanged(selIndex);
}

    Also, I would recommend to use AJAX v7.0 instead of v6.3 since it's now deprecated and due to be out of support on November 30, 2016.