Locking a Virtual Earth Map

There may be times when you don’t want to have a draggable map. . Oh, yes all the flexibility of draggable web maps makes Virtual Earth so much fun but sometimes you really want to control the horizonal and the vertical! 

If you do want to lock a map, basically to have the map viewer look at exactly what you want them to, then leverage the map.setView option!  There are two different ways to change the map view.

Set Map View Options

One way is to use the setView function on the map. For most cases, you will likely use the setView method as this also allows you to specify other view settings, such as setting the center and zoom level. The following code can be used to center the map over Barringer Crater located at coordinates 35.027222, -111.0225 and set the zoom level to 15.

Set View of a crater in Bing Maps

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
map.setView({
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    center: new Microsoft.Maps.Location(35.027222, -111.0225),
    zoom: 15
});

 

Restrict Map View Options

To actually "lock" the map view, you can restrict it 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.

Restrict view using SetView in Bing Maps

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),
    bounds.getNorthwest()], { strokeColor: 'red', strokeThickness: 5 });
map.entities.push(boundsBorder);

FAQs

Can beginners use these APIs?

If you’re new to adding a map to your web experiences, you can count on an extensive support system to guide you every step of the way, including detailed documentation In fact you can find both of the above samples inside our interactive code samples experience.

Are there other samples available?

If you’re already a coder and ready to take on a full source project, head to Samples.BingMapsPortal.com which offers a searchable interface for full working samples and all code available on Github.

What kind of key do I need?

Developers can choose either the Basic or Enterprise key. The basic key is free and supports up to 125k transactions per year. This key is ideal for proof-of-concept, educational, and general small scale applications.

The Enterprise key is perfect for businesses that build consumer-facing or high-powered logistics planning solutions and need a high-volume solution that can scale with their growing operations. Head over to our licensing page to find out which key is right for your next shipping route map.

 

Back to
Top

Related Stories