Restrict map view

Restrict map view

Map will show up here under JavaScript/Typescript mode

Printout window

010,000,000

JavaScript

TypeScript

var bounds = Microsoft.Maps.LocationRect.fromLocations(
    new Microsoft.Maps.Location(28.332823,-81.492279),
    new Microsoft.Maps.Location(28.435825,-81.622231)
);

var map = new Microsoft.Maps.Map(
    document.getElementById('myMap'),
    {
        /* No need to set credentials if already passed in URL */
        maxBounds: bounds
    }
);

// Highlighting the border of bounds on the map
var boundsBorder = new Microsoft.Maps.Polyline([
    bounds.getNorthwest(),
    new Microsoft.Maps.Location(bounds.getNorthwest().latitude, bounds.getSoutheast().longitude),
    bounds.getSoutheast(),
    new Microsoft.Maps.Location(bounds.getSoutheast().latitude, bounds.getNorthwest().longitude)
]);

Additional details

In this example the map view is restricted within a LocationRect (highlighted in red), showing the Disney World in Orlando, USA. Panning and Zooming are only available within the bounds, and the map view will not extend beyond it as well.