Register  | Login
Products  |  Screencasts  |  Download  |  Forums  |  Blog  |  Buy Now  |  Contact Us

Zooming in after adding a set of pushpins

Last post 10/15/2008 2:56:50 PM by ajay333. 11 replies. << Back to Web.Maps.VE v1.0 General
7/31/2008 4:15:43 PM
ajay333

Zooming in after adding a set of pushpins

How do I zoom in as much as possible to show all the pushpins that I have added to the map? Thank you.

AJ
8/1/2008 3:47:29 AM
Chris Pietschmann

Re:Zooming in after adding a set of pushpins

To "Show Best Fit" on the Map, you need to add a little JavaScript to the Page. This functionality isn't built into Web.Maps.VE directly, or even in the Virtual Earth API itself. You need to call the VEMap.SetMapView method.

Here's a JavaScript method that implements a "Best Fit" on the map to set the zoom and center of the map to show all Shapes that are currently plotted. Just add this somewhere in your page:

<script type="text/javascript">
    function MapShowBestFit()
    {
        var map = $find("<%=Map1.ClientID%>");
        //This code will center the map on all the shapes that are plotted
        var locations = new Array();
        for(var a = 0; a < map.get_Map().GetShapeLayerCount(); a++)
        {
            for(var b = 0; b < map.get_Map().GetShapeLayerByIndex(a).GetShapeCount(); b++)
            {
                Array.add(locations, map.get_Map().GetShapeLayerByIndex(a).GetShapeByIndex(b));
            }
        }
        if (locations.length != 0)
            map.get_Map().SetMapView(locations);
    }
</script>

And, Here's the small amount of code you need to execute this JavaScript method from within your Server-Side Map Event Handler:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "showbestfit", "MapShowBestFit();", true);
8/4/2008 1:59:14 PM
ajay333

Re:Zooming in after adding a set of pushpins

Where exactly do I write this pice of code.  Thank you.

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "showbestfit", "MapShowBestFit();", true);

My code behind looks like this.

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnResults_Click(object sender, EventArgs e)

{

         List<MapPoint> mapPoints = TestBL.GetMapPoints(txtNumberOfResults.Text);

         Map1.Shapes.Clear();

         foreach (MapPoint mapPoint in mapPoints)

            {

            Simplovation.Web.Maps.VE.Shape s =          new       Simplovation.Web.Maps.VE.Shape      (new       Simplovation.Web.Maps.VE.LatLong(Convert.ToDouble(mapPoint.Latitude), Convert.ToDouble(mapPoint.Longitude)));

            s.Title = mapPoint.Title.ToString();

            s.Description = mapPoint.Description.ToString();

            Map1.Shapes.Add(s);

            }

}
8/4/2008 3:01:14 PM
ajay333

Re:Zooming in after adding a set of pushpins

and my aspx page looks like this:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Mapping.aspx.cs" Inherits="FNMWatchListDashboard.Mapping" Title="Untitled Page" %>

 

<%@ Register Assembly="Simplovation.Web.Maps.VE" Namespace="Simplovation.Web.Maps.VE"

TagPrefix="Simplovation" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 

<script type="text/javascript">

function MapShowBestFit()

{

var map = $find("<%=Map1.ClientID%>");

//This code will center the map on all the shapes that are plotted

var locations = new Array();

for(var a = 0; a < map.get_Map().GetShapeLayerCount(); a++)

{

for(var b = 0; b < map.get_Map().GetShapeLayerByIndex(a).GetShapeCount(); b++)

{

Array.add(locations, map.get_Map().GetShapeLayerByIndex(a).GetShapeByIndex(b));

}

}

if (locations.length != 0)

map.get_Map().SetMapView(locations);

}

</script>

<asp:TextBox ID="txtNumberOfResults" runat="server"></asp:TextBox>

<asp:Button ID="btnResults" runat="server" Text="Plot Map points" OnClick="btnResults_Click" />

<asp:ScriptManager runat="server" ID="ScriptManager1">

</asp:ScriptManager>

<simplovation:map runat="server" id="Map1" width="900px" height="650px" cssclass="map" />

</asp:Content>

 

 

Thank you very much!
8/7/2008 12:08:59 AM
Chris Pietschmann

Re:Zooming in after adding a set of pushpins

Just add it to the end of your OnClick event handler. Like this:

protected void btnResults_Click(object sender, EventArgs e)
{

         List<MapPoint> mapPoints = TestBL.GetMapPoints(txtNumberOfResults.Text);

         Map1.Shapes.Clear();

         foreach (MapPoint mapPoint in mapPoints)

            {

            Simplovation.Web.Maps.VE.
Shape s =          new       Simplovation.Web.Maps.VE.Shape      (new       Simplovation.Web.Maps.VE.LatLong(Convert.ToDouble(mapPoint.Latitude), Convert.ToDouble(mapPoint.Longitude)));

            s.Title = mapPoint.Title.ToString();

            s.Description = mapPoint.Description.ToString();

            Map1.Shapes.Add(s);

            }

            ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "showbestfit", "MapShowBestFit();", true);

}
10/8/2008 3:06:36 PM
ajay333

Re:Zooming in after adding a set of pushpins

Hi Chris,

Thank you! I was busy with other projects so did not get time to get back to this. The javascript function is firing but

var map = $find("<%=Map1.ClientID%>"); is returning null. I checked my map declaration, it's fine. I declared it as

<Simplovation:Map runat="server" ID="Map1" Width="715px" Height="500px" CssClass="map" />

with

<%@ Register Assembly="Simplovation.Web.Maps.VE" Namespace="Simplovation.Web.Maps.VE"

TagPrefix="Simplovation" %> at the very top.

I am now using Web.Maps.VE 2.0. Thank you in advance!
10/8/2008 3:22:21 PM
ajay333

Re:Zooming in after adding a set of pushpins

Hi Chris:

I replaced the line var map = $find("ctl00_ContentPlaceHolder1_Map1"); with

var map = document.getElementById("ctl00_ContentPlaceHolder1_Map1"); and var map = object now. So it's returning an object now and not an null. But map.get_Map().GetShapeLayerCount() is throwing an Object doesn't support this property or method error. I did a QuickWatch on the map object and get_Map() method does not exist.

I am using Web.Maps.VE 2.0 now. Thanks again.

AJ
10/8/2008 3:25:12 PM
ajay333

Re:Zooming in after adding a set of pushpins

I meant I replaced the line var map = $find("<%=Map1.ClientID%>");  with var map = document.getElementById("<%=Map1.ClientID%>");
10/15/2008 2:05:34 PM
Chris Pietschmann

Re:Zooming in after adding a set of pushpins

You'll need to use $find("<%=Map1.ClientID%>") to get a reference to the control. This is the ASP.NET AJAX method that gets a control with the given ID in the page, otherwise you are only retrieving the HTML element that contains the control if you use getElementById or $get (which is the same thing).

The call to $find("<%=Map1.ClientID%>") should work as expected. The only other question I have is, where do you have the call to $find("<%=Map1.ClientID%>") placed? It must be placed in the .aspx page, since that is the only way you'll be able to get the ClientID for the Map control. If you place the call to $find in a .js file, it wont work since it'll actually be looking for a control with the literal name of "<%=Map1.ClientID%>".
10/15/2008 2:20:13 PM
ajay333

Re:Zooming in after adding a set of pushpins

Thank you for responding.

That piece of code is in the aspx file as shown:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Mapping.aspx.cs"

Inherits="FNMWatchListDashboard.Mapping" Title="Fannie Mae WatchList Dashboard - Mapping" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<%@ Register Assembly="Simplovation.Web.Maps.VE" Namespace="Simplovation.Web.Maps.VE"

TagPrefix="Simplovation" %>

<%@ Register Assembly="Simplovation.Web.Maps.VE" Namespace="Simplovation.Web.Maps.VE.Extenders"

TagPrefix="MapExtenders" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server" />

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:ScriptManager runat="server" ID="ScriptManager1" />

<script type="text/javascript">

function MapShowBestFit()

{

var map = $find("<%=Map1.ClientID%>");

//This code will center the map on all the shapes that are plotted

var locations = new Array();

for(var a = 0; a < map.get_Map().GetShapeLayerCount(); a++)

{

for(var b = 0; b < map.get_Map().GetShapeLayerByIndex(a).GetShapeCount(); b++)

{

Array.add(locations, map.get_Map().GetShapeLayerByIndex(a).GetShapeByIndex(b));

}

}

if (locations.length != 0)

map.get_Map().SetMapView(locations);

}

</script>

/*

Other Controls on the page

*/

<div id="mapping">

<asp:Label ID="lblMapPointCount" runat="server"></asp:Label>

<Simplovation:Map runat="server" ID="Map1" Width="636px" Height="445px" CssClass="map" Zoom="3" OnClick="Map1_OnClick" />

</div>

</asp:Content>

 

And the server side code looks like this

//Plot the points

int mapPointCount = 0;

Map1.Layers.Clear();

foreach (MapPoint mapPoint in mapPoints)

{

if (mapPoint.Latitude != DBNull.Value && mapPoint.Longitude != DBNull.Value)

{

Simplovation.Web.Maps.VE.Shape s = new Simplovation.Web.Maps.VE.Shape(new Simplovation.Web.Maps.VE.LatLong(Convert.ToDouble(mapPoint.Latitude), Convert.ToDouble(mapPoint.Longitude)));

s.Title = mapPoint.Title == null ? String.Empty : mapPoint.Title.ToString();

s.Description = mapPoint.Description == null ? String.Empty : mapPoint.Description.ToString();

Map1.AddShape(s); mapPointCount++;

}

}

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "showbestfit", "MapShowBestFit();", true);

 

And when this code is executed, I am getting a javascript error: Microsoft JScript runtime error: 'null' is null or not an object. I placed a debugger in the javascript code and var map = $find("<%=Map1.ClientID%>"); ie., 

var map = $find("ctl00_ContentPlaceHolder1_Map1");

 line returns a null, so it blows on map.get_Map().

I am using .NET 3.5 Framework and Web.Maps.VE 2.0 version now.

Thank you in advance.

 
10/15/2008 2:40:53 PM
Chris Pietschmann

Re:Zooming in after adding a set of pushpins

Since you are using RegisterStartupScript, it's possible the call to $find is being executed before the Map is actually instantiated within the page. Are you calling RegisterStartupScript on the initial page load? Or are you only calling it during Async Postbacks?
10/15/2008 2:56:50 PM
ajay333

Re:Zooming in after adding a set of pushpins

I am calling it on the initial page load.
Terms of Use  |  Contact Us  |  Buy Now
Copyright © 2008 Simplovation LLC. All rights reserved.