Maps Blog

Upcoming Bing Maps Events - Spring 2013

2013-04-22T17:28:00Z

Bing Maps Events

The following events have been organized by the Bing Maps team.

Bing Maps Windows Store Apps Developer Event

Date: May 10, 2013 @ 9:30am – 12:30pm

Location: Microsoft Cardinal Place, Auditorium, 100 Victoria Street, London SW1E 5JL

Bing Maps would like to invite you to our Windows Store Apps Developer Event. We have some great speakers lined up who will be showcasing some of the latest Apps developed using Microsoft technology whilst detailing the end to end technical build process.

Register: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032547101&Culture=en-GB&community=0

The Power of Bing Maps & CRM

Date: May 10, 2013 @ 2:00pm – 5:00pm

Location: Microsoft Cardinal Place, Auditorium, 100 Victoria Street, London SW1E 5JL

Microsoft Bing Maps would like to invite you to our CRM & Mapping event. The objective of this event is to showcase how mapping can add value, driving greater insights from your CRM data. Not only will we be showcasing existing solutions, but also the business and technical advantages and opportunities that mapping and CRM can bring.

Register: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032550691&Culture=en-GB&community=0

Attending Events

Bing Maps will have a presence at the following events.

SQLBits XI

Date: May 2^nd- 3^rd2013

Location: East Midlands Conference Centre, Nottingham, UK

Register: http://sqlbits.com/

GeoDATA

Date: May 14, 2013

Location: Birmingham, UK

Register: http://www.geoinformationgroup.co.uk/training/geodata

Date: May 16, 2013

Location: Sheffield, UK

Register: http://www.geoinformationgroup.co.uk/training/geodata

Date: June 12, 2013

Location: Dublin, IE

Register: http://www.geoinformationgroup.co.uk/training/geodata

Date: June 25, 2013

Location: Amsterdam, NL

Register: http://www.geoinformationgroup.co.uk/training/geodata

Microsoft Worldwide Partner Conference

Date: July 7^th – 11^th2013

Location: Houston, TX

Register: http://www.digitalwpc.com/Pages/Home.aspx

Recent Webcasts

Below are some of our most recent Bing Maps webcasts that may have slipped your calendar. You can sign-in with your Event Builder registration details to view the resources for each webcast.

Bing Maps for Windows Store App JavaScript Development

Native Bing Maps for Windows Store App Development

Microsoft Location/Geospatial Solutions for Fleet Tracking and Logistics

Bing Maps and Dynamics CRM Solutions

Bing Maps and Sharepoint Solutions for the Enterprise

HTML5 Canvas Pushpins in JavaScript

2013-04-10T15:47:00Z

One of the more interesting features of HTML5 is the canvas elements. The canvas provides us with a feature rich, low level 2D rendering panel and is supported by all the major web browsers.

In this blog post, we are going to create a Bing Maps module that wraps the standard pushpin class to create a new HTML5 Canvas pushpin class. There are a lot of cool and interesting things we can do with the canvas that would require a lot more work using traditional HTML and JavaScript. By using this module, tasks such as rotating a pushpin or programmatically changing the color can be easily achieved. In this post I will use the Bing Maps V7 AJAX control, but all of the code can be easily reused with the Bing Maps for Windows Store Apps JavaScript control as well.

Creating the Canvas Pushpin module

In Bing Maps, pushpins have the ability to render custom HTML content. We can take advantage of this by passing in an HTML5 as the custom HTML5 content into the pushpin options. Since we cannot access this canvas until it has been rendered, we will want to create a CanvasLayer class which wraps the EntityCollection class and fires and event with an entity is added to render the data on our canvas. We can then create a CanvasPushpin class that takes two parameters: a location to display the canvas on the map and a callback function that will receive a reference to the pushpin and to the context of the HTML5 canvas. After this, we will be able to use the canvas context to draw our data. Take the following code for the module and copy it into a new file called CanvasPushpinModule.js and store it in a folder called scripts.

/***************************************************************
* Canvas Pushpin Module
* 
* This module creates two classes; CanvasLayer and CanvasPushpin 
* The CanvasLayer will render a CanvasPushpin when it is added 
* to the layer. 
*
* The CanvasPushpin creates a custom HTML pushpin that contains 
* an HTML5 canvas. This class takes in two properties; a location 
* and a callback function that renders the HTML5 canvas.
****************************************************************/
var CanvasLayer, CanvasPushpin;

(function () {
    var canvasIdNumber = 0;

    function generateUniqueID() {
        var canvasID = 'canvasElm' + canvasIdNumber;
        canvasIdNumber++;

        if (window[canvasID]) {
            return generateUniqueID();
        }

        return canvasID;
    }

    function getCanvas(canvasID) {
        var c = document.getElementById(canvasID);

        if (c) {
            c = c.getContext("2d");
        }

        return c;
    }

    //The canvas layer will render a CanvasPushpin when it is added to the layer. 
    CanvasLayer = function () {
        var canvasLayer = new Microsoft.Maps.EntityCollection();
        Microsoft.Maps.Events.addHandler(canvasLayer, 'entityadded', function (e) {
            if (e.entity._canvasID) {
                e.entity._renderCanvas();
            }
        });
        return canvasLayer;
    };

    CanvasPushpin = function (location, renderCallback) {
        var canvasID = generateUniqueID();

        var pinOptions = {
            htmlContent: '<canvas id="' + canvasID + '"></canvas>'
        };

        var pin = new Microsoft.Maps.Pushpin(location, pinOptions);
        
        pin._canvasID = canvasID;

        pin._renderCanvas = function () {
            renderCallback(pin, getCanvas(pin._canvasID));
        };

        return pin;
    };
})();

// Call the Module Loaded method
Microsoft.Maps.moduleLoaded('CanvasPushpinModule');

To implement the module, we will need to load the module. Once it is loaded, we will want to create a CanvasLayer entity collection which we will add our canvas pushpins. Once this layer is created, we can create our CanvasPushpin objects and add them to the layer. We will use the following image and draw it onto the canvas.

green_pin.png

When we put this all together we end up with the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
          var map, canvasLayer;

          function GetMap() {
              // Initialize the map
              map = new Microsoft.Maps.Map(document.getElementById("myMap"),
              {
                  credentials: "YOUR_BING_MAPS_KEY"
              });

              //Register and load the Canvas Pushpin Module
              Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
              Microsoft.Maps.loadModule("CanvasPushpinModule", {
                  callback: function () {
                      //Create Canvas Entity Collection
                      canvasLayer = new CanvasLayer();
                      map.entities.push(canvasLayer);

                      //Create the canvas pushpins
                      createCanvasPins();
              }});
          }

          function createCanvasPins() {
              var pin, img;

              for (var i = 0; i < 100; i++) {

                  //Create a canvas pushpin at a random location
                  pin = new CanvasPushpin(new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180), function (pin, context) {
                      img = new Image();
                      img.onload = function () {
                          if (context) {
                              context.width = img.width;
                              context.height = img.height;
                              context.drawImage(img, 0, 0);
                          }
                      };
                      img.src = 'images/green_pin.png';
                  });

                  //Add the pushpin to the Canvas Entity Collection
                  canvasLayer.push(pin);
              }
          }
      </script>
   </head>
   <body onload="GetMap();">
        <div id='myMap' style="position:relative;width:800px;height:600px;"></div>
   </body>
</html>

By using the above code, we will end up with something like this:

A more colorful pushpin

Using the canvas to render an image isn’t terribly exciting, especially when we could do the same thing by setting the icon property of the pushpin to point to the image and accomplish the same thing. One common question I’ve seen on the Bing Maps forums over the years is “How do I change the color of the pushpin?”. In the past the answer was always the same; create a new image that is a different color. In Bing Maps Silverlight, WPF and Native Windows Store controls we can change the color programmatically by simply setting the background color. When using this canvas pushpin module we can actually do the same thing. The first thing we will need is a base pushpin that has the color region removed and made transparent. Below is the image we will use in this example:

transparent_pin.png

To get this to work nicely, we will want to provide each pin with a color in which we want it to render as. To do this, we can add a metadata property to each pushpin and store our color information in there. The color information itself is a string representation of a color that the HTML5 canvas can understand. This could be a HEX or RGB color. In this example, we will render random colors for each pushpin. When we go to render the pushpin we will want to draw a circle that is the specified color and then overlay our pushpin template overtop. Below is a modified version of the createCanvasPins method that shows how to do this.

function createCanvasPins() {
    var pin, img;

    for (var i = 0; i < 100; i++) {

        //Create a canvas pushpin at a random location
        pin = new CanvasPushpin(new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180), function (pin, context) {
            img = new Image();
            img.onload = function () {
                if (context) {
                    //Set the dimensions of the canvas
                    context.width = img.width;
                    context.height = img.height;

                    //Draw a colored circle behind the pin
                    context.beginPath();
                    context.arc(13, 13, 11, 0, 2 * Math.PI, false);
                    context.fillStyle = pin.Metadata.color;
                    context.fill();

                    //Draw the pushpin icon
                    context.drawImage(img, 0, 0);
                }
            };

            img.src = 'images/transparent_pin.png';
        });

        //Give the pushpin a random color
        pin.Metadata = {
            color: generateRandomColor()
        };

        //Add the pushpin to the Canvas Entity Collection
        canvasLayer.push(pin);
    }
}

function generateRandomColor() {
    return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}

Using the above code we will end up with something like this:

Rotating a pushpin

Sometimes it is useful to be able to rotate your pushpin. One of the most common scenarios I have come across for this is to be able to draw arrows on the map that point in a specific direction. Using traditional HTML and JavaScript we would do this in one of two ways. The first method would be to create a bunch of images of arrows pointing in different directions and then choose which ever one is closest to the direction we want. The second method is a bit of a CSS hack involving the use of borders which I talked about in a past blog post. When using the HTML5 canvas, we can easily rotate the canvas by translating the canvas to the point we want to rotate about, then rotating the canvas, and translating the canvas back to the original position. One thing we need to take into consideration is that in most cases the dimension of the canvas will need to change as we rotate an image. Think about rotating a rectangle. When rotated by a few degrees, the area the rectangle requires to fit inside the canvas will be larger. When rotating objects on a map, it is useful to know that it is common practice for North to represent a heading of 0 degrees, East to be 90 degrees, South to be 180 degrees and West to be 270 degrees. In this example, we will take the following arrow image and provide and add metadata to the pushpin where we will specify the heading for the arrow to point. And to make things easy, we will make our arrow point up which aligns with the north direction and a heading of 0 degrees.

redArrow.png

When we put this all together, we end up with the following code:

function createCanvasPins() {
    var pin, img;

    for (var i = 0; i < 100; i++) {

        //Create a canvas pushpin at a random location
        pin = new CanvasPushpin(new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180), function (pin, context) {
            img = new Image();
            img.onload = function () {
                if (context) {
                    //Calculate the new dimensions of the the canvas after the image is rotated
                    var dx = Math.abs(Math.cos(pin.Metadata.heading * Math.PI / 180));
                    var dy = Math.abs(Math.sin(pin.Metadata.heading * Math.PI / 180));                              
                    var width = Math.round(img.width * dx + img.height * dy);
                    var height = Math.round(img.width * dy + img.height * dx);

                    //Set the dimensions of the canvas
                    context.width = width;
                    context.height = height;

                    //Offset the canvas such that we will rotate around the center of our arrow
                    context.translate(width * 0.5, height * 0.5);

                    //Rotate the canvas by the desired heading
                    context.rotate(pin.Metadata.heading * Math.PI / 180);

                    //Return the canvas offset back to it's original position
                    context.translate(-img.width * 0.5, –img.height * 0.5);

                    //Draw the arrow image
                    context.drawImage(img, 0, 0);
                }
            };
            img.src = 'images/redArrow.png';
        });

        //Give the pushpin a random heading
        pin.Metadata = {
            heading: Math.random() * 360
        };

        canvasLayer.push(pin);
    }
}

Using the above code we will end up with something like this:

Data Driven pushpins

Bing Maps is often used in business intelligence applications. One particular type of business intelligence data that users like to overlay on the map are pie charts. The good news is that creating pie charts using a canvas is fairly easily. Each portion of a pie chart will be a percentage of the total of all the data in the pie chart. Let’s simply make use of the arc drawing functionality available within the canvas to do this.

function createCanvasPins() {
    var pin;

    //Define a color for each type of data
    var colorMap = ['red', 'blue', 'green', 'yellow'];

    for (var i = 0; i < 25; i++) {

        //Create a canvas pushpin at a random location
        pin = new CanvasPushpin(new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180), function (pin, context) {
            //Calculate the number of slices each pie we can support
            var max = Math.min(pin.Metadata.data.length, colorMap.length);

            //Calculate the total of the data in the pie chart
            var total = 0;
            for (var i = 0; i < max; i++) {
                total += pin.Metadata.data[i];
            }

            //Draw the pie chart
            createPieChart(context, total, pin.Metadata.data, colorMap);
        });

        //Give the pushpin some data
        pin.Metadata = {
            data: generateRandomData()
        };

        //Add the pushpin to the Canvas Entity Collection
        canvasLayer.push(pin);
    }
}

function createPieChart(context, total, data, colorMap) {
    var radius = 12.5,
        center = { x: 12.5, y: 12.5 },
        lastPosition = 0;

    context.width = 25;
    context.height = 25;

    for (var i = 0; i < data.length; i++) {
        context.fillStyle = colorMap[i];
        context.beginPath();
        context.moveTo(center.x, center.y);
        context.arc(center.x, center.y, radius, lastPosition, lastPosition + (Math.PI * 2 * (data[i] / total)), false);
        context.lineTo(center.x, center.y);
        context.fill();
        lastPosition += Math.PI * 2 * (data[i] / total);
    }
}

function generateRandomData() {
    return [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100];
}

Using the above code we will end up with something like this:

If you wanted to take this module even further, you could create pushpins that are animated, or even simulate a 3D object.

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

Bing Maps in AutoCAD 2014

2013-04-03T15:02:00Z

We are excited to announce that Bing Maps is the default mapping service in Autodesk’s AutoCAD 2014 software. For those not familiar with AutoCAD, AutoCAD is Autodesk’s flagship software product and is the world’s most widely used 3D CAD (computer-aided design) software. Chances are that you use a product or have been in a building, public area or other development that was designed with AutoCAD. AutoCAD and AutoCAD vertical products such as AutoCAD Architecture and AutoCAD Civil 3D, are used in a wide range of industries and by architects, designers and engineers.

How is Bing Maps used in AutoCAD 2014 and the AutoCAD vertical products? AutoCAD now has a built-in Geolocation feature and allows users to create and enhance their designs with Bing Maps geocoding and map data. Bing Maps inside AutoCAD 2014 brings in location context and results in more accurate and richer designs. The key geolocation workflows in AutoCAD 2014 supported with Bing Maps include:

Locate your AutoCAD design in the real-world using Bing Maps geocoding service
View your AutoCAD design in the real-world high resolution aerial and satellite imagery
Aggregate and overlay 2D and 3D geolocated data with your AutoCAD designs
Locate yourself on your AutoCAD design in the field using GPS and Bing Maps

Below are some examples of Bing Maps aerial, satellite, road maps and geocoding services being used in the AutoCAD 2014 products.

Bing Maps aerial and satellite imagery maps:

Bing Maps road maps:

Bing Maps location geocoding:

Here is an example of Bing Maps used in an AutoCAD 2014 design:

Also, here is a short video that demonstrates how real world location context can be brought into a design using the Bing Maps based Geolocation feature of AutoCAD 2014.

For more information on AutoCAD 2014, please visit autodesk.com/autocad.

Data source staging, rollback and more comes to Spatial Data Services

2013-03-29T16:41:21Z

Bing Maps Spatial Data Services is now giving you even more options for managing and querying your data source entity data. Check out these new features.

Stage your data source before you publish. Two new data source upload operations – CompleteStaging (for overwrites or new data sources) and IncrementalStaging (for updates) – offer you the opportunity to stage and verify your data source entity data before you publish it. To query a staged data source, include isStaging=1 in your query URL. When you are ready to publish the data source, use the $commit URL described in Publish a Staged Data Source. You can also delete a staged version. [Load Data Source Dataflow, Query API, Publish a Staged Data Source, Delete a Data Source]

Rollback to previous data source versions. Spatial Data Services now keeps up to two previous versions of your data source with the option to rollback your data source to a previous version in a matter of minutes. You can also download previous versions. [Rollback a Data Source Dataflow, Download a Data Source Dataflow]

Query near an address by specifying an address string. You can now query for entities near an address by specifying the address string and the address is geocoded to get the latitude and longitude for you. [Query by Area]

Example: This example shows how you can query around an address.

http://spatial.virtualearth.net/REST/v1/data/20181f26d9e94c81acdf9496133d4f23/FourthCoffeeSample/FourthCoffeeShops?spatialFilter=nearby('1Microsoft Way, Redmond, WA 98052',5)&$filter=IsWifiHotSpot%20eq%201&$select=*,__Distance&key=queryKey

Note that querying near an address with an address string will incur a geocoding usage transaction (RESTLocations) as well as a Query API transaction (RESTSpatialDataService:Query)

Connecting a SharePoint List to Bing Maps

2013-03-26T15:45:00Z

I have seen a lot of different ways to integrate Bing Maps with SharePoint. Some more complex than others. In this blog post we will look at an easy way to integrate Bing Maps with SharePoint and connect to a SharePoint list. Many of the things shown in this blog post are not limited to SharePoint Server and can extend to SharePoint Online and Office 365. To give us a jump start, we will reuse the SharePoint list we created in a previous blog titled Geocoding a SharePoint List Item. The content of this post is from a recent webcast I gave and can access online here.

Adding Bing Maps to SharePoint

Before we dive into the ‘how to’ we will first demonstrate how simple it is to get Bing Maps into SharePoint. To start off, go to the Bing Maps V7 Interactive SDK and go to the Traffic Module sample.

If you press the View HTML button on the bottom right corner you can get the full HTML for the example.

Simply open up notepad or any other text editing tool, then copy and paste this code into it. Finally, save the file as TrafficMap.html. You may also want to add your Bing Maps key to the code to remove the authentication error message that appears on the map. Now open up your SharePoint site and go to your Site Assets folder.

Take the traffic map webpage you just created and upload it.

Once the file is uploaded open up the traffic map in new window to test it out and to get the URL to the file. The webpage should look something like this:

Next, let’s will create a new page in our SharePoint site called MyLocationMap.

Once you have your page, insert a Page Viewer web part. You can find this under the Media and Content category.

Now open the tool pane of the Page Viewer web part you just created and add the URL to the traffic map file as the Link property. If you want you can also give the web part a title like “Traffic Flow”.

When you are done, save the settings and page should refresh and look something like this:

Essentially, the Page Viewer web part has iframed the traffic map web page into the SharePoint site. With only a few minutes of work we were able to easily integrate a simple Bing Maps application with SharePoint.

Integrating with a SharePoint List

There are a few ways to connect to a SharePoint list from code. The two main ways are: use the ECMAScript in SharePoint which has a library for accessing list data or; use the List REST services which exist for all SharePoint lists. In this post we are going to use the ECMAScript method. Here is a good resource on how to Retrieve Lists Using JavaScript in SharePoint. If you would rather use the SharePoint List REST services take a look at this documentation.

To make this code sample more reusable, we will add support for a query string parameter called ListTitle which will allow us to specify which list we want to connect directly from the URL. As long as the list has a Title, Description, Latitude and Longitude columns this code sample will work. We will also add an infobox control to the map to display the location details when a pushpin is clicked.

Since we are essentially iframing our web page into a SharePoint page, we will have to call the parent of the iframe to get access to the SharePoint ECMAScripts. Normally this would cause a security exception; however, since our webpage is hosted within the same domain as our SharePoint page, this is allowed. To get access to the parent of the iframe we simply need to call functions in the part using window.parent.

Open up notepad or any other text editor and add the following code into it. Save the file as MyLocationListMap.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    
    <script type="text/javascript">
        var map, infobox, dataLayer, ctx, listItems, listTitle;

        function getMap()
        {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'YOUR_BING_MAPS_KEY'
            });
            
            dataLayer = new Microsoft.Maps.EntityCollection();
            map.entities.push(dataLayer);

            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            map.entities.push(infoboxLayer);

            infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { 
                        visible: false, 
                        offset: new Microsoft.Maps.Point(0, 20) 
                    });
            infoboxLayer.push(infobox);

            listTitle = getQueryStringValue('ListTitle');
            
            if(listTitle){
                window.parent.ExecuteOrDelayUntilScriptLoaded(loadList, 'sp.js');
            }
        }
        
        function loadList(){
            getListItems(listTitle);            
        }

        function getListItems(listTitle){
            ctx = new window.parent.SP.ClientContext.get_current();

            var targetList = ctx.get_web().get_lists().getByTitle(listTitle);
            var query = window.parent.SP.CamlQuery.createAllItemsQuery();
         
            listItems = targetList.getItems(query);
            ctx.load(listItems);
                    
            ctx.executeQueryAsync(onLoadItemsSuccess, onLoadItemsFail);
        }

        function onLoadItemsFail(sender, args) {
            alert('Failed to get lists items. Error:' + args.get_message());
        }

        function onLoadItemsSuccess(sender, args) {
            var listEnumerator = listItems.getEnumerator();
            
            var item, pin, loc;
            while (listEnumerator.moveNext())  {
                item = listEnumerator.get_current();
                loc = new Microsoft.Maps.Location(item.get_item("Latitude"), item.get_item("Longitude"));
                pin = new Microsoft.Maps.Pushpin(loc);
                pin.Metadata = {
                    Title : item.get_item("Title"),
                    Location : item.get_item("Location")
                };
                Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                map.entities.push(pin);
            }
        }

        function displayInfobox(e) {
            if (e.targetType == 'pushpin') {
                infobox.setLocation(e.target.getLocation());
                infobox.setOptions({ 
                    visible: true, 
                    title: e.target.Metadata.Title, 
                    description: e.target.Metadata.Location 
                });
            }
        } 
          
        function getQueryStringValue(key) {
            var queryString = document.URL.split("?");
            if(queryString && queryString.length > 1)
            {
                var params = queryString[1].split("&");

                for (var i = 0; i < params.length; i = i + 1) {
                    var value = params[i].split("=");
                    if (value[0] == key){
                        return value[1];
                    }
                }
            }
            
            return null;
        }

        window.parent.onload = getMap;
    </script>
</head>
<body>
    <div id='myMap' style="position:relative;width:100%;height:450px;"></div>
</body>
</html>

What does this code actually do? The getMap function loads the map and adds two layers to the map; one for the data and the other for the infobox. This is based on a blog post I created on displaying Multiple pushpins and Infoboxes in Bing Maps V7. It then gets the ListTitle query string value and then executes the ExecuteOrDelayUntilScriptLoaded function in the parent page which will execute LoadList function in our code after the sp.js file has finished loading in the main page. This ensures that the ECMAScripts we need are loaded. When the LoadList function is called it takes the ListTitle query string value and passes it to the getListItems function. The getListItems function gets the current client context of the SharePoint site and creates a query to get all items in the list. It then executes the list and if successful calls the onLoadItemsSuccessful function which loops through the list items and creates pushpins and overlays them on the map. If the query failed to load the list items an alert is displayed to user.

Now, take the MyLocationListMap.html file and upload it into your Site Assets folder. Get the URL to the page.

Navigate back to the MyLocationMap page in your SharePoint site and open the tool pane to the Page Viewer web part we added earlier. Update the Link property with the URL to the MyLocationListMap.html file and change the title to “My Location Map” then save the changes. The page will refresh and look something like this once you click one of the pushpins.

Tip for SharePoint 2013 Users

SharePoint 2013 introduces a new field type named Geolocation that enables you to create SharePoint lists with location information. In Geolocation columns, you can enter location information as a pair of latitude and longitude coordinates in decimal degrees or retrieve the coordinates of the user’s current location from the browser if it implements the W3C Geolocation API. In the list, SharePoint 2013 displays the location on Bing Maps. In addition, a new view named Map View displays the list items as pushpins on a Bing Maps. Together, the Geolocation field and the Map View enable you to give a spatial context to any information by integrating data from SharePoint into a mapping experience, and let your users engage in new ways in your web and mobile apps and solutions. Also, its worth mentioning that SharePoint sites are generally internal applications and would require an Enterprise Bing Maps key. Take a look at the Integrating location and map functionality in SharePoint 2013 documentation for more information.

Here is how the out of the box map looks when you hover over a single list item that has location information.

Here is what the new Map View looks like:

This is a great first step for anyone wanting to add Bing Maps to their SharePoint site. Note: the out of the box functionality is limited to this. If you want to customize the map or add complex shapes (like polygons), you will need to do some additional custom development. The steps outlined earlier in this post can be used to do just that. There are also a lot of really great web parts available on CodePlex which you could use as a starting point.

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

New Traffic Manager in AJAX v7

2013-03-18T18:00:00Z

Bing Maps AJAX v7 control can now show traffic incidents in addition to traffic flow and gives you the control to show or hide both with the new TrafficManager. Check out the following view of Seattle traffic flow and incidents. Hovering over an incident bring up details including time and duration. You can find the sample that created this view and more details on the TrafficManager page.

Note: The TrafficManager class replaces and enhances the functionality provided by the TrafficFlow class which is now deprecated, but will continue to be supported.

Geocoding a SharePoint List Item

2013-03-07T17:49:00Z

Bing Maps is often integrated into SharePoint sites to display different types of information, from the location of customers to advance business intelligence information. A common task that needs to be carried out at some point is geocoding the location data so it can be displayed on a map. I’ve seen many different implementations, some good and others not so much. Whenever possible you should try and geocode the data ahead of time and store the coordinates. This will improve performance and generate a lot less transactions against your Bing Maps account.

In this blog post we are going to create a SharePoint List and add the functionality to geocode an item while also updating the coordinates when editing. This will allow us to store the coordinate information right in the SharePoint List.

Creating the SharePoint List

Before we start diving into the geocoding logic we will first need to create a SharePoint List and add a geocoding button to the item form. To do this, follow these steps:

1) Create a custom list called MyLocations.

2) Once the new list should appears go to the “List Tools” tab and select “List Settings”.

3) In the settings page go to the Column section and use the “Create Column” option to create the following columns:

Column Name	Column Type
Location	Single line of text
Latitude	Number (1, 1.0, 100)
Longitude	Number (1, 1.0, 100)

4) When you are done the columns section of the list settings should look like this:

5) Now go back to the List and under the “List Tools” tab select the “Customize Form” button.

6) This will open up the item input form with Microsoft InfoPath and will look something like this:

7) Next, select the area just right of the textbox for the Location field. Expand the controls menu from the tool bar and insert a button. This will insert a button right under the textbox.

8) Right click the button and go to “Button properties”. Change the label to “Geocode”. Under the Advance tab set the ScreenTip property to “Geocode”

9) Edit the properties for the Location, Latitude and Longitude textboxes and under the advance tab give the ScreenTip property the same name as the textbox. Then publish the form. Go back to the list and open the form to add a new item. It will look like the image below. Note that clicking on the geocode button won’t do anything right now.

Adding in the Geocoding functionality

To make things easy, we are going to handle all the geocoding functionality from JavaScript. To make this reusable, we will create a JavaScript file that we can pull into the item forms for any list that has the required fields.

1) Open up notepad or the text editor of your choice and copy the following code into it. Be sure to add your Bing Maps key. Save the file as ListGeocoder.js. This code uses the Bing Maps REST geocoding service to geocode the Location field and populates coordinates of the first result into the latitude and longitude fields of our item.

var GeocodeTools = {
    BingMapsKey : "YOUR_BING_MAPS_KEY",

    getField : function (fieldType,fieldTitle) { 
        var docTags = document.getElementsByTagName(fieldType); 
        for (var i=0; i < docTags.length; i++) { 
            if (docTags[i].title == fieldTitle) { 
                return docTags[i] 
            } 
        } 
    },

    GeocodeLocation : function() { 
        var locField = GeocodeTools.getField('input','Location');
        if(locField && locField.value && locField.value != ''){
            var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(locField.value) + "&output=json&jsonp=GeocodeTools.UpdateFields&key=" + GeocodeTools.BingMapsKey;
            GeocodeTools.CallRestService(geocodeRequest);
        }else{
            alert('Invalid \'Location\' value.');
        }        
    },
    UpdateFields : function(result){
        if (result &&
           result.resourceSets &&
           result.resourceSets.length > 0 &&
           result.resourceSets[0].resources &&
           result.resourceSets[0].resources.length > 0) 
            {

            var latField = GeocodeTools.getField('input','Latitude');
            var lonField = GeocodeTools.getField('input','Longitude');
            
            if(latField && lonField){
                latField.value = result.resourceSets[0].resources[0].point.coordinates[0] + '';
                lonField.value = result.resourceSets[0].resources[0].point.coordinates[1] + '';
            }
        }
    },
    
    CallRestService : function (request) 
    {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", request);
        document.body.appendChild(script);
    }
 };

window.onload = function(){
    setTimeout(function(){
        var geocodeBtn = GeocodeTools.getField('input','Geocode');
        if(geocodeBtn != null){
            geocodeBtn.onclick = function(){ GeocodeTools.GeocodeLocation(); };
        }
    },500);
};

2) Upload this to your SharePoint site by going to Site Actions -> View All Site Content. Under the Document Libraries section choose “Site Assets” and add the ListGeocoder.js file there.

3) Once the file is uploaded, right click on it and select “Copy Shortcut”. This will get the URL to the file which you will need later.

4) Go back to your SharePoint list and under the List Tools click on the “Form Web Parts” dropdown and select “(Item) New Form”.

5) This will open up a page where we can further edit the form. Under the Page tools tab choose the option to insert a Web Part. From the panel that appears select the “Forms” category and the “HTML Form Web Part”

6) The new web part will appear above the item form and consist of a textbox and a button. Drag this web part so that it is below the input form. Then choose the option to edit this web part.

7) Press the Source Editor button. This will open up a panel that has some HTML markup. Remove all the HTML and add the following script tag information, be sure to insert the proper URL to the ListGeocoder.js file you uploaded earlier.

8) Go back to the SharePoint List and repeat steps 4 to 7 for the “(Item) Edit Form” web part.

Try it out

At this point we have all the functionality we need to geocode a list item when adding or editing and item. To test it out go to the SharePoint list and select “Add new item”. In the form that opens give the item a title and set the Location property to “New York” and press the geocode button. The Latitude and Longitude values will become filled with numbers and look something like this:

Now save the item and choose the item you just created from the list and edit it. Change the location to “London” and press the geocode button. The latitude and longitude fields will update with new coordinates. If they don’t, ensure you added the HTML form web part to the Edit form.

This method of geocoding data in SharePoint is useful for scenarios where your users are manually entering data through the SharePoint portal. There may be situations where you want to geocode a large quantity of locations at once, perhaps a database of locations. In this case you will want to use the batch geocoding functionality in the Bing Spatial Data Services. This allows you to geocode up to 200,000 addresses in a single request and will take a fraction of the time it would take if you made multiple requests to the standard REST geocoding service. As an additional bonus, the batch geocoding service is a free service to all Bing Maps Enterprise customers. If you have a large number of entries being added to a list, you can leverage another approach to geocode the list by creating a workflow that runs after the list has been fully updated and batch geocodes all the ungeocoded locations in the list.

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

New Top of the World and High Resolution Satellite Imagery

2013-02-28T17:19:00Z

We are excited to introduce our new top of the world imagery - which includes bathymetry data from Scripps Institution of Oceanography. We are also releasing over 13 million sq km of updated satellite imagery!

Satellite
High-Resolution Nadir or “Straight Down” orthophotos taken by aircraft or satellite

We are pleased to present our new seamless base satellite imagery provided by TerraColor. This imagery has a resolution of 15 meters per pixel, providing coverage of the entire world!

This new imagery will enhance overall viewer experience with Bing Maps and the Windows 8 Maps App. Experience it yourself by visiting the Windows 8 Maps App or Bing Maps. The new Top of the World imagery (pictured above) is visible from zoom levels 1-13. Zooming in deeper will reveal our high resolution satellite imagery.

Cloud Coverage

Our new base satellite layer is analyzed and processed to provide views with reduced cloud cover in areas notorious for persistent cloud cover such as high latitude and equatorial regions. More detail is now visible in these once problematic areas, as seen in this island example!

Oahu, Hawaii Before

Oahu, Hawaii After

W8 Map App | Bing Maps

Bathymetric Shading

In addition to reduced cloud coverage, we now have bathymetric imagery! The topography of the ocean floor is represented by color shading (dark blues to light blues) indicating changes in ocean depth. An ocean mask minimizes areas typically obscured by ice and clouds. The combination of the ocean mask and bathymetric imagery provides a more meaningful view of the world oceans.

Fiji Before

Fiji After

W8 Map App | Bing Maps

High Resolution Satellite Imagery

This month we are adding new High Resolution Satellite imagery with a total coverage of 13,799,276 sq km!

Visit Bing Maps World Tour App to view full coverage

The images below include: a meandering river running through the Brazilian Highlands, a metropolitan area, dunes, and an active stratovolcano on the Pacific Ring of Fire.

Southwest of Jacobina do Piauí, Brazil Bing Maps	Cheboksary, Russia Bing Maps

Murzuq Desert, Southwestern Libya Bing Maps	Kamchatka Peninsula, Russia Bing Maps

Additional Satellite Highlights:

Sardarshahar, India
Bing Maps

South Georgia and South Sandwich Islands,
United Kingdom overseas territory
Bing Maps

Pitesti, Romania
Bing Maps

Arbil, Iraq
Bing Maps

Global Ortho
High-Resolution nadir or “straight down” orthophotos taken by aircraft

Visit Bing Maps World Tour App to view full coverage

	Newly Published Global Ortho Imagery
	Published Global Ortho Imagery, United States 100% Complete, Western Europe 90% Complete

Global Ortho Imagery

Our latest release of Global Ortho imagery includes 203,271 sq km of new data! In total we have published 11,001,500 sq km covering 100% of the United States and 90% of Western Europe!

Subdivisions, Åhrus, Denmark Bing Maps	Port de Monaco, Monaco, France Bing Maps

Beach near Laredo, Cantabria, Spain Bing Maps	Wollaton Park, Nottingham, England Bing Maps

Additional Highlights:

Gran Zebrù Mountain, East of Bormio, Italy
Bing Maps

Magdalena Peninsula, Santander, Spain
Bing Maps

Turning Torso Skyscraper, Malmö, Sweden
Bing Maps

Svendborgsund Bridge, Svendborg, Denmark
Bing Maps

Innenstadt, Lübeck, Germany
Bing Maps

-The Bing Maps Team

3D Elevation Models using HTML5 and Bing Maps

2013-02-26T17:15:00Z

Recently we published a blog post on 3D Elevation Models with Bing Maps WPF. In this blog post we will show you how to create a tool for generating a 3D model of elevation data from the Bing Maps REST Elevation Service using HTML5 and Bing Maps.

There are a couple of different ways to create 3D models in HTML5. The method we are going to use to is to project 3D data onto a 2D canvas. There are several JavaScript libraries available online that can do this. You can also find an in-depth article on how to do the math required for this projection here if you want to write your own library. For this blog post we will use the second method and make use of a JavaScript library called K3D.

In this blog post we will create a web page that uses Bing Maps to select an area on the map. We will then use the elevation service to get the elevation data for the selected area on the map. We will then generate a 3D model using the HTML5 canvas and the K3D library. We will also make use of sliders from the jQuery UI library and add functionality for rotating and translating the model.

Note that by using a helper library called ExplorerCanvas you can add HTML5 canvas support to Internet Explorer 7 and 8 which represent 13.8% of the current web browser market share.

Setting up the project

To help make things clean we will put all of our JavaScript into a file called 3DElevationModel.js and put all JavaScript files into a folder called scripts. We will also need to include JavaScript libraries for jQuery, jQuery UI, K3D, and ExplorerCanvas. We will also put all our HTML into a file called index.html. Your project structure should look like this:

The HTML Layout

For this application we will want to have a map that the user will be able to use to select what area the 3D model should be created for. Once the user has selected the area they are interested in they will be able to press a button to generate the 3D model. Once the model is created the user will be able to view and interact with the 3D model.

We will need to ad references to 7 JavaScript files. The first reference will be to the Bing Maps V7 AJAX control. We will need references to the jQuery and jQuery UI controls to create the sliders for manipulating the 3D model. A reference to the CSS stylesheet for the jQuery UI library will also be needed. The K3D and its associated MathLib JavaScript libraries will need to be referenced to help generate the 3D model. We will also load in the Explorer Canvas JavaScript library if the browser is Internet Explorer with a version less than 9. Finally, we will need a reference to the JavaScript file where we will be putting all our code: 3DElevationModel.js.

For the body of the HTML document, we will need a div to host the map control, a button to generate the 3D model, a canvas element for rendering the model and 6 div’s for generating sliders. With this, we can create the markup for the index.html file. The HTML should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <script type='text/javascript' src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'></script>


    <style type="text/css">
        .slider
        {
            float:left;
            width:30px;
        }
    </style>
</head> 
<body onload='GetMap();'>
    <div style='float:left;width:600px'>
        <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
        <input type='button' onclick='GenerateModel();' value='Generate Model' />
    </div>

    <div style='float:left;width:600px;margin-left:10px;'>
        <canvas id="canvas" width="600" height="400" style="background-color:#fff;"></canvas>

        <div>
            <fieldset style='width:90px;float:left;'>
                <legend>Rotation</legend>
                <div class="slider">
                    X
                    <div id="rotateSliderX"></div>
                </div>
                <div class="slider">
                    Y
                    <div id="rotateSliderY"></div>
                </div>
                <div class="slider">
                    Z
                    <div id="rotateSliderZ"></div>
                </div>   
            </fieldset>

            <fieldset style='width:90px;float:left;'>
                <legend>Translate</legend>
                <div class="slider">
                    X
                    <div id="translateX"></div>
                </div>
                <div class="slider">
                    Y
                    <div id="translateY"></div>
                </div>
                <div class="slider">
                    Z
                    <div id="translateZ"></div>
                </div>   
            </fieldset>
        </div>
    </div>
</body>
</html>

Generating the 3D Elevation Model

All the JavaScript for this project will be added to a JavaScript file called 3DElevationModel.js. At the top of this file we will have a number of global variables which we will use throughout the application. Here are the global variables we will have at the top of the file:

var map,            //Reference to Map control
    canvas,         //Reference to the HTML5 canvas used to render the model
    sessionKey,     //Bing Maps session key used with REST services
    mapBounds,      //Area of where elevation data was requested
    zoom,           //Zoom level used to request elevation data
    model,          //Reference to the generate model
    k3d,            //Reference to K3D control
    numRows = 30,   //Number of rows to use for the elevation samples
    numCols = 30,   //Number of columns to use for the elevation samples
    textureColor = [0, 255, 0]; //Color to render the model in

When the application starts, lets load the map. Since we will be using the REST elevation service, we will also generate a session key from the map which we can use with the REST services to make those transactions non-billable. And while we are at it, we will also store a reference to the canvas and put all this logic into the GetMap function (which is called when the page is loaded). Also, don’t forget to add in your Bing Maps key into this code.

function GetMap() {
    // Initialize the map
    map = new Microsoft.Maps.Map(document.getElementById('myMap'),
    {
        credentials: 'YOUR_BING_MAPS_KEY',
        center: new Microsoft.Maps.Location(43.08, -79.075),
        zoom: 16,
        mapTypeId: Microsoft.Maps.MapTypeId.aerial
    });

    //Generate a Bing Maps Session key to make our call to the REST service non-billable.
    map.getCredentials(function (sKey) {
        sessionKey = sKey;
    });

    //Store a reference to the canvas
    canvas = document.getElementById('canvas');
}

Now we can start adding the logic for requesting the elevation data. When the “Generate Model” button is pressed the GenerateModel function will be fired. In this method, we will want to clear the canvas of any previous model, store a reference of the current zoom level and map bounds, and create the request to the Bing Maps Elevation service. To make things a bit cleaner, we will round off the coordinates to six decimal places as additional decimal places make no difference. This function will look like this:

function GenerateModel() {
    //Clear the Canvas
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);

    //Get the current zoom level and store it
    zoom = map.getZoom();

    //Only generates models when the user is zoomed in at a decent zoom level, otherwise the model will just be a flat sheet.
    if (zoom < 8) {
        alert("This zoom level is not supported. Please zoom in closer (>8).");
        return;
    }

    mapBounds = map.getBounds();

    //Get the elevation data for a bounding box area
    var elevationURL = "http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds=" +
SigDigit(mapBounds.getSouth(), 6) + "," + SigDigit(mapBounds.getWest(), 6) + "," + SigDigit(mapBounds.getNorth(), 6) + "," + SigDigit(mapBounds.getEast(), 6) + "&rows=" + numRows + "&cols=" + numCols + "&key=" + sessionKey;

    CallRestService(elevationURL + "&jsonp=Render3DModel");
}

function CallRestService(request) {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", request);
    document.body.appendChild(script);
}

//Simple method that rounds numbers to a certain number of significant digits
function SigDigit(number, digits) {
    var delta = Math.pow(10, digits);
    return Math.round(number * delta) / delta;
}

When the elevation service responds to our request, it will fire our callback function called Render3DModel. This function will need all the logic to generate the 3D model and render it on the canvas. To create the 3D model, we will need to do the following:

(1) Loop through all the elevation data, calculate the relative coordinate, and then convert this coordinate to a pixel coordinate. We will also need to convert the elevation into a pixel length.

(2) Next, we can create a 3D mesh out of the data. To do this, we will need to specify all the data points as 3 dimensional coordinates, and then specify the texture coordinate vertices used to render the mesh. We will also need to specify the point indices used to create the triangles needed for the mesh.

(3) Finally, we can pass all this data to the K3D library to generate the 3D model.

The code for this function looks like this:

function Render3DModel(result) {
    if (result != null &&
        result.resourceSets != null &&
        result.resourceSets.length > 0 &&
        result.resourceSets[0] != null &&
        result.resourceSets[0].resources != null &&
        result.resourceSets[0].resources.length > 0) {

        var elevations = result.resourceSets[0].resources[0].elevations;

        //Get bounding coordinates of map
        var tlLatitude = mapBounds.getNorth();
        var brLatitude = mapBounds.getSouth();
        var brLongitude = mapBounds.getEast();
        var tlLongitude = mapBounds.getWest();

        //Calculate the degree spacing between elevation samples
        var dLat = Math.abs(tlLatitude - brLatitude) / numRows;
        var dLon = Math.abs(tlLongitude - brLongitude) / numCols;

        var x, y, z, p, m2p, idx, idx2, idx3, idx4;
        var meshPoints = [], edgeData = [], vertices = [];

        for (var r = 0; r < numRows; r++) {
            y = tlLatitude - (dLat * r);

            //Calculate meters per pixel for given latitude so we can scale the elevation to pixels
            //This is based on: http://msdn.microsoft.com/en-us/library/aa940990.aspx
            m2p = 156543.04 * Math.cos(y * Math.PI / 180) / Math.pow(2, zoom);

            for (var c = 0; c < numCols; c++) {
                idx = r * numCols + c;

                x = tlLongitude + (dLon * c);

                z = -elevations[idx] / m2p;
                p = map.tryLocationToPixel(new Microsoft.Maps.Location(y, x));

                meshPoints.push({ x: p.x, y: p.y, z: z });

                //Create triangles for vreating the mesh model
                if (r < numRows - 1 && c < numCols - 1) {
                    idx2 = idx + 1;
                    idx3 = idx + numCols;
                    idx4 = idx3 + 1;

                    edgeData.push({ a: idx, b: idx2 });
                    edgeData.push({ a: idx2, b: idx3 });
                    edgeData.push({ a: idx3, b: idx });
                    vertices.push({ vertices: [idx, idx3, idx2], color: textureColor });

                    edgeData.push({ a: idx2, b: idx4 });
                    edgeData.push({ a: idx4, b: idx3 });
                    edgeData.push({ a: idx3, b: idx2 });
                    vertices.push({ vertices: [idx2, idx3, idx4], color: textureColor });
                }
            }
        }

        //Bind a K3D Controller object to the canvas
        k3d = new K3D.Controller(canvas, true);

        // create a K3D object for rendering
        model = new K3D.K3DObject();
        with (model) {
            drawmode = "solid";
            shademode = "lightsource";
            otheta = -45;               // Intial rotation around X axis
            ophi = 0;                   // Intial rotation around Y Axis            
            ogamma = 0;                 // Intial roation around Z axis
            fillstroke = true;          // Fill the model to help prevent seems along edges due to anti-aliasing
            init(meshPoints, edgeData, vertices);   //Initialize the model
        }

        //Add the object to the controller
        k3d.addK3DObject(model);

        //Render the model
        k3d.tick();

        //Reset Sliders
        $("#rotateSliderX").slider('value', -45);
        $("#rotateSliderY").slider('value', 0);
        $("#rotateSliderZ").slider('value', 0);

        $("#translateX").slider('value', 0);
        $("#translateY").slider('value', 0);
        $("#translateZ").slider('value', 0);
    }
}

The K3D library, when iterating through data in an array, uses a method called forEach. This method is only available in newer browsers. Trying to use this library in Internet Explorer 7 or 8 will result in an error. To get around this error we can easily detect if this method exists for arrays, and if it doesn’t, then create the needed method. The following code can be used to do this:

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (fun) {
        var len = this.length;
        if (typeof fun != "function")
            throw new TypeError();

        var param = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                fun.call(param, this[i], i, this);
            }
        }
    };
}

Finally, we will need to add the code to create and initialize the sliders for manipulating the 3D model. The code looks like this:

$(function () {
    var createSlider = function (id, min, max, propertyName) {
        $(id).slider({
            orientation: "vertical",
            range: "min",
            min: min,
            max: max,
            slide: function (event, ui) {
                if (model) {
                    model[propertyName] = ui.value;
                    k3d.tick();
                }
            }
        });
    }

    //Create sliders for rotating the model
    createSlider("#rotateSliderX", -180, 180, 'otheta');
    createSlider("#rotateSliderY", -180, 180, 'ophi');
    createSlider("#rotateSliderZ", -180, 180, 'ogamma');

    //Create Sliders for translating the model
    createSlider("#translateX", -400, 400, 'offx');
    createSlider("#translateY", -400, 400, 'offy');
    createSlider("#translateZ", -400, 400, 'offz');
});

At this point we have everything we need to generate the 3D elevation model. Open up the web page in a browser and zoom into an area likely to have varying elevations and press the “Generate Model” button. Below is a screenshot of a rendered 3D elevation model of Niagara Falls.

Full Source Code

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <script type='text/javascript' src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'></script>

   <style type="text/css">
        .slider
        {
            float:left;
            width:30px;
        }
    </style>
</head> 
<body onload='GetMap();'>
    <div style='float:left;width:600px'>
        <div id='myMap' style='position:relative;width:600px;height:400px;'></div>
        <input type='button' onclick='GenerateModel();' value='Generate Model' />
    </div>

    <div style='float:left;width:600px;margin-left:10px;'>
        <canvas id="canvas" width="600" height="400" style="background-color:#fff;"></canvas>

        <div>
            <fieldset style='width:90px;float:left;'>
                <legend>Rotation</legend>
                <div class="slider">
                    X
                    <div id="rotateSliderX"></div>
                </div>
                <div class="slider">
                    Y
                    <div id="rotateSliderY"></div>
                </div>
                <div class="slider">
                    Z
                    <div id="rotateSliderZ"></div>
                </div>   
            </fieldset>

            <fieldset style='width:90px;float:left;'>
                <legend>Translate</legend>
                <div class="slider">
                    X
                    <div id="translateX"></div>
                </div>
                <div class="slider">
                    Y
                    <div id="translateY"></div>
                </div>
                <div class="slider">
                    Z
                    <div id="translateZ"></div>
                </div>   
            </fieldset>
        </div>
    </div>
</body>
</html>

3DElevationModel.js

/*
* This code makes use of the K3D libaray: http://www.kevs3d.co.uk/dev
* Documentation for K3D http://en.wikibooks.org/wiki/K3D_JavaScript_Canvas_Library/Tutorial
*/

var map,            //Reference to Map control
    canvas,         //Reference to the HTML5 canvas used to render the model
    sessionKey,     //Bing Maps session key used with REST services
    mapBounds,      //Area of where elevation data was requested
    zoom,           //Zoom level used to request elevation data
    model,          //Reference to the generate model
    k3d,            //Reference to K3D control
    numRows = 30,   //Number of rows to use for the elevation samples
    numCols = 30,   //Number of columns to use for the elevation samples
    textureColor = [0, 255, 0]; //Color to render the model in

//Add support for the "forEach" method on arrays if the browser does not have support for this. 
//This is needed by the k3d library. Notable browsers that need this added are IE7 & IE8.
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (fun) {
        var len = this.length;
        if (typeof fun != "function")
            throw new TypeError();

        var param = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                fun.call(param, this[i], i, this);
            }
        }
    };
}

//Method used to load the map
function GetMap() {
    // Initialize the map
    map = new Microsoft.Maps.Map(document.getElementById('myMap'),
    {
        credentials: 'YOUR_BING_MAPS_KEY'
        center: new Microsoft.Maps.Location(43.08, -79.075),
        zoom: 16,
        mapTypeId: Microsoft.Maps.MapTypeId.aerial
    });

    //Generate a Bing Maps Session key to make our call to the REST service non-billable.
    map.getCredentials(function (sKey) {
        sessionKey = sKey;
    });

    //Store a reference to the canvas
    canvas = document.getElementById('canvas');
}

//Method used to start the process of generating the 3D elevation model
function GenerateModel() {
    //Clear the Canvas
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);

    //Get the current zoom level and store it
    zoom = map.getZoom();

    //Only generates models when the user is zoomed in at a decent zoom level, otherwise the model will just be a flat sheet.
    if (zoom < 8) {
        alert("This zoom level is not supported. Please zoom in closer (>8).");
        return;
    }

    mapBounds = map.getBounds();

    //Get the elevation data for a bounding box area
    var elevationURL = "http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds=" +
SigDigit(mapBounds.getSouth(), 6) + "," + SigDigit(mapBounds.getWest(), 6) + "," + SigDigit(mapBounds.getNorth(), 6) + "," + SigDigit(mapBounds.getEast(), 6) + "&rows=" + numRows + "&cols=" + numCols + "&key=" + sessionKey;

    CallRestService(elevationURL + "&jsonp=Render3DModel");
}

//This method generates and renders the 3D model based on the returned elevation data.
function Render3DModel(result) {
    if (result != null &&
        result.resourceSets != null &&
        result.resourceSets.length > 0 &&
        result.resourceSets[0] != null &&
        result.resourceSets[0].resources != null &&
        result.resourceSets[0].resources.length > 0) {

        var elevations = result.resourceSets[0].resources[0].elevations;

        //Get bounding coordinates of map
        var tlLatitude = mapBounds.getNorth();
        var brLatitude = mapBounds.getSouth();
        var brLongitude = mapBounds.getEast();
        var tlLongitude = mapBounds.getWest();

        //Calculate the degree spacing between elevation samples
        var dLat = Math.abs(tlLatitude - brLatitude) / numRows;
        var dLon = Math.abs(tlLongitude - brLongitude) / numCols;

        var x, y, z, p, m2p, idx, idx2, idx3, idx4;
        var meshPoints = [], edgeData = [], vertices = [];

        for (var r = 0; r < numRows; r++) {
            y = tlLatitude - (dLat * r);

            //Calculate meters per pixel for given latitude so we can scale the elevation to pixels
            //This is based on: http://msdn.microsoft.com/en-us/library/aa940990.aspx
            m2p = 156543.04 * Math.cos(y * Math.PI / 180) / Math.pow(2, zoom);

            for (var c = 0; c < numCols; c++) {
                idx = r * numCols + c;

                x = tlLongitude + (dLon * c);

                z = -elevations[idx] / m2p;
                p = map.tryLocationToPixel(new Microsoft.Maps.Location(y, x));

                meshPoints.push({ x: p.x, y: p.y, z: z });

                //Create triangles for vreating the mesh model
                if (r < numRows - 1 && c < numCols - 1) {
                    idx2 = idx + 1;
                    idx3 = idx + numCols;
                    idx4 = idx3 + 1;

                    edgeData.push({ a: idx, b: idx2 });
                    edgeData.push({ a: idx2, b: idx3 });
                    edgeData.push({ a: idx3, b: idx });
                    vertices.push({ vertices: [idx, idx3, idx2], color: textureColor });

                    edgeData.push({ a: idx2, b: idx4 });
                    edgeData.push({ a: idx4, b: idx3 });
                    edgeData.push({ a: idx3, b: idx2 });
                    vertices.push({ vertices: [idx2, idx3, idx4], color: textureColor });
                }
            }
        }

        //Bind a K3D Controller object to the canvas
        k3d = new K3D.Controller(canvas, true);

        // create a K3D object for rendering
        model = new K3D.K3DObject();
        with (model) {
            drawmode = "solid";
            shademode = "lightsource";
            otheta = -45;               // Intial rotation around X axis
            ophi = 0;                   // Intial rotation around Y Axis            
            ogamma = 0;                 // Intial roation around Z axis
            fillstroke = true;          // Fill the model to help prevent seems along edges due to anti-aliasing
            init(meshPoints, edgeData, vertices);   //Initialize the model
        }

        //Add the object to the controller
        k3d.addK3DObject(model);

        //Render the model
        k3d.tick();

        //Reset Sliders
        $("#rotateSliderX").slider('value', -45);
        $("#rotateSliderY").slider('value', 0);
        $("#rotateSliderZ").slider('value', 0);

        $("#translateX").slider('value', 0);
        $("#translateY").slider('value', 0);
        $("#translateZ").slider('value', 0);
    }
}

//Create the sliders for rotating and translating the 3D model
$(function () {
    var createSlider = function (id, min, max, propertyName) {
        $(id).slider({
            orientation: "vertical",
            range: "min",
            min: min,
            max: max,
            slide: function (event, ui) {
                if (model) {
                    model[propertyName] = ui.value;
                    k3d.tick();
                }
            }
        });
    }

    //Create sliders for rotating the model
    createSlider("#rotateSliderX", -180, 180, 'otheta');
    createSlider("#rotateSliderY", -180, 180, 'ophi');
    createSlider("#rotateSliderZ", -180, 180, 'ogamma');

    //Create Sliders for translating the model
    createSlider("#translateX", -400, 400, 'offx');
    createSlider("#translateY", -400, 400, 'offy');
    createSlider("#translateZ", -400, 400, 'offz');
});

/***** Helper Methods ****/

//Simple method for calling a REST service
function CallRestService(request) {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", request);
    document.body.appendChild(script);
}

//Simple method that rounds numbers to a certain number of significant digits
function SigDigit(number, digits) {
    var delta = Math.pow(10, digits);
    return Math.round(number * delta) / delta;
}

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

Attend the Bing Maps and SharePoint Solutions Webcast

2013-02-19T16:30:00Z

You are invited to attend this webcast to learn how solutions that integrate Bing Maps and SharePoint help organizations gain greater insight from their business data to make smarter business decisions. We will also explore new native geospatial support for SharePoint 2013 and Office 365 (SharePoint in the cloud) which makes it much easier to geocode address data and display with Bing Maps. We’ll explore solution scenarios and tools that illustrate the value of geospatial support in SharePoint when combined with Bing Maps, and look at examples of customers extending their investment in the SharePoint platform by leveraging location and Bing Maps.

You’ll learn what’s included in the Bing Maps platform, and how to take advantage of the data services & imagery and incorporate them into line of business solutions within your organization. We will explore the development options with the platform, and how to get started with Bing Maps and SharePoint 2013/Office 365 development.

Webcast Details

Bing Maps and SharePoint Solutions for the Enterprise (EPG382CAL)

Date/Time:

Tue Feb 26, 2013, 9:00 AM, USA Pacific

Duration:

1 Hour

Presenters:

Mark Merchant, Bing Maps Technical Solution Professional

Ricky Brundritt, Bing Maps Technical Solution Professional

Scott Caulk, VP of Product Management for IDV Solutions

Steve Milroy, CEO OnTerra Systems

Bing Maps REST Service Tips & Tricks

2013-02-14T18:00:00Z

I’ve been a big fan of the Bing Maps REST services since they were first released several years ago and highly recommend trying them out if you haven’t already. The REST services are much newer than the SOAP services, have more features, are faster and can be consumed by non .NET languages with greater ease. If you have the Bing Maps REST services return JSON the response size of a request is significantly smaller than the response size from the same request using the Bing Maps SOAP services. This blog post will go through and highlight some tips for getting the most out of the Bing Maps REST services.

Using the REST services in managed code

I want to take the time to provide a useful resource for those who have had issues consuming the Bing Maps REST Services APIs using .NET. The documentation on how to consume the JSON responses from the Bing Maps REST services can be found on MSDN here.

If you are using Java then take a look at how the REST services are handled in the Bing Maps Android SDK.

Geocoding

· Unless you are geocoding English addresses in the US you should specify a culture parameter to help ensure you get the most relevant results. By default, the culture for all requests is set to en-US. If geocoding addresses in the UK, you will find that in some cases using the culture parameter en-GB will return better results. This becomes even more important when geocoding addresses that are not in English. To specify a culture in a REST request simply use “&c=cultureCode” – you can take a look at the complete list of Supported Cultures.

· Encode address and query parameters. This is especially important when working with non-English languages as special characters often will not work correctly. This is also important if you want to use an ampersand (&) in your query. By encoding an ampersand it will appear in the URL as “%26”. Here are the methods that can be used in different programming languages to encode URL parameters.

Language	Method	Example
JavaScript	encodeURI	encodeURI(query)
C#/VB	Uri	Uri.EscapeDataString (query)

· When geocoding free form queries use the unstructured URL format rather than the structured format. The unstructured URL format tends to be much more successful for these types of queries. Note: the structured format actually overlaps with the reverse geocoding URL request format and can return odd results if your query is just made up of numbers.

√ Unstructured URL

http://dev.virtualearth.net/REST/v1/Locations?query=locationQuery&key=BingMapsKey

X Structured URL

http://dev.virtualearth.net/REST/v1/Locations/locationQuery?key=BingMapsKey

· The Bing Maps geocoder will attempt to find the closest match as possible to your query. In some cases, it will not be able to find an exact match. This is where the match code parameter of the returned results becomes useful. The match code parameter is an array of values and can have any combination of the following three values; Good, Ambiguous, and UpHierarchy. If you are only interested in exact matches then keep a look out for UpHierachy as this indicates that your exact query was not found but an upper level address value was found. For example, you attempt to geocode a postal code but instead the associated country is returned as the postal code was not found.

· If using the REST services from server side code you may find that the results on in your application may differ from the results found when using the services locally. The reason for this is that the REST services take your IP address into consideration when making a request. To help reduce this issue you can set the userIp parameter of the request to 127.0.0.1. This will trick the service into thinking you are making the call from a local application and cause it to ignore your IP address.

· If you have a lot of data you want to geocode at once consider using the Bing Spatial Data Services and the batch geocoding functionality. This service allows you to geocode up to 200,000 addresses in a single request.

Reverse Geocoding

· Limit your coordinates to 6 decimal places. At 6 decimal places you have an accuracy of approximately 10cm on the ground. Any more than 6 decimal places just makes for a longer URL and can confuse the reverse geocoder into thinking this is a free form query search.

· Ensure that your numbers are not being turned into scientific notation format when converting them to string. This occurs quite often when working with small numbers. For example, it is not uncommon for some languages to convert 0.00005 to 5E-5. Scientific notation is not supported by the service and will be interpreted as a free form query.

· Ensure that when converting your coordinates to string that you use an invariant culture. Coordinates that use commas for decimal places will not work correctly.

· Like the batch geocoder you can also do batch reverse geocoding using the Bing Spatial Data Services if you need to reverse geocode a large number of coordinates in one go.

Routing

· Many of the tips in the geocoding service apply for the routing service, like being sure to encode your address locations. However, don’t encode coordinate based locations.

· The default distance units are in Kilometers. Use the distanceUnit parameter to change this to miles if that is your preferred unit of measurement.

· You can now have up to 3 possible routes returned by the routing engine for transit and driving directions in certain countries. This may be desirable in some applications but it is best to make this optional to your users. Although the calculation on Bing Maps end is fast, the response from Bing Maps is much bigger when returning 3 routes, rather than one. This could become an issue for users with slow internet connections (i.e. mobile users).

· If using Bing Maps in areas where geocoding coverage is limited consider allowing the user to select their start and end point on the map via a click event or by dragging a pushpin. This will allow you to pass in coordinates for your end points rather than an address. The routing engine is capable of calculating routes anywhere there is road data, even if there is no geocoding coverage.

· If you want to retrieve the coordinates that make up the route line along the roads use the routePathOutput parameter.

Imagery Service

· When requesting a static map image from Bing Maps the imagery service the service will automatically choose the best image format to return the image in for best resolution. Note: this may not be the preferred image type in some cases. For example, the service may return Ordnance Survey maps in PNG format; you may find you prefer these maps returned as JPG of GIF format. You can specify the image type using the format parameter.

· The Imagery service can return two different types of metadata. The first type of metadata gives you information about the imagery in Bing Maps for a specific location, zoom level and map type. This is useful if you want to find out the age of the imagery or want to know is a specific type of imagery is available for a certain location. The second type of metadata is for a static image generated from the imagery service. This second metadata may include information such as pixel coordinates of pushpins on your image. This is useful if you want to be able to tie events to the generated image or create an HTML image map out of it.

Reducing Usage Transactions

Are you are using the Bing Maps Rest services in conjunction with one of the Bing Maps map controls? If so, you can significantly reduce the number of transactions your application incurs against your Bing Maps account if you request the Bing Maps key from the map control rather than using your normal Bing Maps key. This is quite often an overlooked feature. When getting the credentials from the map you do not get back your original Bing Maps key. Instead, you get a special session key which you can use as a Bing Maps key to make requests to the Bing Maps services. By doing this all transactions incurred by this session key will be non-billable. Here are some examples of how to properly use a session key.

Bing Maps V7 AJAX API

function ClickGeocode()

{

map.getCredentials(MakeBingMapsRESTRequest);

}

function MakeBingMapsRESTRequest(sessionKey)

{

//Generate a request URL for the Bing Maps REST services.

//Use the session key in the request as the Bing Maps key

}

Full working sample using JavaScript can be found here.

Bing Maps Silverlight, WPF, WP7, and WinForm API’s

Map.CredentialsProvider.GetCredentials((c) =>

{

string sessionKey = c.ApplicationId;

//Generate a request URL for the Bing Maps REST services.

//Use the session key in the request as the Bing Maps key

});

Full working samples using .NET can be found

here.

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

3D Elevation Models with Bing Maps WPF

2013-02-12T16:00:00Z

With the release of the Bing Maps REST Elevations service I started looking into cool and interesting things that can be done with the service. While doing some searching around, I stumbled across an interesting blog post titled Examining 3D Terrain of Bing Maps Tiles with SQL Server 2008 and WPF by one of our Bing Maps MVP’s which inspired me to see if I could make something similar using this new Elevations service. So with that, I’ve put together this blog posts which demonstrates how to create a tool for generating a 3D model of elevation data and then overlay static imagery over the top. As a teaser, here is a screenshot of a 3D model of Niagara Falls created using this code.

Setting up the Visual Studio Project

To start, we will create a WPF Application project in Visual Studios called BingMaps3DModel_WPF. Once this is done we will want to add references to the following libraries:

System.Runtime.Serialization
Microsoft.Maps.MapControl.WPF

Adding support for the REST based Elevation service

Since we will be accessing the Bing Maps REST Elevation service from .NET code we will need to add in a library to parse the responses from the service. Rather than writing these from scratch I’ll be making use of some code I helped put together in a previous MSDN article on using Bing Maps REST Service with .NET Libraries. To include this library into the project we will right click on the project and select Add -> New Item. Add a class file called BingMapsRESTServices.cs. Remove any content that’s in this file and copy and paste in the complete code from the bottom of the previous blog post. At this point your project should look something like this:

Creating the User Interface

For this application we will want to have two tabs. The first tab will have a map that the user will be able to use to select what area the 3D model should be created for. Once the user has selected the area they are interested in they will be able to press a button to generate the 3D model. Once the model is created the user will be taken to the second tab which will allow the user to view and interact with the 3D model. To make things a bit cleaner we will create a separate user control for the 3D models tab. To do this, right click on the project and select Add -> New Item. Select “User Control (WPF)” and call it ViewerPanel3D.xaml.

With this, we can create the markup for the MainWindow.xaml file. The XAML should look like this.

<Window x:Class="BingMaps3DModel_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
        xmlns:local="clr-namespace:BingMaps3DModel_WPF"
        Title="3D Map Generator" Height="700" Width="800">
    <Grid>
        <TabControl Name="MyTabs">
            <TabItem Header="Map">
                <Grid>
                    <m:Map Name="MyMap" CredentialsProvider="YOUR_BING_MAPS_KEY" Mode="AerialWithLabels"/>
                    <Button Content="Generate 3D Map Model" Click="Generate3DModel_Click" 
                            Width="150" Height="25" Margin="10"
                            HorizontalAlignment="Right" VerticalAlignment="Top"/>
                </Grid>
            </TabItem>
            <TabItem Header="3D Model">
                <local:ViewerPanel3D x:Name="viewerPanel"/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

If you run the application now, it should result in an application that looks like this:

Note: you may get an error if you haven’t created an instance of the click event for the button. Simply right click on the event name and press “Navigate to Event Handler” to generate the click event code that is needed.

The ViewerPanel3D User Control

We can now turn our attention to the ViewerPanel3D user control that we created and add the needed markup to that. When a model is loaded into this control we will want to give the user several sliders which they can use to rotate and move the model around with. I came across a really nice example in this blog post that I thought I would use as a starting point. The nice thing about this example is that it binds the sliders to the rotation transform which means there is no code needed in the background for this functionality. In addition to the sliders for rotating the model we will add a set of sliders for translating (moving in different directions) the model. We will also add a mouse wheel event for zooming in and out of the model. Putting this all together the markup for the ViewerPanel3D.xaml file should look like this:

<UserControl x:Class="BingMaps3DModel_WPF.ViewerPanel3D"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    
    <UserControl.Resources>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style x:Key="slider">
            <Setter Property="Slider.Orientation" Value="Vertical" />
            <Setter Property="Slider.Height" Value="130.0" />
            <Setter Property="Slider.HorizontalAlignment" Value="Center" />
            <Setter Property="Slider.VerticalAlignment" Value="Center" />
        </Style>
    </UserControl.Resources>

    <Grid Background="Gray" MouseWheel="OnViewportMouseWheel">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <Viewport3D Name="viewport"  Grid.Row="0" Grid.Column="0">
            <Viewport3D.Camera>
                <PerspectiveCamera x:Name="camera" FarPlaneDistance="50"
                    NearPlaneDistance="0" LookDirection="0,0,-10" UpDirection="0,1,0"
                    Position="0,0,5" FieldOfView="45">
                    <PerspectiveCamera.Transform>
                        <Transform3DGroup>
                            <RotateTransform3D>
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D 
                                    Axis="1.0, 0.0, 0.0" 
                                    Angle="{Binding ElementName=sliderX, Path=Value}"/>
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                            <RotateTransform3D>
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D 
                                    Axis="0.0, 1.0, 0.0" 
                                    Angle="{Binding ElementName=sliderY, Path=Value}"/>
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                            <RotateTransform3D>
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D 
                                    Axis="0.0, 0.0, 1.0" 
                                    Angle="{Binding ElementName=sliderZ, Path=Value}"/>
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                            <TranslateTransform3D 
                            OffsetX="{Binding ElementName=transSliderX, Path=Value}"
                            OffsetY="{Binding ElementName=transSliderY, Path=Value}"
                            OffsetZ="{Binding ElementName=transSliderZ, Path=Value}"/>
                            <ScaleTransform3D 
                            ScaleX="{Binding ElementName=sliderZoom, Path=Value}"
                            ScaleY="{Binding ElementName=sliderZoom, Path=Value}"
                            ScaleZ="{Binding ElementName=sliderZoom, Path=Value}"/>
                        </Transform3DGroup>
                    </PerspectiveCamera.Transform>
                </PerspectiveCamera>
            </Viewport3D.Camera>
            <ModelVisual3D>

            </ModelVisual3D>
            <ModelVisual3D x:Name="model">
                <ModelVisual3D.Content>
                    <Model3DGroup x:Name="group">
                        <AmbientLight Color="DarkGray"/>
                        <DirectionalLight Color="DarkGray" Direction="10,10,5"/>
                    </Model3DGroup>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D>

        <StackPanel Grid.Column="1" Width="100" Background="LightGray">
            <GroupBox Header="Rotation" Margin="4.0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="X" Grid.Column="0" Grid.Row="0"/>
                    <TextBlock Text="Y" Grid.Column="1" Grid.Row="0"/>
                    <TextBlock Text="Z" Grid.Column="2" Grid.Row="0"/>
                    <Slider x:Name="sliderX" Grid.Column="0" Grid.Row="1" Minimum="0.0" Maximum="360.0" Value="230" Style="{StaticResource slider}">
                        <Slider.ToolTip>
                            <TextBlock Text="Rotate around X-Axis"/>
                        </Slider.ToolTip>
                    </Slider>
                    <Slider x:Name="sliderY" Grid.Column="1" Grid.Row="1" Minimum="-180.0" Maximum="180.0" Style="{StaticResource slider}">
                        <Slider.ToolTip>
                            <TextBlock Text="Rotate around Y-Axis"/>
                        </Slider.ToolTip>
                    </Slider>
                    <Slider x:Name="sliderZ" Grid.Column="2" Grid.Row="1" Minimum="-180.0" Maximum="180.0" Style="{StaticResource slider}">
                        <Slider.ToolTip>
                            <TextBlock Text="Rotate around Z-Axis"/>
                        </Slider.ToolTip>
                    </Slider>
                </Grid>
            </GroupBox>

            <GroupBox Header="Translate" Margin="4.0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="X" Grid.Column="0" Grid.Row="0"/>
                    <TextBlock Text="Y" Grid.Column="1" Grid.Row="0"/>
                    <TextBlock Text="Z" Grid.Column="2" Grid.Row="0"/>
                    <Slider x:Name="transSliderX" Grid.Column="0" Grid.Row="1" Minimum="-10" Maximum="10" Style="{StaticResource slider}">
                        <Slider.ToolTip>
                            <TextBlock Text="Translate along the X-Axis"/>
                        </Slider.ToolTip>
                    </Slider>
                    <Slider x:Name="transSliderY" Grid.Column="1" Grid.Row="1" Minimum="-10" Maximum="10" Style="{StaticResource slider}">
                        <Slider.ToolTip>
                            <TextBlock Text="Translate along the Y-Axis"/>
                        </Slider.ToolTip>
                    </Slider>
                    <Slider x:Name="transSliderZ" Grid.Column="2" Grid.Row="1" Minimum="-10" Maximum="10" Style="{StaticResource slider}">
                        <Slider.ToolTip>
                            <TextBlock Text="Translate along the Z-Axis"/>
                        </Slider.ToolTip>
                    </Slider>
                </Grid>
            </GroupBox>

            <GroupBox Header="Zoom" Margin="4.0">
                <Slider x:Name="sliderZoom" IsDirectionReversed="True" Minimum="0.01" Maximum="1" Value="0.8" Style="{StaticResource slider}" />
            </GroupBox>
        </StackPanel>
    </Grid>
</UserControl>

We can now add the method that will handle the mouse wheel event to zoom the model accordingly. To do this, we can right click on the mouse wheel event name and press “Navigate to Event Handler.” This will generate the mouse wheel event code that is needed. We can then add in a bit of logic for setting the value of the zoom slider which will in turn zoom the model as there is a binding connected to the slider. The code for the file ViewerPanel3D.xaml.cs should look like this:

using System.Windows.Controls;
using System.Windows.Input;

namespace BingMaps3DModel_WPF
{
    /// <summary>
    /// Interaction logic for ViewerPanel3D.xaml
    /// </summary>
    public partial class ViewerPanel3D : UserControl
    {       
        public ViewerPanel3D()
        {
            InitializeComponent();
        }

        private void OnViewportMouseWheel(object sender, MouseWheelEventArgs e)
        {
            sliderZoom.Value -= (double)e.Delta / 1000;
        }
    }
}

If we run the application and go to the 3D model tab we should see something that looks like this.

Generating the Model

Having a nice panel for viewing the model is a good start but doesn’t really do us much good without having a 3D model to view. To create the 3D model we will need to do the following:

(1) Get a static map image for the based on the center point and zoom level of the map. To keep things easy, we will make keep the width and height of the image equal to 800 pixels.

(2) Based on the center point, zoom level and imagery size we will then need to calculate the bounding box of the image as we will need it to request the elevation data.

(3) Make a request for the elevation data for the bounding box we created. Again, to keep things simple we will specify that the data points be evenly distributed over 30 rows and columns. This will result in 900 elevation data points being returned which is under the 1000 elevation data point limit.

(4) We need to loop through all the elevation data, calculate the relative coordinate, and then convert this coordinate to a pixel coordinate. We will also need to convert the elevation into a pixel length and then scale these values down relative to the size of the map.

(5) Now we can create a 3D Mesh Geometry out of the data. To do this, we will need to specify all the data points as 3 dimensional coordinates, and then specify the texture coordinates used to map the static map image to the mesh. We will also need to specify the point indices used to create the triangles needed for the mesh.

(6) As a final step, we will create a Geometry Model out of the 3D Mesh and set the static image as the material to be overlaid on top of it. This model can then be passed into our ViewerPanel3D user control.

Most of the math used to work with the pixel coordinates are based off of these two articles: Bing Maps Tile System, and VE Imagery Service and Custom Icons. Putting all the above tasks together and adding them to the MainWindow.xaml.cs file you should end up with a code for the MainWindow.xaml file that looks like this:

using System;
using System.IO;
using System.Net;
using System.Runtime.Serialization.Json;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Media3D;
using BingMapsRESTService.Common.JSON;

namespace BingMaps3DModel_WPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        #region Private Properties

        private string sessionBingMapsKey;

        private GeometryModel3D mGeometry;

        private const double mapSize = 800;

        private double topLeftX;
        private double topLeftY;
        private double zoom;

        #endregion        

        #region Constructor

        public MainWindow()
        {
            InitializeComponent();

            MyMap.CredentialsProvider.GetCredentials((x) =>
            {
                sessionBingMapsKey = x.ApplicationId;
            });
        }

        #endregion   

        #region Button Event Handler

        private void Generate3DModel_Click(object sender, RoutedEventArgs e)
        {
            double cLat = MyMap.Center.Latitude;
            double cLon = MyMap.Center.Longitude;

            //Round off the zoom level to the nearest integer as an integer zoom level is needed for the REST Imagery service
            zoom = Math.Round(MyMap.ZoomLevel);

            //Only generate models when the user is zoomed in at a decent zoom level, otherwise the model will just be a flat sheet.
            if (zoom < 8)
            {
                MessageBox.Show("This zoom level is not supported. Please zoom in closer (>8).");
                return;
            }

            //Clear current model from the viewer panel
            if (mGeometry != null)
            {
                viewerPanel.group.Children.Remove(mGeometry);
            }

            //Open up the 3D model tab
            MyTabs.SelectedIndex = 1;

            //Calculate bounding box of image for specified zoom level and center point for map dimensions

            //Retrieve image of map dimensions for the specified zoom level and center point.
            string imgUrl = string.Format("http://dev.virtualearth.net/REST/v1/Imagery/Map/Aerial/{0},{1}/{2}?mapSize={3},{4}&key={5}",
                cLat,
                cLon,
                zoom,
                mapSize,
                mapSize,
                sessionBingMapsKey);

            ImageBrush imgBrush = new ImageBrush();
            imgBrush.ImageSource = new BitmapImage(new Uri(imgUrl));

            DiffuseMaterial material = new DiffuseMaterial(imgBrush);

            //calcuate pixel coordinates of center point of map
            double sinLatitudeCenter = Math.Sin(cLat * Math.PI / 180);
            double pixelXCenter = ((cLon + 180) / 360) * 256 * Math.Pow(2, zoom);
            double pixelYCenter = (0.5 - Math.Log((1 + sinLatitudeCenter) / (1 - sinLatitudeCenter)) / (4 * Math.PI)) * 256 * Math.Pow(2, zoom);

            //calculate top left corner pixel coordiates of map image
            topLeftX = pixelXCenter - (mapSize / 2);
            topLeftY = pixelYCenter - (mapSize / 2);

            //Calculate bounding coordinates of map view
            double brLongitude, brLatitude, tlLongitude, tlLatitude;

            PixelToLatLong(new System.Windows.Point(900, 800), out brLatitude, out brLongitude);
            PixelToLatLong(new System.Windows.Point(0, 0), out tlLatitude, out tlLongitude);

            //Retrieve elevation data for the specified bounding box
            //Rows * Cols <= 1000 -> Let R = C = 30

            string elevationUrl = string.Format("http://dev.virtualearth.net/REST/v1/Elevation/Bounds?bounds={0},{1},{2},{3}&rows=30&cols=30&key={4}",
                brLatitude,
                tlLongitude,
                tlLatitude,
                brLongitude,
                sessionBingMapsKey);

            WebClient wc = new WebClient();
            wc.OpenReadCompleted += (s, a) =>
            {
                using (Stream stream = a.Result)
                {
                    DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(Response));
                    Response response = ser.ReadObject(stream) as Response;

                    if (response != null && 
                        response.ResourceSets != null &&
                        response.ResourceSets.Length > 0 &&
                        response.ResourceSets[0] != null &&
                        response.ResourceSets[0].Resources != null &&
                        response.ResourceSets[0].Resources.Length > 0)
                    {
                        ElevationData elevationData = response.ResourceSets[0].Resources[0] as ElevationData;

                        //Map elevation data to 3D Mesh
                        MeshGeometry3D mesh = new MeshGeometry3D();

                        double dLat = Math.Abs(tlLatitude - brLatitude) / 30;
                        double dLon = Math.Abs(tlLongitude - brLongitude) / 30;

                        double x, y, m2p;

                        for (int r = 0; r < 30; r++)
                        {
                            y = tlLatitude + (dLat * r);

                            for (int c = 0; c < 30; c++)
                            {
                                int idx = r * 30 + c;

                                x = tlLongitude + (dLon * c);

                                double z = -elevationData.Elevations[idx];

                                m2p = 156543.04 * Math.Cos(y * Math.PI / 180) / Math.Pow(2, zoom);

                                System.Windows.Point p = LatLongToPixel(y, x);
                                p.X = (p.X - 400) / mapSize;
                                p.Y = (p.Y + 400) / mapSize;

                                mesh.Positions.Add(new Point3D(p.X, p.Y, z / mapSize / m2p));

                                mesh.TextureCoordinates.Add(p);

                                //Create triangles for model
                                if (r < 29 && c < 29)
                                {
                                    mesh.TriangleIndices.Add(idx);
                                    mesh.TriangleIndices.Add(idx + 1);
                                    mesh.TriangleIndices.Add(idx + 30);

                                    mesh.TriangleIndices.Add(idx + 1);
                                    mesh.TriangleIndices.Add(idx + 31);
                                    mesh.TriangleIndices.Add(idx + 30);
                                }
                            }
                        }

                        //Add 3D mesh to view panel
                        mGeometry = new GeometryModel3D(mesh, material);
                        mGeometry.Transform = new Transform3DGroup();
                        viewerPanel.group.Children.Add(mGeometry);
                    }
                }
            };

            wc.OpenReadAsync(new Uri(elevationUrl));
        }

        #endregion

        #region Helper Methods

        private System.Windows.Point LatLongToPixel(double latitude, double longitude)
        {
            //Formulas based on following article:
            //http://msdn.microsoft.com/en-us/library/bb259689.aspx

            //calculate pixel coordinate of location
            double sinLatitude = Math.Sin(latitude * Math.PI / 180);
            double pixelX = ((longitude + 180) / 360) * 256 * Math.Pow(2, zoom);
            double pixelY = (0.5 - Math.Log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI)) * 256 * Math.Pow(2, zoom);

            //calculate relative pixel cooridnates of location
            double x = pixelX - topLeftX;
            double y = pixelY - topLeftY;

            return new System.Windows.Point((int)Math.Floor(x), (int)Math.Floor(y));
        }

        private void PixelToLatLong(System.Windows.Point pixel, out double lat, out double lon)
        {
            double x = topLeftX + pixel.X;
            double y = topLeftY + pixel.Y;

            lon = (x * 360) / (256 * Math.Pow(2, zoom)) - 180;

            double efactor = Math.Exp((0.5 - y / 256 / Math.Pow(2, zoom)) * 4 * Math.PI);

            lat = Math.Asin((efactor - 1) / (efactor + 1)) * 180 / Math.PI;
        }

        #endregion
    }
}

You should now be able to run the application. Give it a go and zoom into an area where there is a good chance of being varying elevations. I find using a zoom level between 15 and 19 works best. If you don’t see a model generated, try zooming out or translating along the Z axis.

Here is a screenshot of my finished application with the generated 3D model of a section of the Grand Canyon. Nice, right?

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

Geocoding and Routing in Bing Maps Windows Store Apps (JavaScript)

2013-02-06T16:20:00Z

In this blog post we are going to look at how implement Geocoding and Routing using the Bing Maps Windows Store App JavaScript SDK. If you are new to JavaScript development with the Bing Maps Windows Store App SDK I recommend reading the Getting started with Bing Maps Windows Store Apps blog post first. We will also be making use of Bing Maps Modules. If you are unfamiliar with modules, I recommend reading the blog post: Modules in Bing Maps Windows Store Apps.

Geocoding is one of the most common tasks done by users of online maps. Geocoding is the process of taking an address or query and returning its equivalent coordinate on the map. Routing is the task of calculating the directions between two or more locations. In Bing Maps there are a lot of different options around routing such as routing by different modes of transportation; driving, walking, or transit. In Bing Maps there are several ways to carry out these tasks. The most common method is to use the Bing Maps REST services which are very easy to use from just about any programming language. In the JavaScript version of Bing Maps there a modules which wraps the REST services and exposes it as an easy to use JavaScript library. We will be making use of the Search module for geocoding and the Directions module for routing.

Setting up the project

To set up the project open Visual Studios 2012 and create a new project. In the window that opens select JavaScript -> Windows Store. Select the Blank App template, call the application BingMapsSearch_WinRTJS and press OK.

To keep things clean, we are going to create a separate CSS Style Sheet and JavaScript file for our application. To do this, right click on the js folder and select Add -> New Item. Create a new JavaScript file called BingMapsSearch.js. Then, right click on the css folder and select Add -> New Item and create a new Style Sheet called BingMapsSearch.css.

At this point your Solution should look something like this:

Next, you’ll want to add a reference to the Bing Maps JavaScript library. Right click on the References folder and press Add Reference. Then select Windows -> Extensions and select Bing Maps for JavaScript. If you do not see this option, you may want to verify that you have installed the Bing Maps for Windows Store App SDK .

We can now open up the default.html file and add references to the Bing Maps SDK along with references to our CSS Style Sheet and JavaScript file. To do this, simply add the following in the head of the page:

Creating the UI Layout

Before we worry about how to do all the programming of the logic required for this application, let’s first focus on creating the UI. For this app we are going to have a panel on the left side where all our input controls will reside and the map will fill up the rest of the space to the right. In the left frame we will have Clear Map button, an area for inputting geocode and route requests, and a div for rendering routing itineraries. The geocode input area will consist of a single textbox and a button. The routing input area will have two textboxes and a button. The HTML for the default.html file should look like this:

<!DOCTYPE html>

<html>

<head>

<title>BingMapsSearch_WinRTJS</title>

src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

src="ms-appx:///Bing.Maps.JavaScript//js/veapimodules.js"></script>

</head>

<body>

<button onclick="ClearMap();" class="greenBtn">Clear Map</button>

</div>

<h2>Geocode</h2>

</div>

<h2>Route</h2>

From: <input id="fromTbx" type="text" style="width:200px;"/>

To: <input id="toTbx" type="text" style="margin-left:17px;width:200px;"/>

<button onclick="GetRoute();" class="greenBtn">Get Directions</button>

</div>

</div>

</body>

</html>

To keep things clean we will add some of the styling information into the BingMapsSearch.css file. Add the following to this file:

.leftFrame {

position:absolute;

height:100%;

width:260px;

padding:10px;

background-color:#808080;

overflow-y:auto;

}

.greenBtn {

background-color:green;

float:right;

margin-right:15px;

}

#myMap {

position:absolute;

width:100%;

height:100%;

margin-left:280px;

}

#itineraryDiv {

position:absolute;

width:240px;

}

At this point we can run the application and see what it looks like. You should end up with something like this:

Note that the map does not appear as we have not yet added the logic to load it. Also, since we haven’t wired up any of the functionality for the buttons, clicking on them now would throw an error.

Loading the Bing Maps Control

We will add the functionality to load the Bing Maps control to the BingMapsSearch.js file. We are now going to create three global variables called: map, searchManager and directionsManager. Next, we will create a function called GetMap which will load the Bing Maps control for us. The GetMap function will be loaded after the Microsoft.Maps.Map module has completed loading. Your code should look like this:

var map, searchManager, directionsManager;

function GetMap() {

var mapOptions =

{

credentials: "YOUR_BING_MAPS_KEY",

zoom: 2

};

map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions);

}

//Initialization logic for loading the map control

(function () {

function initialize() {

Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });

}

document.addEventListener("DOMContentLoaded", initialize, false);

})();

Adding the Geocoding Logic

When a user adds content to the searchTbx textbox and presses the Go button a request will be fired to a Geocode function. For this functionality we will be making use of the Search module. The first thing we will do in this function is check to see if the searchManager variable has been initialized. If it hasn’t, we will load the Search module and initialize this variable and then process the search request. If this variable has been initialized, we will then create a geocode request passing in the users input value and requests a maximum of 1 result. We will also pass in the names of callback functions that get called if the request is successful or not.

If the request is successful we will display the result on the map with a pushpin and zoom into the location. If it is not successful, we will alert the user. The request will then be geocoded against the search manager. I would like to take a moment to point out that the alert JavaScript function that is commonly used in web development is not supported in Windows Store Apps. Instead, we need to make use of the Windows.UI.Popups.MessageDialog class. And since this is likely something we will want to use regularly, we will create a simple function for displaying messages to the user called ShowMessage. Add the following code to the BingMapsSearch.js file.

function GeocodeModule() {

ClearMap();

if (searchManager) {

var request = {

where: document.getElementById('searchTbx').value,

count:1,

callback: geocodeCallback,

errorCallback: geocodeError

};

searchManager.geocode(request);

} else {

//Load the Search module and create a search manager.

Microsoft.Maps.loadModule('Microsoft.Maps.Search', {

callback: function () {

//Create the search manager

searchManager = new Microsoft.Maps.Search.SearchManager(map);

//Perfrom search logic

Geocode();

}

});

}

function geocodeCallback(response, userData) {

if (response &&

response.results &&

response.results.length > 0) {

var r = response.results[0];

var l = new Microsoft.Maps.Location(r.location.latitude, r.location.longitude);

//Display result on map

var p = new Microsoft.Maps.Pushpin(l);

map.entities.push(p);

//Zoom to result

map.setView({ center: l, zoom : 15 });

} else {

ShowMessage("Geocode Response", "Not results found.");

}

function geocodeError(request) {

ShowMessage("Geocode Error", "Unable to Geocode request.");

}

function ShowMessage(title, msg) {

var m = new Windows.UI.Popups.MessageDialog(title, msg);

m.showAsync();

}

Adding the Routing Logic

When a user adds content to the fromTbx and toTbx textboxes and presses the Get Directions button a request will be fired to a GetRoute function. For this functionality we will be making use of the Directions module. The first thing we want to do in this function is to verify that the directionsManager variable has been initialized. If it hasn’t, we will load the Directions module and initialize this variable and then process the route request. If this variable has been initialized, we will then pass the start and end points to the directions manager and pass in the itinerary div id as the location to display the directions. We will then have the directions manager calculate the directions. Add the following code to the BingMapsSearch.js file.

function GetRoute() {

ClearMap();

if (directionsManager) {

// Set Route Mode to driving

directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });

// Create start and end waypoints

var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('fromTbx').value });

var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('toTbx').value });

directionsManager.addWaypoint(startWaypoint);

directionsManager.addWaypoint(endWaypoint);

// Set the id of the div to use to display the directions

directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });

// Calculate directions, which displays a route on the map

directionsManager.calculateDirections();

} else {

//Load the Directions module and create a directions manager.

Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {

callback: function () {

//Create the directions manager

directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

//Perfrom route logic

GetRoute();

}

});

}

The directions manager takes care of notifying the user if there is an issue calculating the route such as one of the route points having ambiguous results. This saves use a lot of time as we won’t have to worry about handling and developing this functionality. Additionally, this gives us the ability to easily drag the route if we want to customize it or avoid an area.

Clearing the Map

Whenever we process a new geocode or route request we will want to clear the map. We will also need to create a function named ClearMap as this is needed for the Clear Map button. When this function is called we will want to remove any entities from the map and reset the directions manager. This is rather simple to do, just add the following code to the BingMapsSearch.js file.

function ClearMap() {

map.entities.clear();

if (directionsManager) {

directionsManager.resetDirections();

}

Running the App

At this point we have created all the functionality needed for the UI we created originally. If you run the app now you can make geocode and routing requests. Here is a screen shot of the app with a route from New York to Toronto.

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

Venue Maps in Windows Store Apps (JavaScript)

2013-01-31T15:30:00Z

Within Bing Maps you have the ability to view Venue Maps. Venue Maps are often thought of as maps of indoor structures such as malls and airports; however, venue maps can be opened up to so much more. A few examples of other types of venue maps include: the layout of shopping districts, stadiums, race courses, and universities.

Using Venue Maps in Bing Maps requires loading in the Venue Map module. If you are not familiar with modules in Bing Maps take a look at the blog post on Bing Maps Modules in Windows Store Apps.

In this blog post, we are going to create a simple application that when zoomed in, will load in nearby venues into Bing Maps in your Windows Store App as you pan the map around.

Setting up the project

To set up the project, open Visual Studios 2012 and create a new project. In the window that opens select JavaScript -> Windows Store. Select the Blank App template, and call the application VenueMaps_JS and press OK.

To keep things clean we are going to create a separate JavaScript file for our application. Right click on the js folder and select Add -> New Item. Create a new JavaScript file called VenueMaps.js.

At this point your Solution should look something like this:

Next, add a reference to the Bing Maps JavaScript library. To do this, right click on the References folder and press Add Reference. Select Windows -> Extensions select Bing Maps for JavaScript. If you do not see this option ensure that you have installed the Bing Maps Windows Store App SDK.

Now we can open up the default.html file and add references to the Bing Maps SDK along with references to the Bing Maps modules API and our JavaScript file. While we are at it, we will also add a div to the body of the page where we want the map control to load. Your default.html file should look like this:

<!DOCTYPE html>

<html>

<head>

src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

src="ms-appx:///Bing.Maps.JavaScript//js/veapimodules.js"></script>

div {

color:#000;

}

</style>

</head>

<body>

</body>

</html>

Loading the Bing Maps Control

We will add the functionality to load the Bing Maps control to the VenueMap.js file. To start, we are going to create six global variables called: map, _mapBounds, _zoom, venueFactory, loadedVenues, and loadedVenueIds. Then, we will create a function called GetMap which will load the Bing Maps control for us. When loading the Bing Maps control we will also turn on the breadcrumb. The breadcrumb allows us to select different floors when viewing a venue. Inside of this function we will load in the Venue Maps module and initialize the venueFactory object. Now we will add a throttled event handler for when the map has finished moving that will get nearby venues. The GetMap function will be loaded after the Microsoft.Maps.Map module has completed loading. Your code should look like this:

var map,

loadedVenues = [],

loadedVenueIds = [],

_mapBounds,

_zoom,

venueFactory;

function GetMap() {

var mapOptions =

{

credentials: "YOUR_BING_MAPS_KEY",

zoom: 2,

showBreadcrumb : true

};

map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions);

//Load the venue map module

Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', {

callback: function () {

venueFactory = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);

//Use a throttled event to reduce the number of unwanted events being fired.

Microsoft.Maps.Events.addThrottledHandler(map, 'viewchangeend', GetNearbyVenues, 250);

}

});

}

//Initialization logic for loading the map control

(function () {

function initialize() {

Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });

}

document.addEventListener("DOMContentLoaded", initialize, false);

})();

Adding the Application Logic

When the veiwchangeend event handler is fired, it will trigger a function called GetNearbyVenues. This function will first loop through all loaded venues and dispose those that are out of view or all of them if the zoom level is less than 14. When disposing a venue we will also delete the stored venue id in the loadedVenueIds array. If the zoom level is greater or equal to 14 we will do a search for all venues that are within 4000 meters of the center of the map.

function GetNearbyVenues() {

_mapBounds = map.getBounds();

_zoom = map.getZoom();

//Dispose a venue if it is outside of the map view or if the zoom level is too high

var venuesInView = [], venue;

for (var i = 0; i < loadedVenues.length; i++) {

venue = loadedVenues[i];

if (_zoom < 14 || !_mapBounds.contains(venue.center)) {

delete loadedVenueIds[venue.id];

venue.dispose();

} else {

venuesInView.push(venue);

}

loadedVenues = venuesInView;

if (_zoom >= 14) {

// Search for venues that are within 4km of the center of the map

venueFactory.getNearbyVenues({ map: map, location: map.getCenter(), radius: 4000, callback: DisplayNearbyVenues });

}

When the search for nearby venues completes, a function called DisplayNearbyVenues will be fired. This function will loop through the venues that are returned and check if the venue has been loaded by checking the loadedVenueIds array. If the venue hasn’t been loaded we will create the venue and check to see if it is in the current map view and add both the venue and the venue id to the loadVenues and loadedVenueIds arrays. If it was loaded, we will then show it on the map. If it hasn't, we will dispose it. We will also attach a close event handler to the venue so that we can properly dispose it and remove any reference from our arrays.

function DisplayNearbyVenues(venues) {

if (venues) {

//Load new venues that are in view

for (var i = 0; i < venues.length; i++) {

if (loadedVenueIds[venues[i].metadata.MapId] == undefined) {

venueFactory.create({

venueMapId: venues[i].metadata.MapId,

success: function (v) {

if (_mapBounds.contains(v.center)) {

//Handle close event of venue

Microsoft.Maps.Events.addHandler(v, 'close', function (e) {

delete loadedVenueIds[v.id];

//Remove venue from loadedVenues array

for (var j = 0; j < loadedVenues.length; j++) {

if (loadedVenues[j].id == v.id) {

loadedVenues.splice(j ,ji+1);

break;

}

v.dispose();

});

loadedVenues.push(v);

loadedVenueIds[v.id] = true;

v.show();

} else {

v.dispose();

}

});

}

Running the App

At this point we have created all the functionality needed for nearby venues to be loaded as we navigate the map. If we run the app, zoom in and pan around in an area with the venue maps we should see the footprint of the venue load on the map. If you click on a venue footprint the map will zoom in on that venue and show the inside of the venue map. Here is a screen shot of the app with the venue map of Alder Hey Children’s Hospital located in Liverpool, UK.

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

Spatial Data Services: Job History & Data Source Options

2013-01-24T17:36:00Z

New job history! Have you ever wanted to check status of your geocode and data source jobs and see what jobs you’ve run recently? Bing Spatial Data Services now makes it easy to view your job history. With the new ListJobs API , you can return a list of all geocode jobs and jobs that made changes to data sources in the last 15 days for any Bing Maps Account. Pending jobs are listed first. All you need to do is provide a Bing Maps Key from your Bing Maps Account with the following URL.

http://spatial.virtualearth.net/REST/v1/dataflows/listjobs?key=Insert_Your_Bing_Maps_Key_Here

A JSON response is returned by default. Add “output(o)=xml” to return XML. Jobs that download data source data do not make changes to your data source and therefore are not part of this list.

More __Distance query parameter options. Want to simply get all your entity data plus the distance to each entity? Bing Spatial Data Services now accepts the wildcard character with the __Distance property when you Query by Area. Just specify $select=*,__Distance in your request. The distance option has also been expanded to support bounding box (rectangular region) queries. For bounding box queries, the distance returned for each entity is the distance from the center of the bounding box.

Make your data source public! Want to share your data with the world? Bing Spatial Data Services now gives you the option to make your data source public so that anyone with a Bing Maps Key can access. All you have to do is a Make a Data Source Public request as shown below. Set the setpublic parameter to true, and your data is publicly shared.

http://spatial.virtualearth.net/REST/v1/data/accessID/dataSourceName/$updateDataSource?setPublic=trueOrFalse&key= Insert_Your_Master_Key_Here

You can always make a data source private again by making the request again and setting the setpublic parameter to false. This parameter is also available when you Create or update your data source.

Delete selected entities with the new deleteEntity property. Want the ability to delete specific entities when you update your data source while leaving the rest of your data source intact? Bing Spatial Data Services can now incrementally delete entities when you use the __deleteEntity property in your schema and set it to 1 or true for each entity you want to remove when you update your data source.

We hope you enjoy these new features!

-The Bing Maps Team

Maps Blog

Upcoming Bing Maps Events - Spring 2013

HTML5 Canvas Pushpins in JavaScript

Bing Maps in AutoCAD 2014

Data source staging, rollback and more comes to Spatial Data Services

Connecting a SharePoint List to Bing Maps

Adding Bing Maps to SharePoint

Integrating with a SharePoint List

New Traffic Manager in AJAX v7

Geocoding a SharePoint List Item

New Top of the World and High Resolution Satellite Imagery

Oahu, Hawaii Before

Oahu, Hawaii After

W8 Map App | Bing Maps

Fiji Before

Fiji After

W8 Map App | Bing Maps

Visit Bing Maps World Tour App to view full coverage

Southwest of Jacobina do Piauí, Brazil

Cheboksary, Russia

Murzuq Desert, Southwestern Libya

Kamchatka Peninsula, Russia

Visit Bing Maps World Tour App to view full coverage

Subdivisions, Åhrus, Denmark

Port de Monaco, Monaco, France

Beach near Laredo, Cantabria, Spain

Wollaton Park, Nottingham, England

3D Elevation Models using HTML5 and Bing Maps

Attend the Bing Maps and SharePoint Solutions Webcast

Date/Time:

Tue Feb 26, 2013, 9:00 AM, USA Pacific

Duration:

1 Hour

Presenters:

Mark Merchant, Bing Maps Technical Solution Professional

Ricky Brundritt, Bing Maps Technical Solution Professional

Scott Caulk, VP of Product Management for IDV Solutions

Steve Milroy, CEO OnTerra Systems

Bing Maps REST Service Tips & Tricks

Using the REST services in managed code

Geocoding

Reverse Geocoding

Routing

Imagery Service

Reducing Usage Transactions

3D Elevation Models with Bing Maps WPF

Geocoding and Routing in Bing Maps Windows Store Apps (JavaScript)

Venue Maps in Windows Store Apps (JavaScript)

Spatial Data Services: Job History & Data Source Options