how to set an ellipsedata or mapellipseview's Center Location

5 posts, 0 answers
  1. Sayyed Hossein
    Sayyed Hossein avatar
    20 posts
    Member since:
    Oct 2012

    Posted 27 Sep Link to this post

    i want to set the center location of an ellipsedata or mapellipse view. like setting a hotspot in its middle. how is it possible. currently the location of mapellipseview and ellipsedata refer to its top left corners location.
    actually my complete need is to click on somewhere on the map. draw an ellipse on that location(centered)  and as i move the mouse back and forth the radius of the ellipse gets enlarged/shortend until i again click the mouse and the ellipse is persisted in its last shape. the radius of the ellipse is the length between the first click and the second click. i must not that i cannot use the Ellipse because i need the radius to be in kilometers so that it changes with zoom changing.
  2. Dinko
    Admin
    Dinko avatar
    202 posts

    Posted 29 Sep Link to this post

    Hello Sayyed Hossein,

    As you said in your ticket the EllipseData refer to its top left corner. If you want the top left corner to be the center of the ellipse you can manually calculate it using the code below:
    EllipseData ellipse = new EllipseData();
    ellipse.Width = 0.5;
    ellipse.Height = 0.5;
    var latitude = topLeftCornerLocation.Latitude + (ellipse.Height / 2);
    var longitude = topLeftCornerLocation.Longitude - (ellipse.Width / 2);
    ellipse.Location = new Location(latitude, longitude);

    As for your approach, you can subscribe to the MapMouseClick event of the RadMap. In the event arguments you can get the current click location on the map and using the code mentioned above you can calculate the mouse click location to be the center of the ellipse.
    private Location originPosition;
    private
    void radMap_MapMouseClick(object sender, Telerik.Windows.Controls.Map.MapMouseRoutedEventArgs eventArgs)
    {
        EllipseData ellipse = new EllipseData();
        ellipse.Width = 0.5;
        ellipse.Height = 0.5;
        var latitude = eventArgs.Location.Latitude + (ellipse.Height / 2);
        var longitude = eventArgs.Location.Longitude - (ellipse.Width / 2);
        ellipse.Location = new Location(latitude, longitude);
        this.visualizationLayer.Items.Add(ellipse);
          this.originPosition = eventArgs.Location;
    }

    You can preserve the mouse click location in a variable and subscribe to the MouseMove event of the RadMap. In this event, you have to calculate the distance between the current location of the mouse and the center of the ellipse. To get the current mouse location in the event you can use the GetPosition() method of the MouseEventArgs and the static GetCoordinates() method of the Location.
    private void radMap_MouseMove(object sender, MouseEventArgs e)
    {
        var mousePosition = e.GetPosition(this.radMap);
        var location = Location.GetCoordinates(this.radMap, mousePosition);
        var distance = GetDistance(location, this.originPosition);
    }
    You can use the following method to get the distance between the location of the mouse pointer and the center of the ellipse on the map.
    private static double GetDistance(Location point1, Location point2)
    {        
        double a = (double)(point2.Latitude - point1.Latitude);
        double b = (double)(point2.Longitude - point1.Longitude);
        return Math.Sqrt(a * a + b * b);
    }
    Keep in mind that you have to convert the distance in degrees as the EllipseData Width and Height properties are expecting values in degrees.

    Hope this information is helpful.

    Regards,
    Dinko
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Sayyed Hossein
    Sayyed Hossein avatar
    20 posts
    Member since:
    Oct 2012

    Posted 02 Oct in reply to Dinko Link to this post

    hi dear dinko and thank you for your valuable time and your VERY complete answer

    i had 3 problem/questions

    1- if your GetDistance() Method doesn't give a degree number what does it give? and how can i convert it to degree

    2- for calculating distance i'm using a formula called the "haversine" formula and i think it gives the right answer so i put it here so you can confirm it for me and others can use it if confirmed:

    private double calculatedegreedestination(Location l1, Location l2)
    {
        var la1 = DegToRadian(l1.Latitude);
        var la2 = DegToRadian(l2.Latitude);
     
        var deltalat = DegToRadian(Math.Abs(l2.Latitude - l1.Latitude));
        var deltalong = DegToRadian(Math.Abs(l2.Longitude - l1.Longitude));
     
        var a = Math.Sin(deltalat / 2) * Math.Sin(deltalat / 2) +
            Math.Cos(la1) * Math.Cos(la2) * Math.Sin(deltalong / 2) * Math.Sin(deltalong / 2);
        var c = 2 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1 - a));
        return RadianTodegree(c);
             
    }

    and this is where i got the idea:

    http://www.movable-type.co.uk/scripts/latlong.html

    3- now my problem is after i calculate the radius with this formula and i draw an ellipsedata with the same width and height it draws an ellipse but not CIRCLE it is egg shaped! with smaller width and bigger height (although when i trace the width and height of the ellipse are numerically equal). why is that?and how can i stop it from happening? i want a circle shaped ellipsedata with the width of like 1 kilometer it should be equal in height and width

    4- now that it came to this. in another use case i want to draw another ellipsedata which its width is like 2 kilometers. how can i convert that to degree

     

    again thank you very much for your valuable time

     

  5. Dinko
    Admin
    Dinko avatar
    202 posts

    Posted 06 Oct Link to this post

    Hi Sayyed Hossein,

    I am looking into this right now and will let you know once I have more information.

    Regards,
    Dinko
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Dinko
    Admin
    Dinko avatar
    202 posts

    Posted 10 Oct Link to this post

    Hi Sayyed Hossein,

    Let me get straight to your question.

    We are happy to hear that you have found a method that works for you. Hope it works in all cases.  About the GetDistance() method, indeed, it doesn't return a correct degree number. This was just a suggestion and in your case, you will need to implement custom logic that gets into account the distortion in the distance caused by the ellipse form of the world - the different distance will have different pixels size on the different meridians. 

    About your third question, the described behavior is expected. The EllipseData objects are measured in spatial units and as you may notice their size depends on the zoom level and their location. Basically, the distance is represented differently on the different coordinates in the Mercator projection. The Mercator projection distorts the size of objects as the latitude increases from the Equator to the poles. For example, let's have a shape which covers 10 km on the map. On the equator, this shape will have 100px width while on the North pole the width will be 30px. That is why the map shape is distorted when moving to another location.
    For your last question, you can check the following StackOverflow article which could be a good starting point for implementing a method to convert kilometers to degrees.

    Regards,
    Dinko
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready