Reimers.dk

.NET, AJAX and Google APIs brought together
Welcome to Reimers.dk Sign in | Join | Help
in Search

Jacob Reimers Weblog

Dynamic Sidebar

While working on the next revision of the Google Maps .NET Control I have reworked the Sidebar control so it is also does not use Viewstate anymore. This means that it can be updated in true AJAX fashion. I will get into the howto when version 3.3.2.0 is actually released, but I have made a small demo where you can see it in action. In the demo when a user clicks a point on the map the point is automatically reverse geocoded (this may take a second or two - so if you notice a delay be patient) and a marker is plotted at the nearest town. The sidebar is updated at the same time to show all the markers.

The code behind is shown below. As you can see the only action needed in the callback click handler is to call the RedrawSidebar() method. What you don't see is that the markers are draggable. So if you drag a marker the sidebar will update its handler to reflect the change in position, meaning that it will center on the new position of the marker and not the position when it was created.

C#

protected void Page_Load(object sender, EventArgs e)
{
    GMap.GoogleKey = ConfigurationManager.AppSettings["MapKey"];
    GMap.Click += new Reimers.Map.ClickHandler(GMap_Click);
    Sidebar.Click += new Reimers.WebControls.SidebarHandler(Sidebar_Click);
    Sidebar.AlternatingItemStyle.BackColor = System.Drawing.Color.Silver;
    if (!Page.IsPostBack || !Page.IsCallback)
    {
        Sidebar.Map = "GMap";
        Sidebar.HeaderText = "Locations";            
        GMap.Controls.Add(new Reimers.Map.Controls.GoogleLargeMapControl("lmc"));
        //Removed because they are not needed.
        GMap.Options.MapTypes.RemoveAt(2);
        GMap.Options.MapTypes.RemoveAt(1);
    }
}
 
string Sidebar_Click(GoogleOverlay Item)
{
    return GMap.SetCenter(Item.Bounds.Center);
}
 
void GMap_Click(Reimers.Map.GoogleMap Map, Reimers.Map.GoogleLatLng Position, ref string MapCommand)
{
    //Perform reverse geocoding on clicked point.
    Reimers.Map.Geocoding.Location location = 
              Reimers.Map.Geocoding.GoogleGeocoder.ReverseGeocode(Position);
    //Plot a marker if successful
    if (location.Point != null)
    {
        GoogleMarker marker = new GoogleMarker(
                        location.Address.City,
                        location.Point,
                        new GoogleMarkerOptions(location.Address.City, true, false));
        marker.Options.UpdateAfterDrag = true;
        marker.ClientSideHandlers.OnClick = 
                        marker.OpenInfoWindowHTML(
                                 Map,
                                 location.Address.ToString(),
                                 new GoogleInfoWindowOptions(true));
        MapCommand = Map.AddOverlay(marker, true) + Sidebar.RedrawSidebar();
    }
}

While the demo is gimmicky it shows how easy it is to create constantly updated data. See the demo.

Published 16. januar 2007 07:16 by jjrdk
Filed under: ,

Comments

 

brandyr said:

Hi Jacob,

I tried to look at the demo but the link is broken.

BR

Ralf

januar 16, 2007 08:03
 

jjrdk said:

The link is fixed now, but until the cache updates the link is http://www.reimers.dk/demos/dynamicsidebardemo.aspx

januar 16, 2007 08:10
 

Deonisio said:

Hi, Jacob

Since I'm not familiar with C#, could you provide VB.NET versions as well?

Thanks Alots

Deonisio Dos Santos

juli 14, 2007 23:07
Anonymous comments are disabled