RadControls version |
Q2 2010
|
.NET version |
4
|
Visual Studio version |
2010
|
programming language |
C#
|
browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
The code in this sample will demonstrate how to create your own markers in a Telerik Map using MVVM architecture with MEF & the MVVM Light Framework.
This sample also shows how to deal with scenarios when you have markers at similiar coordinates on a map that cause them to overlap.
Note, the code for Marker User Control I picked up from another app.
Highlights
- To get you started, RadMapView is our View that loads on application startup. It imports the RadMapViewModel.
- You'll notice in our View we're using the RadMap control. In order to show different coordinates, we place them in separate InformationLayer's.
- To use our Marker User Control, I ran into a problem using a DataTemplate with a UIElement. So I searched and found code for a converter that creates a ProxyObject. The code is in the MarkerConverter and you see it is used when setting the ItemsSource binding for each InformationLayer. This converter returns a ProxyObject and our Marker is stored in it's Value property.
- Also, to get this to work, I had to use a ContentControl in the ItemTemplate and then Bind to the Value path of the ProxyObject to bind to our Markers. Also, you'll see for our Location which sets the point, we bind to Value.Coordinates.
The main thing I wanted to show in this example is how to handle being able to see info about markers on a map when they overlap. Also, I wanted to demonstrate that for me it's ok to have code behind when all it is doing it displaying data.
For this, have a look at the Marker_MouseEnter method in RadMapView. When a users mouses over one of our markers, this method checks all the items in our layers to see if there are any other markers < .3 away from the marker being moused over. It then puts data of any marker within < .3 into a tool tip for the user to see.
This isn't meant to be a full blown tutorial into MVVM or such but more a sample that hopefully you find helpful if you ever have a need to do some work with a Map Control.
If you have any questions, please post them here as well:
http://www.dotnetpatterns.net/content/184-Teleirk-Map-Control-with-custom-Markers