Can I adjust my Bing Map's View/LocationRect/Bounding Box by a small amount?

3.6k views Asked by At

I am using this code:

photraxMap.SetView(new LocationRect(App.photosetLocationCollection));

...to zoom a map to show the List of Locations contained in photosetLocationCollection.

photraxMap is a BingMap. SetView() is a Bing Maps method, not my own custom method.

The problem is that it works too well - it shows all the markers/pushpins, but just barely - the extreme locations are "clipped" as you can see here:

enter image description here

In the screamshot, you can see that the pushpin north of San Andreas as well as the one at Columbia, at the southeast edge of the map, are partially obscured (the one at Pardee is also partially obscured, by the Map Type box, but I reckon that can't be helped).

I want them to have a little "wiggle room" as it were. This is not simply a cosmetic issue - the "outlier" pushpins are not selectable until you drag the map up or down or left or right a tad.

Is there a way to tweak the zoom level just a teensy-weensy bit (not a full zoom level higher)?

UPDATE

Based on the ideas in the answer below, I think I will try something like this:

// Adapted from Brundritt and Boonaert: http://stackoverflow.com/questions/26937358/can-i-adjust-my-bing-maps-view-locationrect-bounding-box-by-a-small-amount
// Before passing the locations to set view, call this twice, to add bogus NW and SE locations that will stretch 
// the viewable area of the map a little, like so:
// Location nwShim = GetAShimLocation(locs, true);
// Location seShim = GetAShimLocation(locs, false);
// locs.Add(nwShim); locs.Add(seShim);
public static Location GetAShimLocation(IList<Location> locations, bool IsForNorthwestCorner)
{
    const int MAP_CUSHION = 1; // Is 1 a comfortable enough cushion?
    // I don't know why the Lats are 85 instead of 90
    double maxLat = -85;
    double minLat = 85;
    double maxLon = -180;
    double minLon = 180;

    foreach (Location loc in locations)
    {
        if (loc.Latitude > maxLat)
        {
            maxLat = loc.Latitude;
        }

        if (loc.Latitude < minLat)
        {
            minLat = loc.Latitude;
        }

        if (loc.Longitude > maxLon)
        {
            maxLon = loc.Longitude;
        }

        if (loc.Longitude < minLon)
        {
            minLon = loc.Longitude;
        }
    }

    Location retLoc = new Location();
    // I'm not sure this logic/math is right - test it later
    if (IsForNorthwestCorner)
    {
        retLoc.Latitude = maxLat - MAP_CUSHION;
        retLoc.Longitude = maxLon - MAP_CUSHION;
    }
    else // SouthEast corner - stretch a little both directions
    {
        retLoc.Latitude = minLat + MAP_CUSHION;
        retLoc.Longitude = minLon + MAP_CUSHION;
    }
}
3

There are 3 answers

4
Nicolas Boonaert On

In order to do this, you have at least two options that I'm thinking about.

  • First option: using fake locations

You choose an arbitrary padding (delta in latitude and longitude) that you will add or retrieve on the maximum/minimum location then you use SetView() to set the view on your pushpins as well as the other added locations that will permit to exceed your zoom level or set the view correctly to display all of you items.

To improve this technique, you can calculate the map's resolution and the corresponding delta for latitude and delta for longitude based on the size in pixel of your pushpins and the map's resolution.

  • Second option: manually calculating the best view

For this second one, I suggest you take a read at what Ricky shared a while back now, see for yourself: http://rbrundritt.wordpress.com/2009/07/21/determining-best-map-view-for-an-array-of-locations/

The code you will need to adapt is here (because answer with links are not good for StackOverflow):

   /// <summary>
/// Calculates the best map view for a list of locations for a map
/// </summary>
/// <param name="locations">List of location objects</param>
/// <param name="mapWidth">Map width in pixels</param>
/// <param name="mapHeight">Map height in pixels</param>
/// <param name="buffer">Width in pixels to use to create a buffer around the map. This is to keep pushpins from being cut off on the edge</param>
/// <returns>Returns a MapViewSpecification with the best map center point and zoom level for the given set of locations</returns>
public static MapViewSpecification BestMapView(IList<Location> locations, double mapWidth, double mapHeight, int buffer)
{
    MapViewSpecification mapView;
    Location center = new Location();
    double zoomLevel = 0;

    double maxLat = -85;
    double minLat = 85;
    double maxLon = -180;
    double minLon = 180;

    //calculate bounding rectangle
    for (int i = 0; i < locations.Count; i++)
    {
        if (locations[i].Latitude > maxLat)
        {
            maxLat = locations[i].Latitude;
        }

        if (locations[i].Latitude < minLat)
        {
            minLat = locations[i].Latitude;
        }

        if (locations[i].Longitude > maxLon)
        {
            maxLon = locations[i].Longitude;
        }

        if (locations[i].Longitude < minLon)
        {
            minLon = locations[i].Longitude;
        }
    }

    center.Latitude = (maxLat + minLat) / 2;
    center.Longitude = (maxLon + minLon) / 2;

    double zoom1=0, zoom2=0;

    //Determine the best zoom level based on the map scale and bounding coordinate information
    if (maxLon != minLon && maxLat != minLat)
    {
        //best zoom level based on map width
        zoom1 = Math.Log(360.0 / 256.0 * (mapWidth – 2*buffer) / (maxLon – minLon)) / Math.Log(2);
        //best zoom level based on map height
        zoom2 = Math.Log(180.0 / 256.0 * (mapHeight – 2*buffer) / (maxLat – minLat)) / Math.Log(2);
    }

    //use the most zoomed out of the two zoom levels
    zoomLevel = (zoom1 < zoom2) ? zoom1 : zoom2;

    mapView = new MapViewSpecification(center, zoomLevel);

    return mapView;
}

If you find any difficulty, let us know, I'm sure we'll be able to help you a little bit.

  • Yet another help:

Also, I found an old code that I wrote regarding the best mapview with padding, I can't send you the whole context but you'll get the idea:

//Determine the best zoom level based on the map scale and bounding coordinate information
if ((mapView.Bounds.SouthEast.Longitude != mapView.Bounds.NorthWest.Longitude) &&
    (mapView.Bounds.NorthWest.Latitude != mapView.Bounds.SouthEast.Latitude))
{
    Padding padding = mapView.Padding;

    //best zoom level based on map width
    zoom1 = (Math.Log(360.0 / 256.0 * (mapView.MapSize.Width - (padding.Left + padding.Right)) / (mapView.Bounds.SouthEast.Longitude - mapView.Bounds.NorthWest.Longitude)) / Math.Log(2));
    //best zoom level based on map height
    zoom2 = Math.Log(180.0 / 256.0 * (mapView.MapSize.Height - (padding.Top + padding.Bottom)) / (mapView.Bounds.NorthWest.Latitude - mapView.Bounds.SouthEast.Latitude)) / Math.Log(2);
}

//use the most zoomed out of the two zoom levels
mapView.ZoomLevel = (int)Math.Floor((zoom1 < zoom2) ? zoom1 : zoom2);
0
Jake Hunter On

An Easier solution to this would be to scale the maps.zoomlevel after using Maps.setview

bingMap.SetView(New LocationRect(locList))
bingMap.ZoomLevel = bingMap.ZoomLevel * 0.85

the .85 means to zoom out 15%

p.s. I am using vb.net btw but it is the same concept

1
rdhainaut On

You can use an array of locations used to create the Pushpins, and pass them into the fromLocations function on the Microsoft.Maps.LocationRect class. This function will return a LocationRect that encloses all the Location objects passed into it. This LocationRect can then be passed to the bounds setting property when setting the map view. Some developers may notice that this results in some pushpins being cut off at the maps edge. The reason for this is that the fromLocations function only calculates the bounding box based on the Location objects, and not on the additional area that the pushpin icons use. To accommodate this scenario, the padding setting can be used to buffer the view by a specified number of pixels. Generally setting this value to twice as large as the width/height of your pushpin icons works well. source

var locs = [array of Microsoft.Maps.Location];
var rect = Microsoft.Maps.LocationRect.fromLocations(locs);

map.setView({ bounds: rect, padding: 80 });

Et voilà ! :)