Simplovation Blog

Use AddCustomLayer with Web.Maps.VE v3.0 To Add "Custom" Pushpins

support.nospam@nospam.simplovation.com (crpietschmann) — Fri, 16 Oct 2009 06:55:00 -0500

The "VEMap.AddCustomLayer" method in the Bing Maps JavaScript Map Control can be used to add a DIV element to the Map, and have that same DIV element scroll/pan around the Map automatically. Even though Web.Maps.VE doesn't support using the "AddCustomLayer" method from within server-side code, you can still use a little bit of JavaScript on your page to hook into Web.Maps.VE to add any Custom Layers you need.

I've had a few requests for sample code on how to use the "VEMap.AddCustomLayer" method with Web.Maps.VE, so here's a full example that adds a custom layer, and a couple "custom" pushpins. Just copy the below code into an ".aspx" page and hit Run.

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

<Simplovation:Map runat="server" ID="Map1" OnClientMapLoaded="Map1_ClientMapLoaded" Width="800"></Simplovation:Map>

<div id="myCustomLayer"></div>

<script type="text/javascript">
    var myCustomLayer = null;
    var customPoints = []; // same as "new Array()"

    var previousZoom = null;

    var pinImage = 'http://dev.virtualearth.net/mapcontrol/v6.2/i/bin/6.2.2008082210001.41/pins/poi_usergenerated.gif';
    var pinXOffset = -25 / 2; //width of pushpin image divided by 2
    var pinYOffset = -30;     //height of pushpin image since we want bottom point of image to point to LatLong

    // The "OnClientMapLoaded" Event is fired when the Map is finished loading on the page
    function Map1_ClientMapLoaded(sender) {
        // sender = The Client-Side Web.Maps.VE object that raised the event

        // Add some custom pushpin points to the custom layer
        customPoints.push(sender.GetCenter());
        customPoints.push(new VELatLong(47.6357835908649, -122.376708984375)); // Seattle
        customPoints.push(new VELatLong(51.5087424588033, -0.175781249999995)); // London

        RenderCustomPoints();

        // Attach Event Handler to Redraw Custom Points when needed
        sender.AttachEvent("onviewchange", Map1_RedrawEventHandler);
        sender.AttachEvent("onendzoom", Map1_RedrawEventHandler);
        sender.AttachEvent("onobliquechange", Map1_RedrawEventHandler);
    }

    function Map1_RedrawEventHandler(sender, e) {
        var currentZoom = $find("<%=Map1.ClientID %>").GetZoomLevel();
        if (e.eventName !== "onviewchange" || previousZoom != currentZoom) {
            previousZoom = currentZoom;

            RenderCustomPoints();
        }
    }

    function RenderCustomPoints() {
        InitializeCustomLayer();

        var map = $find("<%=Map1.ClientID %>"); // Get reference to the Web.Maps.VE Client-Side Object
        var s = []; // same as "new Array()"
        var pixel;

        // Loop through all custom points and create IMG tags
        for (var i = 0; i < customPoints.length; i++) {
            // Figure out the Pixel coordinate that matches the custom point lat/long
            pixel = map.LatLongToPixel(customPoints[i]);
            // create the IMG tag
            s.push("<img src='" + pinImage + "' style='position:absolute; left: " + (pixel.x + pinXOffset) + "px; top: " + (pixel.y + pinYOffset) + "px;' />");
        }

        // Add all the IMG tags to the Custom Layer DIV
        myCustomLayer.innerHTML = s.join('');
    }

    function InitializeCustomLayer() {
        if (myCustomLayer === null) {
            // Add Custom Layer to Map
            myCustomLayer = document.createElement("div");
            myCustomLayer.style.position = "absolute";
            myCustomLayer.style.top = "0px";
            myCustomLayer.style.left = "0px";
            myCustomLayer.style.zIndex = 1000;

            $find("<%=Map1.ClientID %>").AddCustomLayer(myCustomLayer);
        }
    }
</script>

Conclusion

This is yet again one of the many ways that you can use JavaScript to enhance the already powerful Web.Maps.VE control to customize it to fit the exact needs of your application.

If you have any questions about using Web.Maps.VE, please post them to the Support Forums.

Web.Maps.VE v3.0 Released!

support.nospam@nospam.simplovation.com (crpietschmann) — Wed, 26 Aug 2009 18:46:00 -0500

Today we are proud to announce that we have just released Web.Maps.VE v3.0!

Download FREE Edition!

One of the most notable things about this new version release is that it's completely FREE to use for Non-Commercial purposes.

There are a few new things in this latest release, but the most significant are the following performance updates:

Microsoft CDN (Content Delivery Network) Support Added. This helps improve the Bing Maps content delivery speed by up to 82%
JavaScript Performance Optimizations. All the JavaScript code internally within the control has been optimized to increase the overall speed of the Web.Maps.VE Map controls functionality.

Check out the following link to see what has all been included in this release:
https://simplovation.com/page/webmapsve30/roadmap.aspx

Also, this new version release is a completely FREE upgrade to all existing customers who have already purchased Web.Maps.VE v2.0. If you have previously purchased v2.0, then there is nothing required to obtain your v3.0 license other than going to the "My Licenses" page to download the DLL and License Activation File. If for some reason you have trouble obtaining your Free Upgrade to v3.0, please let us know and we'll get it activated as soon as possible.

Thank you for your continued support in Web.Maps.VE and Simplovation!

Chris Pietschmann
Owner, Simplovation LLC
Microsoft MVP - Windows Live Platform
http://simplovation.com
http://pietschsoft.com

Web.Maps.VE v2.0 with AjaxControlToolkit ModalPopup Extender Demo

support.nospam@nospam.simplovation.com (crpietschmann) — Mon, 03 Aug 2009 13:06:00 -0500

Since both Web.Maps.VE v2.0 and the AjaxControlToolkit are both built on top of ASP.NET AJAX, they compliment each other very well when used together to easily create some very dynamic user experiences. One of the requests we've gotten a few times is to give an example of how to show a Popup over the Map when a user clicks on a specific pushpin. This example demonstrates just such an example using both Web.Maps.VE v2.0 and the AjaxControlToolkit's ModalPopupExtender control.

Download Source Code: WebMapsVE_2.0_PopupWindowDemo.zip (753.58 kb)

This demo website also allows you to easily manipulate the Pushpins/Shapes on the Map in the following ways:

Left Click an Existing Pushpin to Edit it's Title and Description using a Popup Dialog
Left Click to Add a New Pushpin and enter the Pushpins Title and Description using a Popup Dialog
Hold the Control (Ctrl) Key while Left Clicking on an Existing Pushpin to Delete it from the Map

The total source code for this example is pretty short, and it demonstrates how to perform the above mentioned actions all from within Server-Side .NET code. There is actually No JavaScript written to wire everything up with this example.

Also, once you download this demo website, you'll need to do the following 2 things before you can Hit Run within Visual Studio:

Download Web.Maps.VE v2.0 from http://simplovation.com/download
Copy the "Simplovation.Web.Maps.VE.dll" file into the "Bin"
folder within this demo website.

Simplovation Forums Updated to Use jHtmlArea

support.nospam@nospam.simplovation.com (crpietschmann) — Tue, 28 Jul 2009 16:34:00 -0500

We just updated the Simplovation Support Forums to use the jHtmlArea HTML WYSIWYG Editor instead of FreeTextBox for posting new threads and replies. The jHtmlArea editor is written on top of jQuery and is a really lightweight HTML WYSIWYG editor that turns any HTML TextArea into a nice HTML WYSIWYG Editor with only one line of code.

Bing Maps for Enterprise and Web.Maps.VE ASP.NET AJAX Virtual Earth Server Control

support.nospam@nospam.simplovation.com (crpietschmann) — Fri, 29 May 2009 13:46:00 -0500

Yesterday, Microsoft announced that its Live Search, Live Search Maps and Virtual Earth products will be rebranded to be under the "Bing" product name / branding. Live Search Maps will now be called Bing Maps, and Microsoft Virtual Earth will now be called "Bing Maps for Enterprise."

How does this relate to Simplovation and Web.Maps.VE?

Simply put, the transition from "Virtual Earth" to "Bing Maps for Enterprise" will be seamless. You will not need to download any updates from us to keep your maps working after the branding has changed. The Bing Maps for Enteprise JavaScript API will be downloaded from the existing URL that it is toda; the only difference is they will be changing the logo displayed on the map from "Virtual Earth" to say "Bing Maps" or "Bing Maps for Enterprise".

Also, we will not be making any breaking changes to Web.Maps.VE like changing the namespaces or product name. Web.Maps.VE v1.0 and v2.0 will remain "Web.Maps.VE" and the namespace will remain "Simplovation.Web.Maps.VE."

More Information:

Rebranding Microsoft Virtual Earth To...

Web.Maps.VE v2.00.04 Update Released

support.nospam@nospam.simplovation.com (crpietschmann) — Tue, 19 May 2009 20:07:00 -0500

Today we released the Web.Maps.VE v2.00.04 update release. This release includes a few new features that have been asked for by our customers, along with a couple of bug fixes.

Download Here

Here's a list of changes made in this update release:

New Features:

MiniMapExtender Control JavaScript API - Added "SetHorizontalOffset" and "SetVerticalOffset" methods to the MiniMapExtender Control's Client-Side JavaScript API. Their usage is mentioned in the "Using the MiniMapExtender" Tutorial.
Easily Resize the Map from Server-Side .NET or Client-Side JavaScript code - Added the capability for the Map controls Height and Width to get passed to/from the client and server during an asynchronous postback. Now when you change the Height or Width it will get reflected in the Map on the client. This release also added the "GetWidth" and "GetHeight" JavaScript API methods and fixed the "Resize" method so you can eaily and correctly resize the Map from within JavaScript. Both Server-Side and Client-Side examples have been added to the Sample Website.
Color.FromHtml Method - The FromHtml static/shared method has been added to the Simplovation.Web.Maps.VE.Color object to allow for simple conversion from an HTML Color representation to the equivalent Simplovation.Web.Maps.VE.Color representation.

Fixes:

Removing Multiple ShapeLayers during Async Postback - An issue with using the Map.Layers.Remove(), Map.Layers.RemoveAt() and Map.Layers.RemoveAll() methods to remove multiple shape layers during the same asynchronous postback was fixed.
Rare Exception Thrown During Map.OnPreRender during Asynchronous Postbacks - Added an extra check that will reload the License file in case it happens to be Null during the OnPreRender method. Added some extra checks that will throw an exception with a meaningful message if the Page.Header happens to be Null.

You can view more details on each update release in the Web.Maps.VE v2.0 Product Roadmap.

Support will be closed April 24 until May 4th, 2009

support.nospam@nospam.simplovation.com (crpietschmann) — Thu, 23 Apr 2009 17:44:00 -0500

The Simplovation Support Services will be closed April 24th until May 4th, 2009. You are still free to post questions/answers in the Forums, but we will be unable to post answers and reply to emails during this time. Support will resume again on May 4th; at which time we will work to get back to your questions as soon as we can. Also, all sales inquiries will not be replied to until on or after May 4th.

Thanks for your patients and understanding during this time.

Chris Pietschmann
Owner, Simplovation LLC
Microsoft MVP - Windows Live Platform

Web.Maps.VE v2.0 – Using UpdatePanel to Perform Asynchronous Operations

support.nospam@nospam.simplovation.com (crpietschmann) — Wed, 08 Apr 2009 22:42:26 -0500

The Web.Maps.VE v2.0 ASP.NET AJAX Virtual Earth Mapping Control allows you to perform all you Map manipulations (moving the map, adding shape, loading driving directions, etc.) from within server-side .NET code. This is all fine when handling the Map’s own events, but what about using Buttons and Hyperlinks to perform manipulations? This tutorial will show you how to utilize the ASP.NET UpdatePanel control to be able to manipulate the Map during Server Control Events (such as OnClick).

Prerequisites

This tutorial assumes that you already have a basic understanding of how to place a Map on a Page within your ASP.NET Website or Web Application Project.

If you need to get an overview of how to place a Map on the Page, then I recommend you go check out the “Getting Started with Web.Maps.VE v2.0” tutorial.

Add Pushpin to the Map when user clicks on an ASP.NET Button or LinkButton Control

Once you have a Map control place on the page, you can then create an ASP.NET Button or LinkButton control and manipulate the Map during its OnClick Event. You can perform many different Map manipulations, including (but definitely not limited to) Adding Pushpins, Zooming In and Loading Driving Directions.

You would define an ASP.NET Button like this:

<asp:Button runat="server" ID="Button1"
    Text="Do Something" OnClick="Button1_Click" />

And, you would manipulate the Map during the Buttons OnClick event like this:

protected void Button1_Click(object sender, EventArgs e)
{
    // Zoom In
    Map1.Zoom++;

    // Change to Hybrid Map Style
    Map1.MapStyle = MapStyle.Hybrid;

    // Add Pushpin
    Map1.AddShape(new Shape(Map1.LatLong));
}

If you run the above example, you’ll notice that every time the user clicks the ASP.NET Button control the entire Page reloads and the Map is completely redrawn. Next we will link up the Buttons OnClick event to an ASP.NET UpdatePanel to cause it to manipulate the Map using an Asynchronous Postback without reloading the entire Page.

Manipulate the Map without reloading the Page

Now that we’re manipulating the Map during the OnClick event of an ASP.NET Button Control, it sure would be nice if we could manipulate the Map without reloading the entire Page and loosing all the current state of the Map (position, zoom level, currently plotted Shapes). This is where the ASP.NET UpdatePanel control comes in.

All we need to do is add an ASP.NET UpdatePanel control to the Page and add an AsyncPostBackTrigger for the Button Control’s Click Event. Also, since we aren’t using the UpdatePanel to update any visible html content, we will just leave it’s ContentTemplate “blank.”

To do this, just add the following code to the .aspx page that contains the Button control we created above:

<asp:UpdatePanel runat="server" ID="up1">
    <ContentTemplate></ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger
            ControlID="Button1"
            EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Now the Buttons Click event will be raised using an Asynchronous Postback, and any Map manipulations we perform within the Event Handler will be passed down to the Client and implemented on Map already being displayed to the user.

Why leave the UpdatePanel’s ContentTemplate “blank”?

The reason we leave the ASP.NET UpdatePanel’s ContentTemplate “blank” in the above example is because we don’t want it to update any of the Page’s content.

But we do want it to update the Map on the Page, don’t we? Yes, that is correct. Except this UpdatePanel with the “blank” ContentTemplate isn’t actually the one that’s updating the Map. The Map updates are actually performed by a “hidden” UpdatePanel that is part of the Map control itself. This is described below.

How does the UpdatePanel do this?

The Web.Maps.VE v2.0 Map control actually contains a “hidden” ASP.NET UpdatePanel control that it adds to the Page behind the scenes. This “hidden” UpdatePanel is caused to reload when ever any other UpdatePanel on the Page generates an Asynchronous Postback.

The “hidden” UpdatePanel also passes the current Map state (zoom level, center location, map style, map mode, currently plotted shapes, etc.) back up to the server every time other UpdatePanels on the Page generate Asynchronous Postbacks.

This automatic communication via the “hidden” UpdatePanel is what allows the Map control to automatically transfer it’s state back and forth between the client and server as needed, and is what enables this rich ajax functionality to work.

Can I place Content/Controls within the UpdatePanel’s ContentTemplate

Yes, of course. If you have any content (other than the Map) that you want to update on Asynchronous Postbacks you can definitely place that content within the UpdatePanel’s ContentTemplate.

For example you could display the Maps current Center Location on the Page by placing an ASP.NET Labal control within the ContentTemplate and setting it’s Text within the Button’s Click Event Handler.

To do this, just add the following line to the Button’s Click Event Handler:

lblCenterLocation.Text = Map1.LatLong.ToString();

And, add an ASP.NET Label control to the UpdatePanel’s ContentTemplate:

<asp:UpdatePanel runat="server" ID="up1">
    <ContentTemplate>
        <asp:Label runat="server"
            ID="lblCenterLocation">
        </asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger
            ControlID="Button1"
            EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Some Tips on using the UpdatePanel Control

Here are a few things to note/remember when using ASP.NET UpdatePanel controls on the Page along with the Web.Maps.VE v2.0 Map control:

Do not place the Map control within an UpdatePanel! It will cause the control to not function properly, and is not supported.
If you have multiple Button, LinkButton or other server controls that will be raising Asynchronous Postbacks to Update the Map, then you’ll want to use only a single UpdatePanel with a “blank” ContentTemplate and add all the necessary AsyncPostBackTriggers to it.
If you aren’t updating the Button, LinkButton or other Server Control that is firing the Asynchronous Postback, then don’t place it within the UpdatePanel’s ContentTemplate. This would just generate extra overhead and could affect the overall performance of the Page.

If you want to read some more Tips and Tricks on using the UpdatePanel control in general, then I recommend you read the “UpdatePanel Tips and Tricks” article by Jeff Prosise on MSDN. You may also be interested in the “Some ASP.NET AJAX Tips and Tricks” article I wrote a while back.

Conclusion

As you can see it’s fairly simple and straight forward to update the Map during an Asynchronous Postback. And, it can be done from any Server Control’s Event that can be wired up to an UpdatePanel using an AsyncPostBackTrigger.

Web.Maps.VE v2.0 - Enable Shape Dragging via the VEToolkit DragShapeExtender

support.nospam@nospam.simplovation.com (crpietschmann) — Wed, 08 Apr 2009 00:09:25 -0500

One of the nice User Interface features to implement when using a Map to insert/edit location data within an application is the ability to allow the user to reposition a pushpin or shape by dragging it with the mouse. Neither Web.Maps.VE or Virtual Earth directly implement this functionality. However, the Virtual Earth Toolkit (VEToolkit) contains a DragShapeExtender component that allows for this functionality to easily be implemented using the Web.Maps.VE server control. This tutorial will cover the basics of hooking up the VEToolkit DragShapeExtender to the Web.Maps.VE Map to allow your users reposition shapes by dragging them with the mouse.

Prerequisites

This tutorial assumes that you already have a basic understanding of how to place a Map on a Page using Web.Maps.VE within an ASP.NET Website or Web Application Project. If you need an overview of how to place a Map on a page, then I recommend you go check out the Getting Started Tutorial.

It is also assumed that you have a basic understanding of JavaScript programming, but don’t worry only a tiny bit is needed for this tutorial.

Before you continue, you’ll want to go download the latest JavaScript release of the Virtual Earth Toolkit (VEToolkit) open source project.

Download VEToolkit Here: http://vetoolkit.codeplex.com/

Allow User to Create/Delete Shapes using the Mouse

First, you’ll need to create an empty ASP.NET Website or Web Application Project and add a Map to it’s Default.aspx page.

Before we hook up the VEToolkit DragShapeExtender to our Map to allow “draggable” shapes, we need to plot some shape on the Map. To do this we’ll use the following code within the Maps OnClick event handler to Plot New Shapes using the Left Mouse Button and Delete Existing Shapes using the Right Mouse Button.

protected void Map1_Click(object sender, AsyncMapEventArgs e)
{
    if (e.leftMouseButton && e.Shape == null)
    {
        // If the user clicked on the Map using the Left Mouse Button and
        // they didn't click on an existing Shape, then Add a New Pushpin
        // Shape to the Map.
        Map1.AddShape(new Shape(e.latlong));
    }
    else if (e.rightMouseButton && e.Shape != null)
    {
        // If the user clicked on an existing Shape using thr Right Mouse
        // Button, then Delete that Shape from the Map.
        Map1.DeleteShape(e.Shape);
    }
}

Attach the above method to the Map.Click event using the following:

<Simplovation:Map runat="server" ID="Map1"
    OnClick="Map1_Click">
</Simplovation:Map>

If you need an overview of handling the Map.Click (“OnClick”) event, please read the “Basics of the Click Event” Tutorial.

Now that we have a mechanism that allows the user to dynamically add/remove pushpin shapes from the Map, we can go ahead and hook up the VEToolkit DragShapeExtender component.

Enable “Draggable” Shapes

To enable “draggable” Shapes, we need to incorporate the VEToolkit DragShapeExtender component into our example.

Copy the following two JavaScript files from the VEToolkit into your project.

VEToolkit.Core.js
VEToolkit.DragShapeExtender.js

The VEToolkit.Core.js file contains the “core” functionality provided by the VEToolkit. I’m not going to go into what it all contains here, but it is required by the VEToolkit.DragShapeExtender.js; which contains the DragShapeExtender component.
Add <script> references to the Page Header to include the above two scripts:

<head runat="server">
    <title></title>
    <script src="scripts/VEToolkit.Core.js"></script>
    <script src="scripts/VEToolkit.DragShapeExtender.js"></script>
</head>

Declare a JavaScript method to be called once the Map has finished loading in the Page.

<script type="text/javascript">
    function Map1_ClientMapLoaded(map) {
        // The "map" variable will contain a reference to the client-side
        // Web.Maps.VE object instance.
    }
</script>

Set the above JavaScript Methods Name to the Map.OnClientMapLoaded property so it gets fired appropriately.

<Simplovation:Map runat="server" ID="Map1"
    OnClientMapLoaded="Map1_ClientMapLoaded">
</Simplovation:Map>

Now we need to create an instance of the VEToolkit.DragShapeExtender component within our OnClientMapLoaded JavaScript Event Handler, and hook it up to the Map to allow for Shapes to be “draggable.” To do this, copy the below <script> block into the page replacing the one we just created to add the Map1_ClientMapLoaded method.

<script type="text/javascript">
    // Global variable to hold a reference to the VEToolkit.DragShapeExtender.
    var dragShapeExtender = null;

    // This Method is called once the Web.Maps.VE Map Control has finished
    // loading on the Page.
    function Map1_ClientMapLoaded(map) {
        // The "map" variable will contain a reference to the client-side
        // Web.Maps.VE object instance.

        // Obtain a reference to the VEMap instance within the Web.Maps.VE
        // Map Control.
        var vemap = map.get_Map();
    
        // Create a new instance of the VEToolkit.DragShapeExtender and
        // attach it to the VEMap instance.
        dragShapeExtender = new VEToolkit.DragShapeExtender(vemap);
        
        // Set the DragShapeExtender to only allow Shapes to be dragged
        // using the Left Mouse Button
        dragShapeExtender.DragLeftMouseButton = true;
        dragShapeExtender.DragRightMouseButton = false;
    }
</script>

Conclusion

Event though this functionality isn’t built directly into Web.Maps.VE (or the MS Virtual Earth API) it’s extremely easy to implement with only a few lines of code. Now you have a nice example of how to allow users of your application to dynamically plot and reposition location data using a Map and their Mouse.

Chris Pietschmann Awarded 2009 Microsoft MVP!

support.nospam@nospam.simplovation.com (crpietschmann) — Tue, 07 Apr 2009 21:02:00 -0500

April 1st, 2009, Chris Pietschmann was awarded the 2009 Microsoft MVP (Most Valuable Professional) Award in the Windows Live Platform category for his contributions to the Microsoft Development Community over the past year.

View Chris Pietschmann's MVP Profile on Microsoft.com

Microsoft is pleased to recognize and award its Most Valuable Professionals (MVPs). We present the MVP Award to thank individuals for their exceptional contributions to technical communities worldwide. When a community participant sees an MVP in a technical community, whether in a newsgroup, as a user group host, a conference speaker, or a respondent in forums, that community participant can be confident that the information shared by the MVP will be of the highest caliber and will help every user make the most of the technology.

Overview of the Microsoft MVP Program