How To: Bing Maps For Windows 8 Metro Apps - JavaScript
In my last post I talked about Bing Map for C#, but you can also do the same of JavaScript projects using Bing Maps SDK.
Download Demo Project
Step 1: Maps Developer Account
Before you can use Bing Sdk from Windows 8 Metro App you need Maps Developer Account, open http://www.bingmapsportal.com/, create or enter with existing Windows Live account. Choose “Create or view keys” and create new Key for your application.
Step 2: Create Bing Maps Metro Application
- Download the latest bits - Bing Maps SDK for Metro style apps
- Open Visual Studio 2012 RC, and create JavaScript Blank Project.
- “Add Reference” –> select “Bing Maps for JavaScript (Beta)….” and click OK.
Step 3: Add Map Control
Inside default.html we add a div element under the body, this will be the map holder.
<body>
<div id="mapdiv"></div>
</body>
Now we need to load the map into that control, be just before we need to load the map module, in order to
do that we’ll call Maps.loadMoudle and set a callback to another method called – initMap.
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
} else {
}
args.setPromise(WinJS.UI.processAll().then(function () {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
}));
}
};
After the Maps module is loaded the initMap function will place the Map into the mapdiv element, the function
below defines several default values such as:
-
Bing Map credentials
-
Center location
-
Map type
-
Zoom
Finally we obtain the mapdiv element and define a new object called map defined from new Map that receive the
div and the options.
function initMap() {
try {
var mapOptions =
{
credentials: "AvOW5Fz4QTsubTTdmaVnseeZnAQ0JYwbx_6zdMdgHk6iF-pnoTE7vojUFJ1kXFTP",
center: new Microsoft.Maps.Location(50, 50),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 5
};
var mapDiv = document.querySelector("#mapdiv");
map = new Microsoft.Maps.Map(mapDiv, mapOptions);
}
catch (e) {
var md = new Windows.UI.Popups.MessageDialog(e.message);
md.showAsync();
}
}
Step 4: Basics
I’ve added couple of buttons on the right side to help us controlling the map view.
- Zoom – The JS map control has built in Zoom in and Zoom out but you can still change the zoom from code:
var zoomValue = map.getZoom();
map.setView({ zoom: zoomValue + 2 });
function changeMapType() {
var type = map.getMapTypeId();
switch (type) {
case Microsoft.Maps.MapTypeId.aerial:
type = Microsoft.Maps.MapTypeId.road;
break;
case Microsoft.Maps.MapTypeId.road:
type = Microsoft.Maps.MapTypeId.birdseye;
break;
default:
type = Microsoft.Maps.MapTypeId.aerial;
break;
}
map.setView({ center: map.getCenter(), mapTypeId: type });
}
- Set Current Location – Using Geolocator to find current location, then using map SetView to center map based on the new location (Make sure you enable “Location” as application capability.)
function centerPosition() {
var geolocator = new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(function (loc) {
var mapCenter = map.getCenter();
mapCenter.latitude = loc.coordinate.latitude;
mapCenter.longitude = loc.coordinate.longitude;
map.setView({ center: mapCenter, zoom: 18 });
});
}
Step 5: Push Pin
In step 4 we used “Geolocator” to find our current position, then we center the map based on the new position.
Instead of just centering the map we’ll like to add a PushPin directly on our location.
function addPushPin(location) {
map.entities.clear();
var pushpin = new Microsoft.Maps.Pushpin(location, null);
map.entities.push(pushpin);
}
function centerPosition() {
var geolocator = new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(function (loc) {
var mapCenter = map.getCenter();
mapCenter.latitude = loc.coordinate.latitude;
mapCenter.longitude = loc.coordinate.longitude;
map.setView({ center: mapCenter, zoom: 15 });
addPushPin(mapCenter);
});
}
Step 6: Tap and Pin
One more functionality I’ll would like to add is “Tap”, this mean the user click tap on the map (or mouse click) and this will place a Push Pin where the user clicked.
Instead of using the standard PushPin image I want to load my own image as pin, so I add a
“star.png” file to images folder.
Also I add new event listener for click on the mapDiv element calling new function called – “tapped”
var mapDiv = document.querySelector("#mapdiv");
mapDiv.addEventListener('click', tapped, false);
map = new Microsoft.Maps.Map(mapDiv, mapOptions);
When tapped event is fired we can use the tapped event arguments to get the relative position of the tap position by calling the tryPixelToLocation method from the map control, then after we received the location where the user clicked we can add a push pin and center the map based on the the new location.
function tapped(location) {
var mapCenter = map.getCenter();
var pos = map.tryPixelToLocation(new Microsoft.Maps.Point(location.clientX, location.clientY),
Microsoft.Maps.PixelReference.control);
mapCenter.latitude = pos.latitude;
mapCenter.longitude = pos.longitude;
map.setView({ center: mapCenter });
var pin = new Microsoft.Maps.Pushpin({ latitude: pos.latitude, longitude: pos.longitude }, {
icon: '/images/star.png',
anchor: new Microsoft.Maps.Point(8, 8)
});
map.entities.clear();
map.entities.push(pin);
}
Download Demo Project