Question

I’m working on some map stuff and I’m stuck with something that seems to be quite basic.

The gist of what I’m doing is adding 10 flags to a map, and I need to dynamically set the zoom level and center of the map based on the position of the pins (map needs to be zoomed in as far as possible while still showing all pins).

This works exactly as expected with MultiMap without any intervention (as expected), but the Virtual Earth map doesn’t play nice. If I don’t give it a center Lat/Lon, it defaults to showing all of the USA.

Can anyone point me in the right direction in order to get this working?

EDIT:

Ok, I was able to calculate the proper center by using the following in my MVC Controller

''# we're going to rock the AVERAGE LAT/LON here
Dim eventCount As Integer = 0
Dim totalLat As Double = 0
Dim totalLon As Double = 0
For Each mel In MapEventList
    totalLat += mel.lat
    totalLon += mel.lon
    eventCount += 1
Next
ViewData("centerLat") = totalLat / eventCount
ViewData("centerLon") = totalLon / eventCount

Now I’m just stuck trying to calculate the Best Zoom Level

EDIT 2:

So I’ve removed the calculations from my controller and added it to my Javascript. The weight of the script is quite light, but will have the calculations done by the client machine and not my server (valuable if/when the site starts getting piles of hits)

$(document).ready(function () {
    // Load the Bing Map and populate it
    var increment = 0; // used to increment event locations
    var sumLat = 0; // used to find the average LAT location
    var sumLon = 0; // used to find the average LON location

    // Load the initial map
    LoadMap();

    // loop through all events and place a point on the map
    // also add to the sumLat and sumLon variable
    $.each(json_object, function () {
        increment = ++increment;
        sumLat = sumLat + this.lat;
        sumLon = sumLon + this.lon;
        LoadPoint(this.lat, this.lon, this.title, this.desc, increment);
    });

    // find the averate Lat and Lon for map centering
    var centerLat = sumLat / increment;
    var centerLon = sumLon / increment;
    LatLon = new VELatLong(centerLat, centerLon);

    // Set the new map Center based on the average of all points.
    map.SetCenter(LatLon)
});

function LoadMap() {
    map = new VEMap('bingMap');
    mapOptions = new VEMapOptions

    // sets map options for asthetics
    mapOptions.DashboardColor = "black";
    mapOptions.EnableDashboardLabels = false;
    mapOptions.EnableBirdseye = false;
    mapOptions.EnableDashboardLabels = false;

    // Load the initial map
    // note: the LatLon is "null" at this point because we are going to 
    // center the map later based on the average of all points.
    map.LoadMap(null, zoomLevel, null, null, null, false, null, mapOptions);

};

function LoadPoint(lat, lon, title, desc, pinId) {
    var point = new VELatLong(lat, lon);
    var pin = new VEShape(VEShapeType.Pushpin, point);
    pin.SetTitle(title);
    pin.SetDescription(desc + "<br /><br />lat: " + lat + " lon: " + lon);
    pin.SetCustomIcon("<div class='pinStyle'><div class='pinText'>" + pinId + "</div></div>");
    map.AddShape(pin);
};

However I’m still stuck trying to calculate the Best Zoom Level

Answer 1

If you are using the javascript version, then you don’t need to calculate it, you can directly give the array of VELatLong objects to VEMap.SetMapView, and it will center + zoom so that all pins are visible.