Bing Maps: More Tricks

Vitalii Symon, 14 January 2011

As I’ve blogged about before, we’ve completed a big task which was integrating CRM with Bing maps. Here are some code snippets which can help you to build own application quickly and easily. So here they are:

1. Showing a hint near a specific push pin:

First of all, when creating the pushpin, make sure you add description with the text which will be displayed when a mouse hovers over the pin. Use SerDescription(strDescr) method for this purpose. After you create a handler for your event (e.g. click on some link) which will show the pushpin with a specific ID (ID of pin can be retrieved by calling GetID() method after adding shape to the map). The script for popping up the hint is:

         function showTag(shapeID) {
            // get shape
            var shape = myMap.GetShapeByID(shapeID);
            // make sure previous box is hidden
            myMap.HideInfoBox();
            // show the hint
            myMap.ShowInfoBox(shape);
         }

Just pass the shape ID and it will pop up!

2. Hiding or setting custom shape icon

To hide the pin (it can be useful for drawing an area for example), use SetCustomIcon method – just pass empty transparent image and no pin will be displayed. Or you can pass a different pin depending on corresponding object properties - e.g. change the colour or shape of the pin on the map which will make your application to look more dynamic.

3. Remembering map position after postback

Many actions require postback and it would be nice to save position of the map before making postback and restore it after. Follow these simple steps and map location will be preserved.

a) Create two hidden fields on the ASP.NET page

We’ll need to store two values – centre point and zoom of the map. It’s enough to save map view. So create two hidden fields like this

<asp:HiddenField runat="server" ID="HiddenFieldCurrentZoom" />
<asp:HiddenField runat="server" ID="HiddenFieldCurrentLocation" />

b) Handle onchangeview event

Add this line to the startup script

myMap.AttachEvent("onchangeview", onviewchange);

And write the actual function before that line

        function onviewchange()
        {
            $('#<%=HiddenFieldCurrentZoom.ClientID %>').val(myMap.GetZoomLevel());
            $('#<%=HiddenFieldCurrentLocation.ClientID %>').val(myMap.GetCenter());
        }

c) Restore coordinates on startup

I’ve created properties for accessing those properties from code behind, but you can access hidden fields directly.

if (<%=(CurrentZoom !=0).ToString().ToLower() %>)
myMap.SetZoomLevel(<%=CurrentZoom %>);

            if (<%=(CurrentLocation.Latitude == 0 && CurrentLocation.Longitude == 0).ToString().ToLower() %>)
                myMap.Search('default location');
            else
                myMap.SetCenter(new VELatLong(<%=CurrentLocation.Latitude%>, <%=CurrentLocation.Longitude%>));

This step makes the control to act more like ASP.NET control rather than a big js library.

I hope these tips will help you to make Bing Maps even easier to integrate with your apps.

*Image from http://www.downloadatoz.com/resources/201008/pic/1283244910.jpg

Bing Maps: More Tricks

Vitalii Symon, 14 January 2011

Category List

Filter by Author