Map control with Tool tip to show overlapping Marker info

1 posts, 0 answers
  1. k f
    k f avatar
    109 posts
    Member since:
    Jun 2006

    Posted 26 Sep 2010 Link to this post

    Requirements

    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
Back to Top