Chris Pietschmann

husband, father, hacker, entrepreneur, futurist, innovator, autodidact

NAVIGATION - SEARCH

Virtual Earth: Center Map to Shape during OnClick Event

Here's a short, simple example of wiring up Virtual Earth to zoom/pan the map to showing the best fit to center on a specific Shape object that is clicked on by the user.

This example works in both 2D and 3D map modes.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;


function GetMap()
{
    map = new VEMap('myMap');
    map.LoadMap();



    /// Attach a handler to the Maps OnClick Event


    map.AttachEvent("onclick", Map_OnClick);


 


    /// Add a couple Pushpin Shapes to the map


    var shape1 = new VEShape(VEShapeType.Pushpin, new VELatLong(49.74999, -99.71));
    shape1.SetTitle("Shape 1");
    shape1.SetDescription("Test Shape 1");
    map.AddShape(shape1);


    var shape2 = new VEShape(VEShapeType.Pushpin, new VELatLong(39.74999, -96.71));
    shape2.SetTitle("Shape 2");
    shape2.SetDescription("Test Shape2");
    map.AddShape(shape2);


    /// Add a Polygon Shape to the map


    var shape3points = new Array();
    shape3points[shape3points.length] = new VELatLong(37.74999, -99.71);
    shape3points[shape3points.length] = new VELatLong(37.74999, -110.71);
    shape3points[shape3points.length] = new VELatLong(32.74999, -111.71);
    var shape3 = new VEShape(VEShapeType.Polygon, shape3points);
    shape3.HideIcon(); // Hide the Polygons Icon Image
    map.AddShape(shape3);


}


function Map_OnClick(e)
{
    // Check if a Shape was clicked
    if (e.elementID != null)
    {
        // Get a reference to the Shape that was clicked
        var shape = map.GetShapeByID(e.elementID);


        // Set the MapView to the Shapes collection of VELatLong points
        // This will zoom and pan the map to the best view to show all the points of this Shape
        map.SetMapView(shape.GetPoints());
    }
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>

blog comments powered by Disqus