Recently I took my week end to found out what Virtual earth can do, as I have such an experience using MapInfo MapX (now MapXtreme) for couples of my old projects, for some reason I figure it out that might be interesting if I can combine VE and Silverlight.
In my sample here, I'll show you how we can easily create lines in Virtual Earth and silverlight application will following the lines, just like a route.
Click here to see how it run.
(*) Note If you are using IE8 beta, you should click Toggle with IE 7 Emulation mode.
If you interesting about virtual earth just go to http://dev.live.com/virtualearth/sdk/ and you'll find interactive sample that live.com provide to learn it fast.
In this sample the I'm requesting VE to load map of Jakarta and show Monas at center of the map, the code is quite simple using javascript :
- provide the location latitude and longitude as center of the map using VELatLong
- how many zoom that you preferred ?
- gave a type of map you wanted , a for 'aerial' , r for 'road'
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-6.17605430, 106.82762146), 15 ,'a' ,false);
} and the result below
Stacking Silverlight with Virtual Earth, and Create Silverlight Transparently
Cause silverlight will run on the top of VE , we have to make silverlight component position on top VE component.
<div id='myMap' style="position:relative; width:640px; height:480px">
</div>
<!-- Silverlight Component -->
<div id="silverlightControlHost">
<object id="silverlight" data="data:application/x-silverlight," type="application/x-silverlight-2-b1" width="640px" height="480px"
style="position: absolute; z-index:100; top:0px; left: 0px;">
<param name="background" value="Transparent" />
<param name="windowless" value="True" />
In order to make the silverlight looks transparently, some properties we should changed is background and windowless
- Set background value to Transparent
- Set windowless value to True
In the silverlight XAML make sure usercontrol properties background set to transparent.
Draw Lines On Virtual Earth
We can using VEShape class to drawing shape onto map, currently VE only support three type of Shape, they are : Polygon, Polyline and pushpin.
In here because I like to draw using the mouse, I need to attached mouse event. These function below is tell the map that I'm register on OnmouseDown and OnMouseUp Event on VE, that shall be pointed to my MousehandlerDown and MouseHandlerUp function,
map.AttachEvent("onmousedown",MouseHandlerDown);
map.AttachEvent("onmouseup",MouseHandlerUp);
When the mouseeventdown occurs I setup a couple things they are :
- Get The Position X, Y
- Convert to LatLong
- And Save Position Current Point
// Where We Are
var x = e.mapX;
var y = e.mapY;
// Convert TO VEPixel Class
pixel = new VEPixel(x, y);
// Convert To LatLong
LL = map.PixelToLatLong(pixel);
// Save To Array Collection
collLL.push(LL);
// Is This First Time Click ?
iClick +=1;
// Tell Map We Handle This
return true;
After that on mouseeventUp I called drawlines function to draw the lines.
// Convert To LatLong
var ll1 =convertToLL(val1);
var ll2 =convertToLL(val2);
// Create Polyline Object
var shape = new VEShape(VEShapeType.Polyline, [ ll1, ll2 ]);
// Set Line Color To Red
var mycolor = new VEColor(255, 0, 0, 0.8);
shape.SetLineColor(mycolor);
shape.SetFillColor(new VEColor(0,100,150,0.5));
// Size Of The Width (max 5)
shape.SetLineWidth(3);
// Tell VE that I do not need Icon
shape.HideIcon();
// Add SHape to Map
map.AddShape(shape);
In code above you see that VE provide us rich class and function to manipulate map instanly.
Speaking HTML and Silverlight Managed Code
In order to communicate with silverlight from HTML, I modify App.xaml.cs on mysilvelight application
private void Application_Startup(object sender,StartupEventArgs e)
{
// Load the main control
this.RootVisual = new Page();
HtmlDocument doc = HtmlPage.Document;
HtmlPage.RegisterScriptableObject("mysilver", RootVisual);
}What actually happen, I'm telling HtmlPage class to register page class representing by rootvisual object as mysilver in HTML page.
In page class I also set "[ScriptableMember()]" attributes so they can safely call by my javascript from HTML. ScriptableMember attributes is part of System.Windows.Browser namespace.
[ScriptableMember()]
public void
AddPoint(double x, double y)
{
_playpts.Add(new Point(x, y));
}AddPoint function above was called by mouseeventUp event VE from HTML, and saved on _playpts generic List of point.
Play with Animation
In Page.xaml, I added storyboard under usercontrol.resources which basically will play the animation instantly.
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames x:Name="dakX" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames x:Name="dakY" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
</DoubleAnimationUsingKeyFrames>
</Storyboard>On sample above, the target name and property is also setup, especially for TargetProperty value, I've define that X and Y will be mark as target. As position will move dynamically, there is a function will generate KeyFrames during runtime, so rectangle object will following keyframes based mousedown event on HTML where the map reside.
private void GenerateKeyFrames()
{
for (int i = 0; i < _playpts.Count -1 ; i++)
{
SplineDoubleKeyFrame newsdkfX = new SplineDoubleKeyFrame();
// Set KeyTime
newsdkfX.SetValue(SplineDoubleKeyFrame.KeyTimeProperty , string.Format("00:00:0{0}",i+1));
// Set Value X Move
newsdkfX.SetValue(SplineDoubleKeyFrame.ValueProperty, _playpts[i + 1].X - _playpts[0].X);
dakX.KeyFrames.Add(newsdkfX);
SplineDoubleKeyFrame newsdkfY = new SplineDoubleKeyFrame();
// Set KeyTime
newsdkfY.SetValue(SplineDoubleKeyFrame.KeyTimeProperty,string.Format("00:00:0{0}", i+1));
// Set Value Y Move
newsdkfY.SetValue(SplineDoubleKeyFrame.ValueProperty, _playpts[i + 1].Y - _playpts[0].Y);
dakY.KeyFrames.Add(newsdkfY);
}
}After Storyboard acomplished completed of storyboard event will fire to hide the Silvelight host application on HTML page.
HtmlPage.Document.GetElementById("SilverlightHostControl").SetStyleAttribute("visibility", "hidden");
Creating such an application using both VirtualEarth and Silverlight is challenge for me, I'll look more deep to see how their collaboration could create interesting and powerful application.
Regards
Finally I'm finishing my sample articles on this blog, I'm just worried with the language I choose when writing this article but I prefer to bahasa because I think is more appropriate this time:
This sample takes me 3 days to finished the articles and I carefully learn it from the expert ( * 2 Scott names ) that I recently back and forth reading their explanations.
You check it on this page as Part I and here Part II, this page quite enough long to described about what I did because I like to share it.
You can download the source code here and enjoy it for free (if you're happy) !
I am happy while Scott Morrison gave a quick feed back since I'm asking about DataGrid Behaviour.
* One is Scott Guhtrie and Scott Morirson who actually The PM on DataGrid development on Silverlight 2.0
- Cheers
Kemane aja sih..... well, beberapa orang menanyakan hal tsb jika lama tak jumpa. Shame for me also that I have not update my blogs... cuman 1 page doank dan tahun lalu lagi....btw Since I was amazed with MS done in Silverlight and 3.5 Framework, I've just realized how amazing this technology ... that I shall learn again and update with a tons of new exciting tools & platform.
Starting 2 weeks ago I just research and playing with silverlight 2.0, I do appreciate what they've done in 1.0, well it does not enough make me so enthusiasm, but this new verson 2.0 (still beta) was rock for me... in next post I'll share my working sample of silverlight 2.0.
cheers
Kita sibuk dengan tanggung jawab secara pribadi dan profesionalisme kita, namun kadang ada hal lain yg perlu kita lakukan untuk terus melakukan hal yg terbaik sesuai dengan kapasitas dan keinginan kita, menulis blog tidaklah mudah untuk saya, waktu yg tersita dan lainnya mudah mengarahkan perhatian ke segala hal yg membuat kita larut dalam kesibukan dan obsesi kita.
Namun sesuai yg di tulis oleh scot hanselman agar terus keep up as good developer, menulis dan sharing suatu yg baik untuk dicoba, sebenarnya sejak beberapa tahun yg saya sering membaca tentang local .NET hero kita yg kita harus 'thumbs up' kepada mereka Agus Kurniawan , Norman Sasono dan risman merupakan salah satu yg terbaik ( tanpa melupakan dondy , saya jg liat zeddy jg cool banget handling issue tentang thread), saya sendiri belum pernah mempunyai kesempatan bertemu dengan mereka secara langsung, namun cukup membaca hal yg telah mereka lakukan membuat kita yakin dengan 'capabilty' orang Indonesia.( no effense ) 
Beberapa temen komunitas ms seperti krisna, peter even arikun, lama tidak jumpa karena kesibukan saya dan lainnya, tapi mungkin ini sekarang waktunya untuk sering mampir lagi ke kegiatan yg ms lakukan, terutama developer events.
Semoga ini sebagai permulaan untuk sering menulis dan membagi pengetahuan tentang .NET