Retrieve latitude/longitude of the four corners in the view of a user on Azure Maps

Joshua Qin 71 Reputation points
2022-03-19T00:04:47.643+00:00

I would like to retrieve information about a user's current view on an Azure Maps web control, either using the coordinates of the four corners of the user's view, or by getting the coordinates of the center of the user's view. How can I go about this with Azure Maps?

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
736 questions
0 comments No comments
{count} votes

Accepted answer
  1. rbrundritt 18,686 Reputation points Microsoft Employee
    2022-03-19T00:30:16.397+00:00

    If you aren't rotating the map, you can get the bounding box of the map from the maps camera.

    var bounds = map.getCamera().bounds;

    This will be an array of numbers in the format [west, south, east, north]. You can then get the coordinates of the map by pairing up these values like [west, north] for top left corner. If the map is rotated, I believe this will capture some additional area that isn't in view as it would get the max north/south/east/west coordinates of the view.

    If you want to handle rotation of the map and get the coordinates, what you can do is get the width and height of the map, and then calculate the screen coordinates of the corners of the map relative to the top left corner such that:

    • top left = [0,0]
    • top right = [width, 0]
    • bottom left = [0, height]
    • bottom right = [width, height]

    Then take these and pass them into the maps pixelsToPositions function

    Here is a code sample:

       var mapRect = map.getCanvas().getBoundingClientRect();  
       var width = mapRect.width;  
       var height = mapRect.height;  
       var mapCornersPixels = [[0,0], [width, 0], [0, height], [width, height]]  
       var mapCornersPositions = map.pixelsToPositions(mapCornersPixels);  
    

    In the code above mapCornersPositions will be an array of positions; top left, top right, bottom left, bottom right of the map.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.