Catch mouse selection in the map

[Simon Störmer]

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.

[Andrey]

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

[Simon Störmer]

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.

[Andrey]

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

[Michael]

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?

[Michael]

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