Export (0) Print
Expand All

Developing a Windows Store app

Bing

This topic outlines how to use the Bing Maps AJAX Control 7.0 to develop a Windows Store app using JavaScript. Note that the instructions for developing a Windows Store app using AJAX v7 are different than for other applications.

Hh852186.Tip(en-us,MSDN.10).gifTip:
If you are interested in developing a Windows Store app using C#/C++/VB, see Getting Started with Bing Maps in Windows Store Apps.

Adding a map to your Windows Store app

Requirements

Supported languages: For a list of supported languages, see Localizing the Map. The method for setting the language in JavaScript is shown below.

Create a Visual Studio project and reference the Bing Maps SDK

The following steps show you how to create Windows Store app project and then add the map control.

  1. Make sure you have downloaded and installed the Bing Maps SDK for Windows Store apps (for Windows 8.1) with Windows 8.1 and Visual Studio 2013.

  2. Start Microsoft Visual Studio. From the main menu, select File, New, then Project. In the New Project dialog, choose JavaScript as the language, select Windows Store, and then choose Blank App. Type a name for your application, and click OK to create the project.

  3. In Solution Explorer, right-click References for your project and select Add Reference. Expand Windows and then select Extensions. Select Bing Maps for JavaScript, and then click OK to add the reference. The default installation path for the Bing Maps SDK for Windows Store apps is C:\Users\<username>\AppData\Local\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Bing.Maps.JavaScript

  4. Open the default.html file and insert a reference to veapicore.js.

    <!-- Bing Map Control references -->
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    
  5. Add the following JavaScript code to load a module that downloads a necessary configuration file. Make sure to insert your Bing Maps Key.

    Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap, culture: "en-us", homeRegion: "US"});
    function initMap() {
            var map;
    
            var mapOptions =
            {
               credentials: "INSERT_YOUR_BING_MAPS_KEY"
            };
    
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
    }
    
  6. Replace the placeholder content with the following JavaScript code.

    <div id="mapDiv"> </div>
    

When you load the module, you can specify the callback function that loads the map as well as the culture parameter that determines the localized language and the homeRegion parameter that specifies the user region using the ISO 3166-1 Alpha-2 country code for the region. For a list of language codes that you can use, see Localizing the Map.

Now you can use the Bing Maps AJAX Control 7.0 API to create your Windows Store app. Additional Notes and a code Example are found below.

Additional Notes

  • All of the APIs available for the standard Bing Maps AJAX Control are supported for Windows Store apps.

  • When your application leaves a web page that contains the map control to go to another web page, you must use the dispose() function on the map object (map.dispose()) before leaving the page with the map.

  • The Bing Maps AJAX Control 7.0 modules are all supported, including Microsoft.Maps.AdvancedShapes, Microsoft.Maps.Directions, Microsoft.Maps.Search, Microsoft.Maps.Themes.BingTheme, Microsoft.Maps.Traffic, and Microsoft.Maps.VenueMaps. To use a module, you must include a reference to veapimodules.js, as shown below.

    <!-- Bing Map Control references -->
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapimodules.js"></script>
    
  • To use a custom module, register the module before referencing the module *.js file:

    <script>Microsoft.Maps.registerModule('myCustomModule');</script>
    <script type="text/javascript" src="/js/myCustomModule.js"></script>
    
    You can then load the module and invoke the callback function anywhere within your code:

    Microsoft.Maps.loadModule('myCustomModule', { callback: customModuleLoaded });
    
  • To make a REST service request, use the Windows 8 xhr handler:

    // Use the Bing Maps REST Service to return driving directions
    function restDirections() 
    {
       map.getCredentials( function(credentials) 
       {
          var start= 'Boston, MA'; var end= 'NY, NY'; 
          var routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start + '&wp.1=' + end + '&routePathOutput=Points&output=json&key=' + credentials;
          WinJS.xhr({ url: routeRequest }).then(routeCallback);
        });
    }
    
    // Route service callback function
    function routeCallback(result)
    { 
       result = JSON.parse(result.responseText);
    }
    
  • Windows 8 provides enhanced Web content security that may affect some JavaScript functionality. For more information, see the topic HTML, CSS, and JavaScript features and differences (Windows Store apps).

Example

The following code demonstrates a variety of functionality in a Windows Store app.

//default.html
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1024, height=768" />
    <title>BingMaps-JavaScript-SDK</title>
    <!-- WinJS references -->
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <!-- BingMaps JavaScript Control references -->
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapiModules.js"></script>
    <!-- BingMaps-JavaScript-SDK references -->
    <link href="/css/default.css" rel="stylesheet">
    <script type="text/javascript"  src="/js/default.js"></script>
    <!-- Use script tag to register custom module, this should be done before adding the custom module js reference -->
    <script>Microsoft.Maps.registerModule('clusterModule');</script>
    <script type="text/javascript" src="js/V7ClientSideClustering.js"></script>

</head>
<body>
<div id="content">
    <div id="header"> </div>
     <div id="directionsItinerary"> </div>
    <div id="mapdiv"> </div>
    <button id="setView">BirdsEye Mode</button>
    <button id="panRight">Pan right</button>
    <button id="pushpin">Pushpin</button>
    <button id="customPushpin">Custom pin</button>
    <button id="polygon">Polygon</button>
    <button id="infobox">Infobox</button>
    <button id="tilelayer">Tilelayer</button>
    <button id="vm">Venue Map</button>
    <button id="cm">Custom Module</button>
    <button id="restDirections">Rest Directions</button>
    <button id="traffic">Traffic</button> 
    <button id="bingTheme">Bing Theme</button> 
    <button id="complexShapes">Shape w/ Hole</button> 
    <button id="directions">Directions</button>
    <button id="geocode">Geocode</button>
    <button id="revGeocode">Rev GeoCode</button>
    <button id="search">Search</button>
    <button id="clear">Clear Map</button> 
    <button id="close">Close App</button> 
</div>
</body>
</html>

//default.js
//default.js
(function () {
    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            
            WinJS.UI.processAll();
        }
    };

    app.start();

    // set view api to show Birdseye view
    function setView() 
    {
        resetMapDiv();
        map.setView({ center: new Microsoft.Maps.Location(47.6215, -122.349329), mapTypeId: Microsoft.Maps.MapTypeId.auto, zoom: 18 });
    }
    // set view api to pan map
    function pan(x, y) 
    {
        resetMapDiv();
        var mapCenter = map.getCenter();
        var pos = map.tryPixelToLocation(new Microsoft.Maps.Point(map.getWidth() / 2 + x, map.getHeight() / 2 - (y - 1)), 
Microsoft.Maps.PixelReference.control);
        mapCenter.latitude += pos.latitude - mapCenter.latitude;
        mapCenter.longitude += pos.longitude - mapCenter.longitude;
        map.setView({ center: mapCenter });
    }
    // api to add pin on map
    function addPushpin() 
    {
        resetMapDiv();
        var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
        map.entities.push(pushpin);
    }

    // api to add custom pin on map
    function addCustomPushpin() {
        resetMapDiv();
        var pushpinOptions = {width: null, height: null, htmlContent: 
        "<div style='font-size:12px;font-weight:bold;border:solid 
         2px;background-color:Blue;width:100px;'>Custom Pushpin</div>"};
        var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
        map.entities.push(pushpin);
    }

    // api to add polygon on map
    function addPolygon() 
    {
        resetMapDiv();
        var center = map.getCenter();
        addCircle(center.latitude, center.longitude);
    }
    // add circle on map
    function addCircle(latitude, longitude) 
    {
        resetMapDiv();
        var radius;
        var zoom = map.getZoom();
        // calculate radius in KMs based on zoom level so that circle is displayed in current bounds
        switch (Math.floor(zoom / 4)) {
            case 0:
                radius = 500;
                break;
            case 1:
                radius = 100;
                break;
            case 2:
                radius = 50;
                break;
            case 3:
                radius = 5;
                break;
            default:
                radius = 0.1;
                break;

        }

        var R = 6371; // earth's mean radius in km
        var lat = (latitude * Math.PI) / 180;
        var lon = (longitude * Math.PI) / 180;
        var d = parseFloat(radius) / R; 
        var circle= new Array();
        for (var x = 0; x <= 360; x++) {
            var r = x * Math.PI / 180; //rad
            var cirLat = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(r));
            var cirLong = ((lon + Math.atan2(Math.sin(r) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(cirLat))) * 
180) / Math.PI;
            cirLat = (cirLat * 180) / Math.PI;
            circle.push(new Microsoft.Maps.Location(cirLat, cirLong));
        }
        var polygoncolor = new Microsoft.Maps.Color(Math.round(255 * Math.random()), Math.round(255 * Math.random()), Math.round(255 * 
Math.random()), Math.round(255 * Math.random()));
        var polygon = new Microsoft.Maps.Polygon(circle, { fillColor: polygoncolor, strokeColor: polygoncolor });
        // Add the polygon to the map
        map.entities.push(polygon);
    }
    // api to add infobox on map
   function addInfobox() 
   {
       resetMapDiv();
       map.entities.clear();
       var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { zIndex: 3 });
       map.entities.push(pushpin);
       var infoboxOptions = { zIndex: 4 };
       var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions);
       map.entities.push(defaultInfobox);
    }
    // api to add tilelayer on map
    function addtilelayer() 
    {
        resetMapDiv();
        var options = { uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png', width: 256, height: 256 };
     
   var tileSource = new Microsoft.Maps.TileSource(options);
        var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource });
   
     map.entities.push(tilelayer);
        //center map to show tile layer
        map.setView({ center: new Microsoft.Maps.Location(48.03, -
122.42), zoom: 11 });
    }

    // api to add tilelayer on map
    function addtraffic() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', { callback: trafficModuleLoaded });
    }

    function trafficModuleLoaded() 
    {
        //set center 
        map.setView({ center: new Microsoft.Maps.Location(40.71, -74.00), zoom: 8 });
        var trafficManager = new Microsoft.Maps.Traffic.TrafficManager(map);
        // show the traffic Layer
        trafficManager.show();
    }
    // api to add tilelayer on map
    function addBingThemeMap() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', {
            callback: function () {
                var id = 'Your Bing Maps Key';
                map = new Microsoft.Maps.Map(document.getElementById('mapdiv'),
                {
                    credentials: id,
                    center: new Microsoft.Maps.Location(47.60, -122.33),
                    zoom: 10,
                    theme: new Microsoft.Maps.Themes.BingTheme()
                });
                var pin1 = new Microsoft.Maps.Pushpin(map.getCenter(), null);
                map.entities.push(pin1);
                map.entities.push(new Microsoft.Maps.Infobox(map.getCenter(), { title: 'Seattle', description: 'description here', pushpin: 
pin1 }));
                var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.45, -122.33), null);
                map.entities.push(pin2);
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.45, -122.33), { title: 'Tacoma', description: 
'description here', pushpin: pin2 }));
            }
        });
    }
    
    function addComplexShapes() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.AdvancedShapes', {
            callback: function () {

                var polygon = new Microsoft.Maps.Polygon([
                        [new Microsoft.Maps.Location(47.604, -121.940),
                            new Microsoft.Maps.Location(47.604, -121.540),
                            new Microsoft.Maps.Location(47.834, -121.540),
                            new Microsoft.Maps.Location(47.834, -121.940),
                            new Microsoft.Maps.Location(47.604, -121.940)],
                        [new Microsoft.Maps.Location(47.704, -121.740),
                            new Microsoft.Maps.Location(47.704, -121.640),
                            new Microsoft.Maps.Location(47.804, -121.640),
                            new Microsoft.Maps.Location(47.804, -121.740),
                            new Microsoft.Maps.Location(47.704, -121.740)],
                        [new Microsoft.Maps.Location(47.744, -121.700),
                            new Microsoft.Maps.Location(47.744, -121.680),
                            new Microsoft.Maps.Location(47.764, -121.680),
                            new Microsoft.Maps.Location(47.764, -121.700),
                            new Microsoft.Maps.Location(47.744, -121.700)]]);
                map.entities.push(polygon);
                map.setView({ zoom: 11, center: new Microsoft.Maps.Location(47.704, -121.740) });
            }
        });
    }
    // api to load custom module
    function customModule() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('clusterModule', { callback: customModuleLoaded });
        map.setView({ zoom: 1, center: new Microsoft.Maps.Location(0, 0), mapTypeId: Microsoft.Maps.MapTypeId.road });
    }
   
    // custom module callback
    function customModuleLoaded() 
    {
        map.entities.clear();
       
        testDataGenerator.generateData(100, dataCallback);
    }
    // api to load venue map module on map
    function addVM() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback: vmCallback });
    }
    // venue map module callback
    function vmCallback() 
    {
        var venueMapFactory = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
        venueMapFactory.create({
                                    venueMapId: 'hcl-timessquare',
                                    success: success,
                                    error: err
                              });
    }
    // error callback for venue map
    function err(errorCode, args) 
    {
        var message = 'Error while loading venue map. Errorcode : ' + errorCode;
        var md = new Windows.UI.Popups.MessageDialog(message);
        md.showAsync();
    }

    // success callback from venue map callback
    function success(venueMap, args) 
    {
        venueMap.show();
        map.setView(venueMap.bestMapView);
    }

    var searchManager = null;
    var currInfobox = null;
    // callback function to create searchManager once search module is loaded
    function createSearchManager()
    {
        if (!searchManager)
        {
            map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map));
            searchManager = map.getComponent('searchManager');
        }
    }

    // business search api request
    function search()
    {
        resetMapDiv();
        if (searchManager)
        {
            searchRequest();
        }
        else
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest });
        }
    }

    // business search api
    function searchRequest()
    {
        createSearchManager();
        var what = 'pizza';
        var userData = { name: 'Maps Test User', id: 'XYZ' };
        var where = 'boston, ma';
        var query = '';
        var request =
            {
                what: what,
                where: where,
                query: query,
                count: 10,
                startIndex: 0,
                bounds: map.getBounds(),
                callback: search_onSearchSuccess,
                errorCallback: search_onSearchFailure,
                userData: userData
            };
        searchManager.search(request);
    }

    // business search api success callback
    function search_onSearchSuccess(result, userData)
    {
        map.entities.clear();
        var searchResults = result && result.searchResults;
        if (searchResults)
        {
            for (var i = 0; i < searchResults.length; i++)
            {
                search_createMapPin(searchResults[i]);
            }

            if (result.searchRegion && result.searchRegion.mapBounds)
            {
                map.setView({ bounds: result.searchRegion.mapBounds.locationRect });
            }
        }
    }
    // business search api failure callback
    function search_onSearchFailure(result, userData)
    {
        var md = new Windows.UI.Popups.MessageDialog("Search failed");
        md.showAsync();
    }

    // business search api display search results
    function search_createMapPin(result)
    {
        if (result)
        {
            var pin = new Microsoft.Maps.Pushpin(result.location, null);
            Microsoft.Maps.Events.addHandler(pin, 'click', function () { search_showInfoBox(result) });
            map.entities.push(pin);
        }
    }

    // business search api infobox
    function search_showInfoBox(result)
    {
        if (currInfobox)
        {
            currInfobox.setOptions({ visible: true });
            map.entities.remove(currInfobox);
        }
        currInfobox = new Microsoft.Maps.Infobox(
            result.location,
            {
                title: result.name,
                description: [result.address, result.city, result.state, result.country, result.phone].join(" "),
                showPointer: true,
                titleAction: null,
                titleClickHandler: null
            });

        currInfobox.setOptions({ visible: true });
        map.entities.push(currInfobox);
    }

    // reverse geocode api request
    function reverseGeocode()
    {
        resetMapDiv();
        if (searchManager)
        {
            reverseGeocodeRequest();
        }

        else
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: reverseGeocodeRequest });
        }
    }

    // reverse geocode api
    function reverseGeocodeRequest()
    {
        createSearchManager();
        var userData = { name: 'Maps Test User', id: 'XYZ' };
        var request =
{
    location: map.getCenter(),
    callback: onReverseGeocodeSuccess,
    errorCallback: onReverseGeocodeFailed,
    userData: userData
};
        searchManager.reverseGeocode(request);
    }

    // reverse geocode api request success callback
    function onReverseGeocodeSuccess(result, userData)
    {
        if (result)
        {
            map.entities.clear();
            var pushpin = new Microsoft.Maps.Pushpin(result.location, null);
            map.setView({ center: result.location, zoom: 10 });
            map.entities.push(pushpin);
        }
    }

    // reverse geocode api request failure callback
    function onReverseGeocodeFailed(result, userData)
    {
        var md = new Windows.UI.Popups.MessageDialog("Reverse Geocode failed");
        md.showAsync();
    }

    // geocode api request
    function geocode()
    {
        resetMapDiv();
        if (searchManager)
        {
            geocodeRequest();
        }
        else
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: geocodeRequest });
        }
    }

    // geocode api request
    function geocodeRequest()
    {
        createSearchManager();
        var where = 'Denver, CO';
        var userData = { name: 'Maps Test User', id: 'XYZ' };
        var request =
{
    where: where,
    count: 2,
    bounds: map.getBounds(),
    callback: onGeocodeSuccess,
    errorCallback: onGeocodeFailed,
    userData: userData
};
        searchManager.geocode(request);
    }

    // geocode api request success callback
    function onGeocodeSuccess(result, userData)
    {
        if (result)
        {
            map.entities.clear();
            var MM = Microsoft.Maps;
            var topResult = result.results && result.results[0];
            if (topResult)
            {
                var pushpin = new MM.Pushpin(topResult.location, null);
                map.setView({ center: topResult.location, zoom: 10 });
                map.entities.push(pushpin);
            }
        }
    }

    // geocode api request failure callback
    function onGeocodeFailed(result, userData)
    {
        var md = new Windows.UI.Popups.MessageDialog("Geocode failed");
        md.showAsync();
    }

    // api to use Rest direction service
    function getDirections() 
    {
        map.getCredentials( function(credentials) 
        {
            var start= 'Boston, MA'; var end= 'New York, NY'; 
            var routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start + '&wp.1=' + end + 
                  '&routePathOutput=Points&output=json&key=' + credentials;
            WinJS.xhr({ url: routeRequest }).then(routeCallback);
        });
    }
    // route callback
    function routeCallback(result)    {
        result = JSON.parse(result.responseText);
        if (result && result.resourceSets && result.resourceSets.length > 0 
        && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0 
        && result.resourceSets[0].resources[0].routeLegs.length > 0)           
        {
          // instruction list can be displayed using the code below
          var resultsListItem = null;              
          var resultsList = document.createElement("ol");
          for (var i = 0; i < result.resourceSets[0].resources[0].routeLegs[0].itineraryItems.length; ++i)
          { 
            resultsListItem = document.createElement("li");                  
            resultsList.appendChild(resultsListItem);                  
            var resultStr = result.resourceSets[0].resources[0].routeLegs[0].itineraryItems[i].instruction.text;                  
            resultsListItem.innerHTML = resultStr;              
          }              
          var bbox = result.resourceSets[0].resources[0].bbox;               
          var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], 
                                                            bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));     
          map.setView({ bounds: viewBoundaries});               
          var routeline = result.resourceSets[0].resources[0].routePath.line;           
          var routepoints = new Array();               
          for (var i = 0; i < routeline.coordinates.length; i++) {                   
                  routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);              
                  }               
          var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});               
          var startPushpinOptions = { icon: '/images/start.png', anchor: new Microsoft.Maps.Point(3, 28) };               
          var startPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[0][0], 
                                routeline.coordinates[0][1]), startPushpinOptions);          
          var endPushpinOptions = { icon: '/images/end.png', anchor: new Microsoft.Maps.Point(3, 28)};
          var endPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[routeline.coordinates.length-1][0], 
                                    routeline.coordinates[routeline.coordinates.length-1][1]), endPushpinOptions);               
                                    map.entities.push(startPin);               
                                    map.entities.push(endPin);
                                    map.entities.push(routeshape);         }   }   
    // api to use Rest direction service
    function getDD() {
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingDirections });
    }
      
    function createDrivingDirections()
    {
        document.getElementById("directionsItinerary").style.display = "block";
        document.getElementById("mapdiv").style.width = "75%";
        var directionsManager;
        directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
        // Set Route Mode to driving 
        directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
        var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle, WA' });
        directionsManager.addWaypoint(seattleWaypoint);
        var tacomaWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Tacoma, WA', 
                             location: new Microsoft.Maps.Location(47.255134, -122.441650) });
        directionsManager.addWaypoint(tacomaWaypoint);
        // Set the element in which the itinerary will be rendered
        directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
        directionsManager.calculateDirections();
    }

    // clear map entities
    function clearMap() 
    {
        resetMapDiv(); 
        map.entities.clear();
    }
    // close app
    function close() 
    {
        window.close();
    }

    function initialize() 
    {
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap, culture: en-us, homeRegion: US });
        document.getElementById("directions").addEventListener("click", getDD, false);
        document.getElementById("setView").addEventListener("click", setView, false);
        document.getElementById("panRight").addEventListener("click", function () { pan(16, 0) }, false);
        document.getElementById("pushpin").addEventListener("click", addPushpin, false);
        document.getElementById("customPushpin").addEventListener("click", addCustomPushpin, false);
        document.getElementById("polygon").addEventListener("click", addPolygon, false);
        document.getElementById("clear").addEventListener("click", clearMap, false);
        document.getElementById("close").addEventListener("click", close, false);
        document.getElementById("infobox").addEventListener("click", addInfobox, false);
        document.getElementById("vm").addEventListener("click", addVM, false);
        document.getElementById("cm").addEventListener("click", customModule, false);
        document.getElementById("restDirections").addEventListener("click", getDirections, false);
        document.getElementById("tilelayer").addEventListener("click", addtilelayer, false);
        document.getElementById("traffic").addEventListener("click", addtraffic, false);
        document.getElementById("bingTheme").addEventListener("click", addBingThemeMap, false);
        document.getElementById("complexShapes").addEventListener("click", addComplexShapes, false);
        document.getElementById("geocode").addEventListener("click", geocode, false);
        document.getElementById("revGeocode").addEventListener("click", reverseGeocode, false);
        document.getElementById("search").addEventListener("click", search, false);
    }
    document.addEventListener("DOMContentLoaded", initialize, false);

})();

var map;
function initMap() 
{
    try 
    {
        var mapOptions =
        {
            // Add your Bing Maps key here
            credentials: 'INSERT_YOUR_BING_MAPS_KEY',
            center: new Microsoft.Maps.Location(40.71, -74.00),
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 8
        };
        map = new Microsoft.Maps.Map(document.getElementById("mapdiv"), mapOptions);
    }
    catch (e) 
    {
        var md = new Windows.UI.Popups.MessageDialog(e.message);
        md.showAsync();
    }
}

// help functions

function resetMapDiv()
{
    if (document.getElementById("directionsItinerary").style.display == "block")
    {
        document.getElementById("directionsItinerary").style.display = "none";
        document.getElementById("mapdiv").style.width = "100%";
    }
}
function displayInfo(e) 
{
    if (e.targetType == "pushpin") 
    {
        showInfobox(e.target);
    }
}

function showInfobox(shape) 
{
    for (var i = map.entities.getLength() - 1; i >= 0; i--) 
    {
        var pushpin = map.entities.get(i);        if (pushpin.toString() == '[Infobox]') 
        {
            map.entities.removeAt(i);
        };
    }
    var infoboxOptions = {  width: 170,height: 80,
                            showCloseButton: true, 
                            zIndex: 10, 
                            offset: new Microsoft.Maps.Point(10, 0),                             
                            showPointer: true, 
                            title: shape.title,
                            description: shape.description 
                          }; 
   var defInfobox = new Microsoft.Maps.Infobox(shape.getLocation(), infoboxOptions);    map.entities.push(defInfobox);
}

function createClusteredpin(cluster, latlong) 
{
    var pin = new Microsoft.Maps.Pushpin(latlong, {
                                                    icon: '/images/clusteredpin.png',
                                                    anchor: new Microsoft.Maps.Point(8, 8)
                                                  });
    pin.title = 'Cluster pin';
    pin.description = 'Number of pins : ' + cluster.length;
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfo);
    return pin;
}
    
function createPin(data) 
{
    var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
                                                        icon: '/images/nonclusteredpin.png',
                                                        anchor: new Microsoft.Maps.Point(8, 8)
                                                        });
    pin.title = 'Single pin';
    pin.description = 'GridKey: ' + data.GridKey;
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfo);
    return pin;
}
function dataCallback(response) 
{
    if (response != null) 
    {
       var greenLayer = new ClusteredEntityCollection(map, 
                                                        {
                                                            singlePinCallback: createPin,
                                                            clusteredPinCallback: createClusteredpin
                                                        });
       greenLayer.SetData(response);
    }
} (function () {
    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            
            WinJS.UI.processAll();
        }
    };

    app.start();

    // set view api to show Birdseye view
    function setView() 
    {
        resetMapDiv();
        map.setView({ center: new Microsoft.Maps.Location(47.6215, -122.349329), mapTypeId: Microsoft.Maps.MapTypeId.auto, zoom: 18 });
    }
    // set view api to pan map
    function pan(x, y) 
    {
        resetMapDiv();
        var mapCenter = map.getCenter();
        var pos = map.tryPixelToLocation(new Microsoft.Maps.Point(map.getWidth() / 2 + x, map.getHeight() / 2 - (y - 1)), 
Microsoft.Maps.PixelReference.control);
        mapCenter.latitude += pos.latitude - mapCenter.latitude;
        mapCenter.longitude += pos.longitude - mapCenter.longitude;
        map.setView({ center: mapCenter });
    }
    // api to add pin on map
    function addPushpin() 
    {
        resetMapDiv();
        var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
        map.entities.push(pushpin);
    }

    // api to add custom pin on map
    function addCustomPushpin() {
        resetMapDiv();
        var pushpinOptions = {width: null, height: null, htmlContent: "<div style='font-size:12px;font-weight:bold;border:solid 
2px;background-color:Blue;width:100px;'>Custom Pushpin</div>"};
        var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
        map.entities.push(pushpin);
    }

    // api to add polygon on map
    function addPolygon() 
    {
        resetMapDiv();
        var center = map.getCenter();
        addCircle(center.latitude, center.longitude);
    }
    // add circle on map
    function addCircle(latitude, longitude) 
    {
        resetMapDiv();
        var radius;
        var zoom = map.getZoom();
        // calculate radius in KMs based on zoom level so that circle is displayed in current bounds
        switch (Math.floor(zoom / 4)) {
            case 0:
                radius = 500;
                break;
            case 1:
                radius = 100;
                break;
            case 2:
                radius = 50;
                break;
            case 3:
                radius = 5;
                break;
            default:
                radius = 0.1;
                break;

        }

        var R = 6371; // earth's mean radius in km
        var lat = (latitude * Math.PI) / 180;
        var lon = (longitude * Math.PI) / 180;
        var d = parseFloat(radius) / R; 
        var circle= new Array();
        for (var x = 0; x <= 360; x++) {
            var r = x * Math.PI / 180; //rad
            var cirLat = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(r));
            var cirLong = ((lon + Math.atan2(Math.sin(r) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(cirLat))) * 
180) / Math.PI;
            cirLat = (cirLat * 180) / Math.PI;
            circle.push(new Microsoft.Maps.Location(cirLat, cirLong));
        }
        var polygoncolor = new Microsoft.Maps.Color(Math.round(255 * Math.random()), Math.round(255 * Math.random()), Math.round(255 * 
Math.random()), Math.round(255 * Math.random()));
        var polygon = new Microsoft.Maps.Polygon(circle, { fillColor: polygoncolor, strokeColor: polygoncolor });
        // Add the polygon to the map
        map.entities.push(polygon);
    }
    // api to add infobox on map
   function addInfobox() 
   {
       resetMapDiv();
       map.entities.clear();
       var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { zIndex: 3 });
       map.entities.push(pushpin);
       var infoboxOptions = { zIndex: 4 };
       var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions);
       map.entities.push(defaultInfobox);
    }
    // api to add tilelayer on map
    function addtilelayer() 
    {
        resetMapDiv();
        var options = { uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png', width: 256, height: 256 };
     
   var tileSource = new Microsoft.Maps.TileSource(options);
        var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource });
   
     map.entities.push(tilelayer);
        //center map to show tile layer
        map.setView({ center: new Microsoft.Maps.Location(48.03, -
122.42), zoom: 11 });
    }

    // api to add tilelayer on map
    function addtraffic() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', { callback: trafficModuleLoaded });
    }

    function trafficModuleLoaded() 
    {
        //set center 
        map.setView({ center: new Microsoft.Maps.Location(40.71, -74.00), zoom: 8 });
        var trafficManager = new Microsoft.Maps.Traffic.TrafficManager(map);
        // show the traffic Layer
        trafficManager.show();
    }
    // api to add tilelayer on map
    function addBingThemeMap() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', {
            callback: function () {
                var id = 'Your Bing Maps Key';
                map = new Microsoft.Maps.Map(document.getElementById('mapdiv'),
                {
                    credentials: id,
                    center: new Microsoft.Maps.Location(47.60, -122.33),
                    zoom: 10,
                    theme: new Microsoft.Maps.Themes.BingTheme()
                });
                var pin1 = new Microsoft.Maps.Pushpin(map.getCenter(), null);
                map.entities.push(pin1);
                map.entities.push(new Microsoft.Maps.Infobox(map.getCenter(), { title: 'Seattle', description: 'description here', pushpin: 
pin1 }));
                var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.45, -122.33), null);
                map.entities.push(pin2);
                map.entities.push(new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(47.45, -122.33), { title: 'Tacoma', description: 
'description here', pushpin: pin2 }));
            }
        });
    }
    
    function addComplexShapes() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.AdvancedShapes', {
            callback: function () {

                var polygon = new Microsoft.Maps.Polygon([
                        [new Microsoft.Maps.Location(47.604, -121.940),
                            new Microsoft.Maps.Location(47.604, -121.540),
                            new Microsoft.Maps.Location(47.834, -121.540),
                            new Microsoft.Maps.Location(47.834, -121.940),
                            new Microsoft.Maps.Location(47.604, -121.940)],
                        [new Microsoft.Maps.Location(47.704, -121.740),
                            new Microsoft.Maps.Location(47.704, -121.640),
                            new Microsoft.Maps.Location(47.804, -121.640),
                            new Microsoft.Maps.Location(47.804, -121.740),
                            new Microsoft.Maps.Location(47.704, -121.740)],
                        [new Microsoft.Maps.Location(47.744, -121.700),
                            new Microsoft.Maps.Location(47.744, -121.680),
                            new Microsoft.Maps.Location(47.764, -121.680),
                            new Microsoft.Maps.Location(47.764, -121.700),
                            new Microsoft.Maps.Location(47.744, -121.700)]]);
                map.entities.push(polygon);
                map.setView({ zoom: 11, center: new Microsoft.Maps.Location(47.704, -121.740) });
            }
        });
    }
    // api to load custom module
    function customModule() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('clusterModule', { callback: customModuleLoaded });
        map.setView({ zoom: 1, center: new Microsoft.Maps.Location(0, 0), mapTypeId: Microsoft.Maps.MapTypeId.road });
    }
   
    // custom module callback
    function customModuleLoaded() 
    {
        map.entities.clear();
       
        testDataGenerator.generateData(100, dataCallback);
    }
    // api to load venue map module on map
    function addVM() 
    {
        resetMapDiv();
        Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback: vmCallback });
    }
    // venue map module callback
    function vmCallback() 
    {
        var venueMapFactory = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
        venueMapFactory.create({
                                    venueMapId: 'hcl-timessquare',
                                    success: success,
                                    error: err
                              });
    }
    // error callback for venue map
    function err(errorCode, args) 
    {
        var message = 'Error while loading venue map. Errorcode : ' + errorCode;
        var md = new Windows.UI.Popups.MessageDialog(message);
        md.showAsync();
    }

    // success callback from venue map callback
    function success(venueMap, args) 
    {
        venueMap.show();
        map.setView(venueMap.bestMapView);
    }

    var searchManager = null;
    var currInfobox = null;
    // callback function to create searchManager once search module is loaded
    function createSearchManager()
    {
        if (!searchManager)
        {
            map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map));
            searchManager = map.getComponent('searchManager');
        }
    }

    // business search api request
    function search()
    {
        resetMapDiv();
        if (searchManager)
        {
            searchRequest();
        }
        else
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest });
        }
    }

    // business search api
    function searchRequest()
    {
        createSearchManager();
        var what = 'pizza';
        var userData = { name: 'Maps Test User', id: 'XYZ' };
        var where = 'boston, ma';
        var query = '';
        var request =
            {
                what: what,
                where: where,
                query: query,
                count: 10,
                startIndex: 0,
                bounds: map.getBounds(),
                callback: search_onSearchSuccess,
                errorCallback: search_onSearchFailure,
                userData: userData
            };
        searchManager.search(request);
    }

    // business search api success callback
    function search_onSearchSuccess(result, userData)
    {
        map.entities.clear();
        var searchResults = result && result.searchResults;
        if (searchResults)
        {
            for (var i = 0; i < searchResults.length; i++)
            {
                search_createMapPin(searchResults[i]);
            }

            if (result.searchRegion && result.searchRegion.mapBounds)
            {
                map.setView({ bounds: result.searchRegion.mapBounds.locationRect });
            }
        }
    }
    // business search api failure callback
    function search_onSearchFailure(result, userData)
    {
        var md = new Windows.UI.Popups.MessageDialog("Search failed");
        md.showAsync();
    }

    // business search api display search results
    function search_createMapPin(result)
    {
        if (result)
        {
            var pin = new Microsoft.Maps.Pushpin(result.location, null);
            Microsoft.Maps.Events.addHandler(pin, 'click', function () { search_showInfoBox(result) });
            map.entities.push(pin);
        }
    }

    // business search api infobox
    function search_showInfoBox(result)
    {
        if (currInfobox)
        {
            currInfobox.setOptions({ visible: true });
            map.entities.remove(currInfobox);
        }
        currInfobox = new Microsoft.Maps.Infobox(
            result.location,
            {
                title: result.name,
                description: [result.address, result.city, result.state, result.country, result.phone].join(" "),
                showPointer: true,
                titleAction: null,
                titleClickHandler: null
            });

        currInfobox.setOptions({ visible: true });
        map.entities.push(currInfobox);
    }

    // reverse geocode api request
    function reverseGeocode()
    {
        resetMapDiv();
        if (searchManager)
        {
            reverseGeocodeRequest();
        }

        else
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: reverseGeocodeRequest });
        }
    }

    // reverse geocode api
    function reverseGeocodeRequest()
    {
        createSearchManager();
        var userData = { name: 'Maps Test User', id: 'XYZ' };
        var request =
{
    location: map.getCenter(),
    callback: onReverseGeocodeSuccess,
    errorCallback: onReverseGeocodeFailed,
    userData: userData
};
        searchManager.reverseGeocode(request);
    }

    // reverse geocode api request success callback
    function onReverseGeocodeSuccess(result, userData)
    {
        if (result)
        {
            map.entities.clear();
            var pushpin = new Microsoft.Maps.Pushpin(result.location, null);
            map.setView({ center: result.location, zoom: 10 });
            map.entities.push(pushpin);
        }
    }

    // reverse geocode api request failure callback
    function onReverseGeocodeFailed(result, userData)
    {
        var md = new Windows.UI.Popups.MessageDialog("Reverse Geocode failed");
        md.showAsync();
    }

    // geocode api request
    function geocode()
    {
        resetMapDiv();
        if (searchManager)
        {
            geocodeRequest();
        }
        else
        {
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: geocodeRequest });
        }
    }

    // geocode api request
    function geocodeRequest()
    {
        createSearchManager();
        var where = 'Denver, CO';
        var userData = { name: 'Maps Test User', id: 'XYZ' };
        var request =
{
    where: where,
    count: 2,
    bounds: map.getBounds(),
    callback: onGeocodeSuccess,
    errorCallback: onGeocodeFailed,
    userData: userData
};
        searchManager.geocode(request);
    }

    // geocode api request success callback
    function onGeocodeSuccess(result, userData)
    {
        if (result)
        {
            map.entities.clear();
            var MM = Microsoft.Maps;
            var topResult = result.results && result.results[0];
            if (topResult)
            {
                var pushpin = new MM.Pushpin(topResult.location, null);
                map.setView({ center: topResult.location, zoom: 10 });
                map.entities.push(pushpin);
            }
        }
    }

    // geocode api request failure callback
    function onGeocodeFailed(result, userData)
    {
        var md = new Windows.UI.Popups.MessageDialog("Geocode failed");
        md.showAsync();
    }

    // api to use Rest direction service
    function getDirections() 
    {
        map.getCredentials( function(credentials) 
        {
            var start= 'Boston, MA'; var end= 'New York, NY'; 
            var routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start + '&wp.1=' + end + 
'&routePathOutput=Points&output=json&key=' + credentials;
            WinJS.xhr({ url: routeRequest }).then(routeCallback);
        });
    }
    // route callback
    function routeCallback(result)    {           result = JSON.parse(result.responseText);
          if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets
[0].resources.length > 0 && result.resourceSets[0].resources[0].routeLegs.length > 0)           {              // instruction list can be 
displayed using below code              var resultsListItem = null;              var resultsList = document.createElement("ol");
              for (var i = 0; i < result.resourceSets[0].resources[0].routeLegs[0].itineraryItems.length; ++i)              {                
  resultsListItem = document.createElement("li");                  resultsList.appendChild(resultsListItem);                  var resultStr 
= result.resourceSets[0].resources[0].routeLegs[0].itineraryItems[i].instruction.text;                  resultsListItem.innerHTML = 
resultStr;              }              var bbox = result.resourceSets[0].resources[0].bbox;               var viewBoundaries = 
Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));     
         map.setView({ bounds: viewBoundaries});               var routeline = result.resourceSets[0].resources[0].routePath.line;           
    var routepoints = new Array();               for (var i = 0; i < routeline.coordinates.length; i++)               {                   
routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);              }               var 
routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});               var 
startPushpinOptions = { icon: '/images/start.png', anchor: new Microsoft.Maps.Point(3, 28) };               var startPin= new 
Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[0][0], routeline.coordinates[0][1]), startPushpinOptions);          
     var endPushpinOptions = { icon: '/images/end.png', anchor: new Microsoft.Maps.Point(3, 28)};               var endPin= new 
Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[routeline.coordinates.length-1][0], routeline.coordinates
[routeline.coordinates.length-1][1]), endPushpinOptions);               map.entities.push(startPin);               map.entities.push
(endPin);               map.entities.push(routeshape);         }   }   
    // api to use Rest direction service
    function getDD() {
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingDirections });
    }
      
    function createDrivingDirections()
    {
        document.getElementById("directionsItinerary").style.display = "block";
        document.getElementById("mapdiv").style.width = "75%";
        var directionsManager;
        directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
        // Set Route Mode to driving 
        directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
        var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle, WA' });
        directionsManager.addWaypoint(seattleWaypoint);
        var tacomaWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Tacoma, WA', location: new Microsoft.Maps.Location
(47.255134, -122.441650) });
        directionsManager.addWaypoint(tacomaWaypoint);
        // Set the element in which the itinerary will be rendered
        directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
  //      alert('Calculating directions...');
        directionsManager.calculateDirections();
    }

    // clear map entities
    function clearMap() 
    {
        resetMapDiv(); 
        map.entities.clear();
    }
    // close app
    function close() 
    {
        window.close();
    }

    function initialize() 
    {
        Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap, culture: en-us, homeRegion: US });
        document.getElementById("directions").addEventListener("click", getDD, false);
        document.getElementById("setView").addEventListener("click", setView, false);
        document.getElementById("panRight").addEventListener("click", function () { pan(16, 0) }, false);
        document.getElementById("pushpin").addEventListener("click", addPushpin, false);
        document.getElementById("customPushpin").addEventListener("click", addCustomPushpin, false);
        document.getElementById("polygon").addEventListener("click", addPolygon, false);
        document.getElementById("clear").addEventListener("click", clearMap, false);
        document.getElementById("close").addEventListener("click", close, false);
        document.getElementById("infobox").addEventListener("click", addInfobox, false);
        document.getElementById("vm").addEventListener("click", addVM, false);
        document.getElementById("cm").addEventListener("click", customModule, false);
        document.getElementById("restDirections").addEventListener("click", getDirections, false);
        document.getElementById("tilelayer").addEventListener("click", addtilelayer, false);
        document.getElementById("traffic").addEventListener("click", addtraffic, false);
        document.getElementById("bingTheme").addEventListener("click", addBingThemeMap, false);
        document.getElementById("complexShapes").addEventListener("click", addComplexShapes, false);
        document.getElementById("geocode").addEventListener("click", geocode, false);
        document.getElementById("revGeocode").addEventListener("click", reverseGeocode, false);
        document.getElementById("search").addEventListener("click", search, false);
    }
    document.addEventListener("DOMContentLoaded", initialize, false);

})();

var map;
function initMap() 
{
    try 
    {
        var mapOptions =
        {
            // Add your Bing Maps key here
            credentials: 'INSERT_YOUR_BING_MAPS_KEY',
            center: new Microsoft.Maps.Location(40.71, -74.00),
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 8
        };
        map = new Microsoft.Maps.Map(document.getElementById("mapdiv"), mapOptions);
    }
    catch (e) 
    {
        var md = new Windows.UI.Popups.MessageDialog(e.message);
        md.showAsync();
    }
}

// help functions

function resetMapDiv()
{
    if (document.getElementById("directionsItinerary").style.display == "block")
    {
        document.getElementById("directionsItinerary").style.display = "none";
        document.getElementById("mapdiv").style.width = "100%";
    }
}
function displayInfo(e) 
{
    if (e.targetType == "pushpin") 
    {
        showInfobox(e.target);
    }
}function showInfobox(shape) 
{
    for (var i = map.entities.getLength() - 1; i >= 0; i--) 
    {
        var pushpin = map.entities.get(i);        if (pushpin.toString() == '[Infobox]') 
        {
            map.entities.removeAt(i);
        };
    }
    var infoboxOptions = {  width: 170,                             height: 80,                             showCloseButton: true,           
                  zIndex: 10,                             offset: new Microsoft.Maps.Point(10, 0),                             showPointer: 
true,                             title: shape.title,                             description: shape.description                          }; 
   var defInfobox = new Microsoft.Maps.Infobox(shape.getLocation(), infoboxOptions);    map.entities.push(defInfobox);
}

function createClusteredpin(cluster, latlong) 
{
    var pin = new Microsoft.Maps.Pushpin(latlong, {
                                                    icon: '/images/clusteredpin.png',
                                                    anchor: new Microsoft.Maps.Point(8, 8)
                                                  });
    pin.title = 'Cluster pin';
    pin.description = 'Number of pins : ' + cluster.length;
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfo);
    return pin;
}
    
function createPin(data) 
{
    var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
                                                        icon: '/images/nonclusteredpin.png',
                                                        anchor: new Microsoft.Maps.Point(8, 8)
                                                        });
    pin.title = 'Single pin';
    pin.description = 'GridKey: ' + data.GridKey;
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfo);
    return pin;
}
function dataCallback(response) 
{
    if (response != null) 
    {
       var greenLayer = new ClusteredEntityCollection(map, 
                                                        {
                                                            singlePinCallback: createPin,
                                                            clusteredPinCallback: createClusteredpin
                                                        });
        //This method is part of dynamically downloaded clustering Module V7ClientSideClustering.js.
       greenLayer.SetData(response);
    }
}
var testDataGenerator = new function () 
{
    /*
    * Example data model that may be returned from a custom web service.
    */
    var 

ExampleDataModel = function (name, latitude, longitude) 
    {
        this.Name = name;
        this.Latitude = latitude;
        

this.Longitude = longitude;
    };    /*
    * This function generates a bunch of random random data with 
    * coordinate information and 

returns it to a callback function 
    * similar to what happens when calling a web service.
    */
    this.generateData = function 

(numPoints, callback) 
    {
        var data = [], randomLatitude, randomLongitude;
        for (var i = 0; i < numPoints; i++)
        {
       

     randomLatitude = Math.random() * 181 - 90;
            randomLongitude = Math.random() * 361 - 180;
            data.push(new 

ExampleDataModel("Point: " + i, randomLatitude, randomLongitude));
        }
        if (callback) 
        {
            callback(data);
        

}
    };
};


See Also

Show:
© 2014 Microsoft