Insert a Virtual Earth Map in your asp.net page - Part 3

by Emanuele 6/20/2008 3:30:00 PM

Another interesting thing in Microsoft Virtual Earth is calculate the route between two points.
The method for do this is GetDirections.
This method has two parameters.
The first is an array with the list of the points.
The second is a VERouteOptions object that specified some options.
The options is:

DistanceUnit: enum (Kilometer, Miles)
DrawRoute: if true, the function draws the road on the map
RouteColor: the color of the route
RouteMode: enum VERouteMode (Walking, Driving)
RouteOptimize: enum (MinimizeTime, MinimizeDistance)
SetBestMapView: if true, the map moves on your route
RouteCallback: the function invoked when the search is finished

Add this html code under the map (see the first or second article)

<input id="txtStart" type="text" name="txtStart" value="Piana del Sole, Roma, Lazio, Italy"/>
<input id="txtEnd" type="text" name="txtEnd" value="Piazza del Popolo (historical site), Rome, Lazio, Italy"/>
<input id="find" type="button" value="Find" name="GetRoute"
       onclick="GetRoute();"/>

Add this javascript function:

function GetRoute(){
  try{
    var options = new VERouteOptions();
    options.DrawRoute = true;
    options.SetBestMapView = true;
    options.DistanceUnit = VERouteDistanceUnit.Kilometer;
    map.GetDirections([document.getElementById('txtStart').value,
      document.getElementById('txtEnd').value], options);
  }
  catch(e)
  {
    alert(e.message);
  }
}

In the attachment you find the example page that I created.

VirtualEarth3.zip (1.13 kb)

Enjoy!

Insert a Virtual Earth Map in your asp.net page - Part 2

by Emanuele 6/20/2008 10:34:00 AM
In the first article, I describe how to insert and navigate a Virtual Earth Map in your asp.net page.
Here, I describe how to search a Point of Interest (POI) in your map.
The Map control includes a function called Find.
This function accepts ten parameters:

What: a string you want to search
Where: a string where you want to search
FindType: enum VEFindType (Now there is only value: Business)
ShapeLayer: a VEShapeLayer object where the pushpin are placed
StartIndex and NumberOfResults: parameters to manage the search results
ShowResults: if true, the pushpin are placed on the POI
CreateResults: if true, the pushpin are created
UseDefaultDisambiguation: if true, the default form is shown with much disambiguation in the first and second parameters
SetBestMapView: if true, the map moves automaticaly on the result
Callback: function called when the search are finished

In our example we use only the first and the second parameters.

Add the follow html code to the first example:

Search:
<input id="txtPOI" type="text" name="txtPOI"/>
<input id="txtAddress" type="text" name="txtAddress"/>
<input id="find" type="button" value="Find" name="find"
    onclick="Find();"/>

Add the follow javascript to the first example:

function Find()
{
    try
    {
        map.Find(
          document.getElementById('txtPOI').value,
          document.getElementById('txtAddress').value
        );
    }
    catch(e)
    {
        alert(e.message);
    }
}


Now, launch the page and try to search something.

In the attachment you find the example page that I created.

VirtualEarth2.zip (1.02 kb)

Insert a Virtual Earth Map in your asp.net page - Part 1

by Emanuele 6/19/2008 5:59:00 PM

To interface with Microsoft Virtual Earth we must use javascript, because the code and the controls to get the maps is client side.
With Microsoft Virtual Earth, we can see the map in much formats, but the thing that the others envy is the Bird View.
With Bird View we can see the road or the palace like a "bird" see it.

Insert the map

To see the map on own page, we create a div in html format:

<div id="VirtualMap" style="position:relative; width:600px; height:600px;"></div>

If we miss the position attribute the map is not viewed correctly.

After this, we put in the tag <head> the follow javascript script:

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>

The parameter "v" is required and it is the version of the Virtual Earth Map Control.

Under the previous script we must put other script, that create the map control in the map container.

      <script type="text/javascript">
         var map = null;

         var StartPoint = new VELatLong(45.39844997630408, 10.546875000000014);

         var pinPoint = null;
         var pinPixel = null;
                  
         function GetMap()
         {
            map = new VEMap('VirtualMap');
            map.LoadMap(StartPoint, 4, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 4);
         }

         function getInfo()
         {
            var center = map.GetCenter();

            info  = "Zoom level:\t" + map.GetZoomLevel() + "\n";
            info += "Latitude:\t"   + center.Latitude    + "\n";
            info += "Longitude:\t"  + center.Longitude;

            alert(info);
         }
      </script>


Replace the tag body with this tag: <body onload="GetMap();">

We can change all parameters in the function LoadMap.
The StartPoint class is the coordinates where the map starts when is loaded.
The second parameter is the zoom level: 1 to 19.
The third parameter is the style of the map. (Road,Aerial,Hybrid,Oblique,Birdseye,BirdseyeHybrid)
The fourth parameter indicates if the user can navigate in the map or not.
The fifth parameter is the visualization mode of the map. (2D,3D).
The sixth parameter is the boolen that indicates if the navigation control are visible or not.
The seventh parameter is the number of "square" that the control map load until you navigate on the map.

Follow this instructions and view the page on your browser.

 

In the attachment you find the example page.

VirtualEarth1.zip (879.00 bytes)

Button with confirm message

by Emanuele 11/9/2007 1:39:00 AM

It's simple, but it's much important when you want make a site with much user experience.
If you have a button that makes an important and critical job, you need a confirm button to add much security for users.
Well, with this simple line of code, you can do that.
When you click "OK" on the message, the application fire the "OnClick" event that you specifid.
Otherwise, the page does nothing.
Simple but useful.

<asp:Button ID="ButtonDelete" runat="server" OnClick="ButtonDelete_Click1" OnClientClick="return confirm('Confermi la cancellazione ?');" />

 



Powered by BlogEngine.NET 1.3.1.0
Theme by Emanuele Bartolesi

About the author

Name of author Emanuele Bartolesi
I'm a senior developer and project manager.

Contact me Contact me

Calendar

<<  December 2008  >>
MoTuWeThFrSaSu
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008

Sign in

Download Day 2008