Chris Pietschmann

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


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" "">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var map = null;

function GetMap()
    map = new VEMap('myMap');

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

    var shape2 = new VEShape(VEShapeType.Pushpin, new VELatLong(39.74999, -96.71));
    shape2.SetTitle("Shape 2");
    shape2.SetDescription("Test 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


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
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>

blog comments powered by Disqus