Center / Zoom over Group of Markers on Databind

4 posts, 0 answers
  1. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 03 Jul 2014 Link to this post

    I am binding a set of addresses to the RadMap server-side, and would like to set the Zoom and CenterPosition so that the points on the map are all within view.

    For instance, the user may have zoomed into the US - the selects a list that adds addresses in Europe.  I would like to reset the map zoom/center to show this whole group.  How would I go about doing this?
  2. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 04 Jul 2014 in reply to Dan Link to this post

    I have figured out how to center the Map over a series of Lat/Lng points - using their averages.  

    I would like to figure out how to set the Zoom now - so that it fits all of the mapped points - but am not sure how to figure which zoom level to use?  If I find the greatest variances between Lat and Lng points - how would that relate to the Zoom level 0-19?  

    A couple examples of the desired effect:

     - The user is zoomed in on Washington DC
     - The user selects a list of addresses in China
     - I would recenter the map based on the Lat/Lng coordinate averages
     - But how do I set the Zoom?

     - The user is at zoom level 2 - which seems to show the whole world map once.
     - They select addresses in Los Angeles
     - I would recenter the map based on the Lat/Lng coordinate averages
     - How would I figure the zoom to set the map to just show Los Angeles?

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 05 Jul 2014 Link to this post

    Some messing around + Googling, and this bit of code does the trick for me.

    Hope this is helpful to someone else.

    As a side note - this would be a nice thing to integrate into the RadMap control...

    01.Protected Sub setMap(MappedNames As List(Of GeocodedAddress), map As RadMap)
    02. 
    03.    Dim mapWidth As Integer = 1050
    04.    Dim paddingFactor As Double = 1.2
    05. 
    06.    Dim minY As Double = MappedNames.Min(Function(x) x.Latitude)
    07.    Dim maxY As Double = MappedNames.Max(Function(x) x.Latitude)
    08.    Dim minX As Double = MappedNames.Min(Function(x) x.Longitude)
    09.    Dim maxX As Double = MappedNames.Max(Function(x) x.Longitude)
    10.    Dim centerY As Double = (minY + maxY) / 2
    11.    Dim centerX As Double = (minX + maxX) / 2
    12. 
    13.    Dim minRadianY As Double = Math.Log((Math.Sin(Degree2Radian(minY)) + 1) / Math.Cos(Degree2Radian(minY)))
    14.    Dim maxRadianY As Double = Math.Log((Math.Sin(Degree2Radian(maxY)) + 1) / Math.Cos(Degree2Radian(maxY)))
    15.    Dim centerRadianY As Double = (minRadianY + maxRadianY) / 2
    16.    centerY = Radian2Degree(Math.Atan(Math.Sinh(centerRadianY)))
    17. 
    18.    Dim deltaX As Double = maxX - minX
    19.    Dim resolutionX As Double = deltaX / mapWidth
    20. 
    21.    Dim vy0 As Double = Math.Log(Math.Tan(Math.PI * (0.25 + centerY / 360)))
    22.    Dim vy1 As Double = Math.Log(Math.Tan(Math.PI * (0.25 + maxY / 360)))
    23.    Dim viewHeightHalf As Double = map.Height.Value / 2
    24.    Dim zoomFactorPowered As Double = viewHeightHalf / (40.7436654315252 * (vy1 - vy0))
    25.    Dim resolutionY As Double = 360.0 / (zoomFactorPowered * 256)
    26. 
    27.    Dim resolution As Double = Math.Max(resolutionX, resolutionY) * paddingFactor
    28.    Dim zoom As Double = Math.Log(360 / (resolution * 256), 2)
    29. 
    30.    map.Zoom = Math.Floor(zoom)
    31.    map.CenterSettings.Latitude = centerY
    32.    map.CenterSettings.Longitude = centerX
    33. 
    34.End Sub
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 08 Jul 2014 Link to this post

    Hello Dan,

    Thank you for sharing this useful method with the Telerik community.

    Indeed such functionality would be very useful in the RadMap control. I logged this feature request, so that other users could vote for this suggestion also.

    On a side note, it would be appreciated if you could extend the bellow example with some comments and also provide a simple, locally runnable project, so that it could be easily examined. This way I would be able to convert this thread into a Code Library and reward you with some Telerik points for the knowledge sharing.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top