Catch mouse selection in the map

6 posts, 0 answers
  1. Simon Störmer
    Simon Störmer avatar
    31 posts
    Member since:
    Oct 2012

    Posted 11 Feb 2011 Link to this post

    Hi,

    I can switch the maps MouseDragMode to Select, which makes the map draw a selection bounding box on mouse drag instead of panning the map. This is what I want, but I could not find a way to catch the selected area after the selection is finished for further processing.

    How can this be done?

    Kind regards,

    Tobias Richling.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 16 Feb 2011 Link to this post

    Hello Tobias Richling,

    Currently the map control does not support this feature. You can use the following sample code which implements a custom selection bounding box. It allows you catching a data of selected area.
    <telerik:RadMap x:Name="radMap"
                    MouseLeftButtonDown="radMap_MouseLeftButtonDown"
                    MouseMove="radMap_MouseMove"
                    MouseLeftButtonUp="radMap_MouseLeftButtonUp"
                    PanningFinished="radMap_MotionFinished"
                    ZoomingFinished="radMap_MotionFinished"
                    Center="40,-100"
                    ZoomLevel="4">
        <telerik:RadMap.Provider>
            <telerik:OpenStreetMapProvider />
        </telerik:RadMap.Provider>
        <telerik:InformationLayer x:Name="informationLayer" />
        <telerik:InformationLayer Name="selectionLayer">
            <telerik:MapRectangle Name="selection"
                                  Location="0,0"
                                  Width="0"
                                  Height="0"
                                  Fill="#3E1157DC"
                                  Stroke="#FF0781F7"
                                  StrokeDashArray="20, 8"
                                  StrokeEndLineCap="Round"
                                  StrokeDashCap="Round"
                                  StrokeThickness="1.5"
                                  RadiusY="10" RadiusX="10"/>
        </telerik:InformationLayer>
    </telerik:RadMap>
    public partial class MainPage : UserControl
    {
        private bool mouseButtonPressed;
        private bool selectionChanged;

        
    private Location originalLocation;
        private Location currentLocation;

        
    private LocationRect selectedRectangle;

        
    public MainPage()
        {
            InitializeComponent();
        }

        
    /// <summary>
        /// Initializes selection rectangle.
        /// </summary>
        private void radMap_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.radMap.CaptureMouse();
            this.mouseButtonPressed = true;

            
    Point point = e.GetPosition(this.radMap);
            this.originalLocation = Location.GetCoordinates(this.radMap, point);
            this.currentLocation = this.originalLocation;

            
    if (this.selection.Visibility != System.Windows.Visibility.Visible)
            {
                this.selection.Visibility = System.Windows.Visibility.Visible;
                this.selectionLayer.ArrangeItem(this.selection);
            }

            
    this.ShowSelection();

            
    e.Handled = true;
        }

        
    private void radMap_MouseMove(object sender, MouseEventArgs e)
        {
            if (this.mouseButtonPressed)
            {
                Point point = e.GetPosition(this.radMap);
                this.currentLocation = Location.GetCoordinates(this.radMap, point);

                
    this.ShowSelection();
            }
        }

        
    /// <summary>
        /// Draws selection rectangle.
        /// </summary>
        private void ShowSelection()
        {
            LocationRect locationRect = new LocationRect(this.originalLocation, this.currentLocation);
            locationRect.MapControl = this.radMap;

            
    this.selection.Location = locationRect.Northwest;

            
    this.selection.Width = locationRect.Width;
            this.selection.Height = locationRect.Height;
        }

        
    /// <summary>
        /// Complete selection process.
        /// </summary>
        private void radMap_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (this.mouseButtonPressed)
            {
                this.mouseButtonPressed = false;
                this.radMap.ReleaseMouseCapture();

                
    this.selection.Width = 0;
                this.selection.Height = 0;

                
    this.selectedRectangle = new LocationRect(this.originalLocation, this.currentLocation);
                this.selectedRectangle.MapControl = this.radMap;

                
    this.radMap.SetView(this.selectedRectangle);

                
    this.selectionChanged = true;
            }
        }

        
    private void radMap_MotionFinished(object sender, RoutedEventArgs e)
        {
            if (this.selectionChanged)
            {
                this.selectionChanged = false;
                // this.selectedRectangle contains the selected area
            }
        }
    }

    Regards,
    Andrey Murzov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Simon Störmer
    Simon Störmer avatar
    31 posts
    Member since:
    Oct 2012

    Posted 18 Feb 2011 Link to this post

    Hi Andrey,

    I tried your sample but I had no luck on this one. The one thing was that the formatting was somewhat screwed up, but I could work around this :-)

    The other thing is, that the sample did not work. The selection box does not appear. Can you help me on that?

    Thanks,

    Tobias Richling.
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 23 Feb 2011 Link to this post

    Hi Tobias Richling,

    I have attached a sample solution which implements a custom selection bounding box. I hope it helps.

    All the best,
    Andrey Murzov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2012

    Posted 05 May 2014 Link to this post

    I have downloaded this useful example and it worked fine for me.
    What I now need in my application is to select a rectangle on the map without zooming in the same time.
    Is this possible?
  7. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2012

    Posted 05 May 2014 in reply to Michael Link to this post

    OK, don't bother, I found the solution: In the example below in method radMap_MouseLeftButtonUp you have to delete radMap1.SetView(selectedRectangle);
Back to Top
DevCraft banner