In last week’s blog posts I talked about several different ways of overlaying ESRI shapefile data onto Bing Maps. In this post, I will walk through how to develop a simple application for loading a locally store shapefile onto the Bing Maps WPF control using the ESRI Shapefile Reader CodePlex project.

Creating the project

First, you will need to download the ESRI Shapefile Reader project. Once this completes, you can unzip and run the Visual Studio project. You will notice there are two libraries in the project. The first is called Catfood.Shapefile; this is the main library that has the logic for reading and parsing Shapefiles. The second is just a basic application for reading some metadata from a shapefile. We are really only interested in the first project.

Open up Visual Studios and create a new WPF application call BingMapsShapefileViewer. Next, right click on the solution and add an Existing project. Locate and add the Catfood.Shapefile project. Next, right click on the References folder of the BingMapsShapefileViewer project and add a reference to the Catfood.Shapefile project. Your solution should look like this:

Adding the Map

Adding a map to the WPF control is pretty straight forward. You will first need to add a reference to the WPF Map control library (Microsoft.Maps.MapControl.WPF.dll), which is usually located in the C:\Program Files (x86)\Bing Maps WPF Control\V1\Libraries directory.

Now that you have a reference to the map control in your project we can go ahead and add a map in the xaml of the MainWindow.xaml file. While we’re at it, let’s add a MapLayer for the shapefile data as a child of the map control and add two buttons: one to load in a shapefile and another to clear the map. Your xaml should look like this:

If you build the project you should see a map with two buttons on it like this:

Reading a Shapefile

Now that we have our base application created we can add the logic to read in a shapefile when a user clicks the “Load Shapefile” button. To keep things easy we will only support shapefiles that are in the proper projection, WGS84, as re-projecting the data would make this much more complex and best covered in a future blog post.

We will use an OpenFileDialog to allow us to easily select the shapefile we wish to load to the map. Once a file is selected we can pass the file path into the Shapefile class from our Shapefile Reader library. Your code will look like this:

You can now loop through each shape in the shapefile and convert each shape in the shapefile into a Bing Maps shape and then add it to the map. When this is all put together, we end up with the complete source code for the MainWindow.xaml.cs file.

Here are a few screen shots of the application loading in some different shapefiles.

Example of all the interstate highways in the USA:

Example with county boundaries being rendered:

Getting Data

Here are a couple of good sources for ESRI Shapefiles to test with:

• Zillow Neighborhood Boundaries
• DIVA-GIS – World Boundary data
• OS OpenData*

*Note: this data is in OSGB36 projection and need to be re-projected before being used with Bing Maps. These can easily be re-projected using a free tool is called the Geospatial Data Abstraction Library. Here is a quick example of the command needed for converting these files to WGs84 projection:

- Ricky Brundritt, EMEA Bing Maps Technology Solution Professional

To celebrate the US completion of the Global Ortho project, the team flew one last commemorative mission which we've called our “Golden Spike” flight. Check out the full post: Global Ortho & 17 Million SqKm of New Satellite Imagery.

In a recent post, we announced the completion of the Global Ortho (GO) program in the United States.  GO for Western Europe is on schedule to be completed by the end of CY 2012.

Also new this month, Bing Maps adds nearly 17 Million SqKm of new satellite imagery!

Global Ortho	New Satellite Imagery
Boulder, Colorado - See it Live!	Paparahandi, India - See it Live!

Go to the corners of the Earth, including Paparahandi, India in a click of a button with the help of Bing Maps new satellite imagery!

As part of the Global Ortho project, BITs has acquired 100% of the USA

We've wrapped up the Global Ortho project for the US with the release of 800,133 SqKm! Be sure to check out  our imagery commemorating this exciting milestone.

There are two places where we could not collect photos: Area 51 and the Vandenberg Air Force Base. However, the United States allowed the Global Ortho aircraft everywhere else, and Microsoft captured astonishing imagery. Visit Bing Maps World Tour App to view full coverage.

After two years of acquiring imagery, the Bing Imagery Technology  (BITs) team is excited to reveal the completion of aerial coverage in the U.S.A. That means every square inch of the continental U.S.A. has been photographed, bringing Bing Maps consistent quality and high resolution imagery.

MORE HIGHLIGHTS:

• GM-Proving Grounds, MI
• Joe Louis Arena, MI
• Jack Daniels Distillery, TN
• Cape Cod, MA
• Stowe Mtn. Resort, VT
• Mall of America, MN

This imagery was collected at a 30cm resolution (1 foot = 1 pixel). While many areas of the country have been photographed at higher resolution, Bing Maps covered the entire country at this high resolution.  Some parts of the United States have never before been aerially photographed in such detail! This photography project yielded a staggering amount of data.  To get a sense of the size, imagine lining up all the GO pixels end to end. So laid out, those pixels would reach around the earth 994 times, to the moon 104 times, and all the way to Venus (with an extra trillion pixels to spare.)

Here are a few news clips of the Bing Maps Global Ortho project:

• Bing Maps- Bringing online maps to life (2:12)
• 9 News- Bing project provides new mapping technology (3:03)

BITs Golden Spike Event: Time to Celebrate!

See the Golden Spike Event Team Photo blog post for a list of the individuals in the Bing Maps Global Ortho Golden Spike photo.

To celebrate the US completion, the team flew one last commemorative mission which we've called our “Golden Spike” flight. Golden Spike hearkens back to the spike that was driven to commemorate the joining of the first transcontinental railroad in the U.S. For our Golden Spike celebrating the largest aerial photography project ever undertaken, Bing Maps invited local Colorado chalk artist Jennifer Mosquera to create the biggest Bing logo ever made!  At over 200’ by 90’, the logo may indeed be the biggest Bing ever.  As luck would have it, the ideal spot for the logo in the Golden Spike flight was the top of the parking garage just north of the Bing Maps Imagery Team’s building in downtown Boulder, CO.

The BITs team made two videos of the Golden spike event.  The first video documents the artists making the biggest Bing ever, and the second video narrates the day of the final Global Ortho flight.

Video 1: Microsoft Bing Maps - Global Ortho Golden Spike - Logo Creation (5:41)

Video 2:  Bing Maps Global Ortho Golden Spike - Day of the Flight (3:48)

Brand New Imagery over Manhattan!

We’ve acquired new 15cm imagery over Manhattan including a view of the Space Shuttle Enterprise. The Enterprise was the first Space Shuttle Orbiter built for NASA and now resides at the Intrepid Sea, Air and Space Museum.

MORE NY ATTRACTIONS:

• Madison Square Garden
• Central Park
• Yankee Stadium
• World Trade Center Memorial

BITS Publishes New Satellite Imagery to Bing Maps!

The BITs team is pleased to announce a new publication of satellite imagery totaling 85 terabytes and covering nearly 17 million SqKm (16,915,916 SqKm, to be exact!)

MORE HIGHLIGHTS:

• Longyan, China
• Kauai, Hawaii
• Mandvi, India
• North Darfur, Sudan
• Abu Dhabi, Dubai

We've updated coverage across the globe. South America, southern Asia, Africa, and Australia make up the largest amount of this month's release. Check out Mexico, Russia, and Canada for additional updated imagery!

Total coverage of new satellite imagery currently live on Bing Maps! Visit Bing Maps World Tour App to view full coverage.

Calling all partners!! Who’s plugged in to Dynamics CRM & Bing Maps?

For those of you that are new to the CRM space, the eXtremeCRM Conferenceis the hub where Microsoft Dynamics CRM partners come together to forge business relationships, gain knowledge from real-world experiences and dive deep into current and future technologies.  This year’s conference will be in Las Vegas (Sept 30 – Oct 3) and we’re really excited to have Geoff Innis, a Bing Maps Technical Specialist, present a session on visualizing Dynamics CRM data in Bing Maps.

The visualization of business data using Bing Maps enables deeper business insights to enhance productivity and optimize business decisions. This session will provide a deep-dive code review of the integration of Bing Maps into Dynamics CRM via Web Resources and the Dynamics CRM REST endpoint, and will cover scenarios such as field visit planning and optimization, and heat-mapping and thematic mapping of CRM entity data for trend visualization and decision making.

Every ten years the US Bureau of the Census counts the people in the US and collects a number of other household metrics. The last census was compiled in 2010 and the Census Bureau sent hundreds of thousands of people door to door to count the population. The Census Bureau makes this data available but to ensure the privacy of individuals it groups this data into census blocks.

Census data can be extremely useful in business. Being able to visualize demographic data on a map is something that many companies do within their business intelligence tools. This gives them insight into areas such as income, population, race, even the types of industry people work in. This kind of information can prove vital when trying to research new sales regions or putting together targeted marketing campaigns. Another interesting use for this data is to compare the census data to the election polls.

As I mentioned before the Census Bureau makes this data available to the public. One of the most commonly used data is the boundaries information. This information traditionally has been made available in Tiger format but in recent years has been made available in more common formats such as ESRI Shapefile and KML format. In addition to the boundary data there is tons of demographic data that is related to each boundary. Needless to say there is a massive amount of data available from the Census Bureau; there is several gigabytes worth of data in boundary information alone.

With the elections around the corner one common site used by those who follow the elections is Ballotpedia. This site has made use of CensusViewer to provide voter data for the Congressional districts of New York. These publicly accessible maps show registered voter counts inside of Bing Maps. Visitors can zoom in on any area of the state and compare old and new districts projected on the map. Check it out for yourself here; NY US Congress: Census 2001, Census 2011; NY State Senate: Census 2001, Census 2011; NY State House: Census 2001, Census 2011. Here is a screen shot of the NY State Senate data from 2001.

What is CensusViewer?

CensusViewer is an online application built by Moonshadow Mobile. This application gives you access to the 2010 and 2000 Census “Summary File 1” data from the U.S. Census Bureau as well as the selected American Community Survey (ACS) data and extensive data including registered voters and frequently updated commercial data sources. It is an excellent online tool for demographic analysis of the U.S. population. With CensusViewer you can navigate the census data from within the familiar Bing Maps interface coupled with Moonshadow’s cutting-edge database technology, to provide an intuitive platform for accessing and analyzing the data. Now, there are a couple different versions which give you access to different levels of data. If you want to try it out yourself, you’re in luck because there’s a free version. Here is a heat map created using this tool of the US population that is at or below the poverty level.

Integration with Bing Maps

Integrating census data with Bing Maps is something that I come across on a fairly regular basis. One common issue many developers come across is that the boundary data and the demographic data are two separate data sets. It’s up to the developer to connect the two. This isn’t overly difficult as there are census track ID’s that tie everything together, but the real issue comes with figuring out how to link the data programmatically.

So how do we do it? Using the data in KML format may be tempting as it is in an easy human readable format. However, a single KML file that has the boundaries for a single county in the US is roughly 3MB in size. If you try loading in the entire boundary dataset as KML format it won’t take long before you run into performance issues. In addition to this you would have to write a lot of code to link the demographic data to the boundary information. All of this can be done but there is a much better way.

I personally prefer working with the ESRI Shapefiles over KML. One big benefit is that it’s rather easy to upload an ESRI Shapefile into SQL Server as I described in a recent blog post. Once this data is in SQL Server linking it up with the demographic data is rather simple due to the relational nature of SQL. Once you have the data in SQL Server you are half way to visualizing it on a map. In fact if you want to quickly view this data you can simply do queries inside of SQL Management studio to see what it looks like without a map. You can take it a step further and install SQL Report Builder which can easily overlay your spatial data on top of a static Bing Maps image. Note that SQL Server 2008, 2012 and Azure all support spatial data.

Being able to see the data in SQL Reports is a good start but let’s be honest, we want view it using an interactive map. There is a couple of ways to go about this. One method is to create a web service for exposing your data to your map. This method works well with small data sets but not so much for larger data sets. Ideally you don’t want your users having to download all the census data to their maps. This would not make for a very good user experience and would likely be too much data for the browser. One option is to make use of the spatial tools in SQL Server and reduce the resolution of the data based on zoom level. This method can significantly reduce the size of the data while keeping the data interactive.

Another approach is to convert your spatial data into an image and overlay that on the map. Using this approach the user only has to download a small image which will make for fast loading on the map. This drastically improves performance. Now you might be thinking “how do you interact with the data if it’s an image?” Well you can add a click event to the map and when the user clicks the map, send the coordinates through a web service to your database and query any data that intersects with your coordinates. This is a rather simple query with the spatial tools in SQL Server. You can then return the data and represent to the user. I have had great success using this approach in a number of projects.

So how do you turn your data into an image? Well I actually wrote a blog posts on this topic in the past. Since then one of our Bing Maps partners, OnTerra, has create an open source project called AJAX Map DataConnector. This tool uses the MVC framework to expose spatial data in SQL Server to the Bing Maps AJAX control. In addition to this it also has several common spatial queries built into it and the ability to render the data on the map as either interactive data or as an image. This tool is a great place to start if you want to develop something yourself. OnTerra also has a commercially supported version of this tool called GeoSavvy.

Now so far all of these solutions require you to manage the data and do some development. What if you just want to visualize the data on Bing Maps without all the hassle of developing an application? Well CensusViewer is the solution for you!

Who’s in for some free geospatial insight?! Learn how your organization can take advantage of Bing Maps to enhance your line of business solutions and provide a deeper insight into your business data.

Up next…

Bing Maps Platform in the Enterprise: Experience the Value (EPG339CAL)

In this session, Mark and Kevin will talk through solutions that integrate Bing Maps to help organizations plan their resources, take advantage of best opportunities, make smarter operational decisions that enhance efficiency, and lower costs. You’ll learn what’s included in the Bing maps platform, and how to best take advantage of the data services & imagery and incorporate them into line of business operations within your organization. We will explore the development options with the platform and how to get you started developing.

Bing Maps for Windows Store App JavaScript Development (EPG341CAL)

In this webcast we will take a look at the tools available for developing Bing Maps for Windows Store Apps using JavaScript. We will go through the complete process from start to finish on adding Bing Maps to your App. We will also take a look at some migration tips for those who have existing applications developed on the Bing Maps V7 AJAX Web control.

Native Bing Maps for Windows Store App Development (EPG342CAL)

In this webcast we will take a look at the tools available for developing Bing Maps for Windows Store Apps using Native code (C#, VB, C++). We will go through the complete process from start to finish on adding Bing Maps to your App. We will also take a look at how to tie into the Location Services in Windows 8 and also how to access the Bing Maps REST services from code.

Microsoft's Geospatial Tool Kit – Bing Maps & SQL Server (EPG340CAL)

Attend this session to learn how Microsoft’s geospatial tools enable customers to save money and resources over traditionally “heavy” GIS systems. Creating, maintaining and displaying geospatial data has never been simpler…and we’ll show you how to do this with the software that you may already own or readily have access to. Regardless of if you’re building with SQL Server or SQL Azure, maintaining your data in an easy to manage toolset is fast and it easily scales. Combined with the Bing Maps Platform, displaying your points, lines and polygons to your users - regardless if it’s 1 or 10 million - just works! While all are invited to attend, this webcast will focus more on the development aspect of Bing Maps when combined with SQL Server.

I was pinged late yesterday by the Los Angeles County Metropolitan Transportation Authority about this whole “Carmaggedon” nightmare going on in LA this weekend. Being a SoCal native, I empathized with just how horrible this is going to be. Seriously…horrible. Meanwhile, in Seattle, I’m smiling since I don’t have to deal with it; but, that’s neither here nor there. I digress. Empathy reigned and I reached out to my Bing Maps Dev team to see what it would take to create a road closure and detour to guide my long, Lost Angels through the weekend. And, just like that I’m happy to say that Bing Maps is now able to provide routing guidance around the Carmaggedon II. Yay!

Notice the route on the left routes you on 405, whereas the route on the right routes you down Sepulveda. You’ll need to select the “View Route Based on Traffic” feature (default on Windows Phone). Our route around solutions will last through the weekend while the freeway is closed.

^CP

Today we are announcing the availability of the Bing Maps SDKs for Windows Store apps. These SDKs will allow you to bring the power of Bing Maps to your Windows Store apps with support for C#, C++, Visual Basic and JavaScript based applications.

Please be aware that this release is the only version (1.1.20120927.0) of Bing Maps which will be supported for apps submitted to the Windows Store. If you are running any prior version (or BETA) you must upgrade and rebuild your app with this build to pass the Windows app Certification Kit (WACK) process. This process is required to submit all apps to the store and checks for the latest version of all dependencies to be approved. In most cases this should be as easy as downloading the latest version of the Bing Maps for Windows Store Apps API and recompiling your app.

Depending on the type of application you want to build and how you intend to use maps, we offer two options:

Bing Maps for JavaScript

For those of you familiar with our AJAX web control, building apps with the JavaScript SDK should be a snap. There are a few differences in how you load modules locally and some restrictions in certain markets but otherwise it has the same features and functionality as its web counterpart. With some tweaks, you should be able to port over your existing web experience using maps into the Windows Store and its rapidly growing user base.

If you’re new to Bing Maps, you can head over to our iSDK site which allows you to test drive the APIs and get a feel for how the web control works for Windows Store apps as well.

Bing Maps for C#, C++, and Visual Basic

Our ‘Native’ SDK is our first SDK specifically targeting application developers that takes advantage of the Windows Application Store environment. In this release, we provide the basic functionality to get maps integrated into your app. Specific to this version; we added support for pushpins/polylines/polygons, landmarks, venue maps, traffic and Synth view map style. You can still use the Bing Maps REST services to add additional functionality such as search and driving directions. And with our own client renderer, the SDK takes advantage of the Windows 8 platform to provide an amazingly smooth and responsive map experience on x86, x64 or ARM platforms.

New Keys and Terms of Use

Along with this release, we have created a new Bing Maps key type called ‘Windows Store app.’ You should use this key type when building new apps with the Bing Maps for Windows Store Apps API. You can get a new Bing Maps key over at our Bing Maps Account Center. If you created a ‘Windows Metro style app (BETA)’ key that was converted to a Windows Store app Trial key, your key will expire on Jan 15th, 2013 If you already have a non-trial ‘Windows Metro style app’ key, these will automatically be switched over to the new name. Keep in mind that all Trial Windows Store App Keys created after July 26^th 2012 are hardcoded and will expire after 90 days. If your application meets the requirements for limited free use (please read our governing TOU), you should get a Basic Windows Store App Key. Check out Chris Pendleton’s blog about the new Bing Maps key changes. While most applications using the Windows Store app environment will use the new basic key for Windows App Store an Enterprise key will be required if you’re building an app that is not available to consumers or doesn’t meet the requirements for limited free use. An Enterprise key also requires a valid separately executed Bing Maps agreement – please read through our TOU for more information.

Links

Below are some useful links to get more information and provide feedback:

• Bing Maps Account Center– http://www.bingmapsportal.com
• Bing Maps forum -- http://social.msdn.microsoft.com/Forums/en-US/bingmapswindows8/threads
• Feature voting site -- http://bingmapssdk.uservoice.com
• Windows app development -- http://msdn.microsoft.com/en-us/windows/apps
• JavaScript MSDN documentation -- http://msdn.microsoft.com/en-us/library/hh852186.aspx
• ‘Native’ MSDN documentation -- http://msdn.microsoft.com/en-us/library/hh855146.aspx

Jamie Lang
Senior Program Manager
Microsoft Corporation : Bing Map Controls

If you follow this blog regularly, there is a strong chance that you are familiar with Bing Maps and all the greatness it brings to the web. And, with Windows 8, you can add that same greatness directly into your applications using the Bing Maps Windows Store App controls. When developing with the Bing Maps Windows Store App control, you have the option of using JavaScript or Native code (C#, VB or C++). The Bing Maps Windows Store App JavaScript control is based on the Bing Maps V7 AJAX web control. This is an excellent control with a large array of features. In addition to this, there are a ton of resources from the Bing Maps V7 control that can be used with the Bing Maps Windows Store App JavaScript control. However, as close as these two map controls may be, there are some slight differences; so don’t assume you will have 100% parity between the two.

In this blog post, we are going to look at how to create a simple application by using the Bing Maps Windows Store App JavaScript control while using the location services available in Windows 8. In addition to this, we will also take a look at testing our app on another device that doesn’t have Visual Studios installed.

Setting up your development environment

To get started developing a Bing Maps Windows Store application you will need the following installed:

• Windows 8
• Visual Studios 2012 (Get the Express version)
• Bing Maps SDK for Windows Store Apps

You will also need a Bing Maps account and key. If you intend to create a non-trial application, you should create a Basic key for your Windows Store App and read the governing TOU that defines your usage limits.

• Bing Maps Account
• Bing Maps Key

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 BingMapsJSIntro and press OK.

A simple project will be created and contain a web page called default.html along with folders for JavaScript, CSS, and image files. The default.js file contains the logic for handing the different states of the application. Windows Store applications have three states: not running, running, and suspended. When the state changes, an event is fired, triggering the code in this file. We will not worry about handling the different states in this blog post, but it is good to take note of it as it will become useful later.

We could append the code we need for the map to this file but instead, we will keep things clean and create a separate JavaScript file for our code. To do this, right click on the js folder and select Add -> New Item. Create a new JavaScript file called bingMapsIntro.js. At this point, your Solution should look something like this:

Adding Bing Maps to the App

To get started, we will need to add a reference to the Bing Maps JavaScript library. First, right click on the References folder and press Add Reference. Select Windows -> Extensions, and then select Bing Maps for JavaScript. If you do not see this option, be sure to verify that you have installed the Bing Maps SDK for Windows 8 style apps.

Now, open the default.html file. You should see some references to all the CSS and JavaScript files already there. At this point, wherever we plan to put our Bing Maps code, we will need to add references to the Bing Maps SDK and the JavaScript file. We will also need to add a div for where we want the Bing Maps control to be loaded.

Next, we will need to add our logic to load the Bing Maps control. If you have used the Bing Maps V7 AJAX control before, you may already be familiar with modules. If not, modules are blocks of JavaScript code that can be used to extend the Bing Maps control by adding useful functionalities. A key benefit to using modules is that the modules fire an event when loaded. If you created your own module, you have a JavaScript file with your logic; at the end of the JavaScript file, be sure to trigger the module loaded event. So, why am I bringing this up now? Well, the Bing Maps control itself is a module which is different from what we are used to when using the AJAX control on the web. As a module, we will need to load it and create a callback function that will initialize the map. If we try to initialize the map before the module is loaded we will end up with errors. In addition, we also want to wait until the document is fully loaded before we initialize the map; otherwise, we risk trying to create the map on a div element that is not yet created which will also throw an error. Now this might sound a bit complex, but it is actually rather straight forward. Open the bingMapsIntro.js file and add the following code:

If you are not familiar with the last function, wrapped with brackets without a name, it is a common technique for limiting the scope of functions. By doing this, the initialize function is only made known to our event listener and therefore, not a global function. This is useful as we only need this function once.

If we run the application, we will end up with a Bing map that takes up the whole screen and looks like this.

Using Location Services

There are two ways to go about using the location services in Windows 8. The first method consists of using the Windows.Devices.Geolocation.Geolocator class and provides all the functionality needed to access the Location services on a Windows 8 device. This class has lots of features and options, but can be a bit more complex than needed.

The second method consists of using the GeoLocationProvider class, which is made available in the Bing Maps control. The benefit of using this class is that it really simplifies integration with the Location services and will also generate the accuracy circle on the map for us. We will use this approach for the sake of simplicity.

To start, we will open up the default.html file and add a checkbox to a floating div over the map to toggle the GPS (or Location services) feature. The following HTML can be added after the div for the map.

Next, we will need to open up the bingMapsIntro.js file and add a function called ToggleGPS. In this function, we will want to create an instance of the GeoLocationProvider class and then check to see if the checkbox has been checked or not. If it has been checked, we will want to call the getCurrentPosition method of our GeoLocationPorvider object and have a callback which adds a pushpin to the center of the returned location. The accuracy circle is drawn automatically and can be disabled through the options. If the checkbox is not checked, we will want to remove the accuracy circle and center pushpin. We will also want to cancel any outstanding requests to the GeoLocationProvider. To keep things clean, we will add an EntityCollection to the map. This is where we will add the center pushpin, versus adding the pushpin directly to the map. This will allow us to easily remove the center pushpin when we want it removed. Now we can add our ToggleGPS function and update the GetMap function in the bingMapsIntro.js file.

Before we get too far ahead, we need to add the Location services to the capabilities in the package manifest; otherwise, we won’t be able to get any location information from the users device. To do this, simply double click on the package.appxmanifest file and select the Capabilities tab at the top. Under the Capabilities section, check the Location option.

At this point, we are ready to test the application. If you run the application, in the top right hand corner, you will see the check box. When clicked, the map should zoom into your location and display a pushpin on your location and a circle of accuracy.

Testing the App on a Local Machine

If you are like me, your primary development computer probably doesn’t have a touch screen. Although, maybe you have access to a touch device that has Windows 8 installed to test your app. I just happen to have an Acer Iconia Tab W500 with Windows 8. I haven’t installed anything else on it (like visual studios), so this makes for a perfect environment for testing the application. Now, how to get our newly developed app on to our other device? Well, there are a couple of ways to do this and some more complex than others. A good blog post on this can be found here. Since I created the app, and I’m deploying it onto my own machine, I’m not too concerned at this moment about security and properly signing my application. I’ll save that for when I’m ready to share it with others or deploy to the Windows Store.

So, here is an easy way to test your app. Right click on the BingMapsJSIntro project and select Store -> Create App Packages. You will be prompted with a question, “Do you want to build packages to upload to the Windows Store?” - select No and press Next. On the next screen, you can add version numbers and select the architecture to run the app on. We will leave all this as it is and press the Create button. This will generate a package for us and will provide us with a link to the folder to the package. Copy the package onto a USB drive. Next, go to your test device and plug in the USB drive. Inside the AppPackages folder, you should see a folder that has the name of our app and a version number. In that folder, you should find a PowerShell file called Add-AppDevPackage. Right click, or touch and hold so that the context menu opens up. In the context menu, click on Run with PowerShell.

Just follow the prompts that come up on the screen. When it is done, you can go to your Start screen and at the end, see your application. Now, since we haven’t added an image for the icon, our app tile is grey and has a box with an x in it. We can worry about making it look nice later.

If you click on your app it should load up. You can press the GPS and traffic checkboxes to see it work. Keep in mind that a lot more testing will be needed if you plan to deploy application to the Windows Store. For more information, take a look at this blog post.

-Ricky

When using Bing Maps, you may find that you need to access a REST based web service from time to time. In Bing Maps there are many REST based services available that can be used to bring data into your app. The Bing Maps REST service provides functionalities such as Geocoding, Reverse Geocoding, Routing, Static Imagery, and Traffic Incident data. There is also the Bing Spatial Data Services that can be used to store your own location data and have it exposed as a REST based spatial service. We also provide NAVTEQ point of interest data through the Bing Spatial Data Services. Although integrating REST services into the Bing Maps JavaScript controls is fairly easy, there is a small change required when developing for the Windows Store App platform. In this blog post, we will walk through how to integrate the Bing Maps Traffic Incident REST service with the Bing Maps Windows Store App JavaScript control.

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. Then, select the Blank App template, call the application BingMapsREST_WinRTJS and press OK.

In an effort to keep things more cleanly, we are going to create a separate JavaScript file for our application. To do this, right click on the js folder and select Add -> New Item, and create a new JavaScript file called BingMapsREST.js.

At this point, your Solution should look something like this:

Next, you will want to add a reference to the Bing Maps JavaScript library. First, right click on the References folder and press Add Reference. Then, select Windows -> Extensions and then select Bing Maps for JavaScript. If you do not see this option, be sure to verify that you have installed the Bing Maps SDK for Windows 8 style apps.

Now, open up the default.html file and add references to the Bing Maps SDK along with a reference to our JavaScript file. The layout for our application will consist of a map and nothing more. The HTML for the default.html file should look like this:

Loading the Bing Maps Control

Next, we will add the functionality to load the Bing Maps control to the BingMapsREST.js file. To start, we are going to create five global variables: map, infobox, dataLayer, sessionKey and trafficTypes. The trafficTypes will be an array of string that has the names of the different types of traffic. The array will be set up so that the index of the array matches the trafficType value which is a number.  We will now create a function called GetMap which will load the Bing Maps control for us. In this function, we will also add an entity collection to the map for our data, an Infobox for displaying information, and generate a session key to be used with the Traffic REST service (making those calls non-billable).  Once the session key is created, we will attach a throttled event to the map which will fire when the map has finished moving. When this event is triggered, a request for traffic data in the current map view will be made. The GetMap function will be loaded after the Microsoft.Maps.Map module has completed loading. Your code should look like this:

Adding the Application Logic

When the user moves the map, an event will be triggered and call a function named MakePOIRequest. This function will generate a REST URL for querying the Traffic Incident service by bounding box. This URL will then be used to request data. Since this service is a Bing Maps service, it does not sit in the same domain as your application, and as such, we need to make a cross domain request. Making this request in a standard JavaScript application can be made by using the XMLHttpRequest object. When developing for the Windows Store App platform, we should use the WinRT.xhr class. This class wraps the XMLHttpRequest object and makes a call to it asynchronously. We can then add a Promise function (callback or ‘then’ function) which we will call POICallback. This callback function will process the response. The MakePOIRequest function looks like this:

When the service responds and the POICallback function is fired, we will clear the map and verify that the request was successful. If successful, we will take the response text and parse it into a JSON object. Once the response is in the form of a JSON object we can loop through the results and render the data on the map. Since the traffic data has different severity levels, we will use different colored pushpins to display the locations on the map (as shown in the table below).

Add these pushpins to the images folder of the project. Your project should now look like this:

We will also add a Title and Description property to the pushpins and add details for the incident in these fields. We will be able to retrieve these properties from the Infobox control. One of the properties of an incident is a date and time of the last time the incident information was updated. This is in the form of an OData date value. We will need to parse this date value into a nicely formatted date. Finally, as the pushpin is clicked, we will need to add the logic to display the infobox and fill the infobox with the Title and Description values that we added to the pushpin. Putting this all together, we end up with the following JavaScript code:

If you run the application you should see a bunch of different colored pushpins appear on the map. If nothing loads, you may be zoomed out too much, or there are no traffic incidents in the area you are viewing. Here is a screenshot of the application displaying traffic data for part of Europe and the infobox open for one of the incidents.

For information on Traffic data availability, check out the Bing Maps Traffic Coverage page in MSDN.

- Ricky

If you follow this blog regularly, there is a strong chance that you are familiar with Bing Maps and all the greatness it brings to the web. And, with Windows 8, you can add that same greatness directly into your applications using the Bing Maps SDK for Windows Store Apps. When developing with the Bing Maps SDK for Windows Store Apps you have the option of using JavaScript or Native code (C#, VB or C++). The Native version of the Bing Maps SDK for Windows Store Apps is a new control developed from the ground up for the Windows Store App platform. The native control offers a lot more performance benefits than the JavaScript control. If you have ever used the Bing Maps Silverlight, WPF or Windows Phone controls you will find a lot of similarities between the SDK’s, however, do not assume there is 100% parity between them

In this blog post, we are going to look at how to create a simple application using the C# Bing Maps Windows Store App Native control while using the location services available in Windows 8. If you are looking for more information on the JavaScript control take a look at the Getting Started with Bing Maps Windows Store App (JavaScript) blog post.

Setting up your development environment

To develop Bing Maps Windows Store applications you will need the following installed:

• · Windows 8
• · Visual Studios 2012 (Get the Express version)
• · Bing Maps SDK for Windows Store Apps

You will also need a Bing Maps account and key. If you intend to create a non-trial application, you should create a Basic key for your Windows Store App and read the governing TOU that defines your usage limits.

• · Bing Maps Account
• · Bing Maps Key

Setting up the project

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

A simple project will be created that contains an App.xaml and a MainPage.xaml file along with folders for Assets, CSS, and common style files. The App.xaml.cs file contains the logic for handing the different states of the application. Windows Store applications have three states: not running, running, and suspended. When the state changes, an event is fired, triggering the code in this file. We will not worry about handling the different states in this blog post, but it is good to take note of it as it will become useful later.

Adding Bing Maps to the App

To get started, we will need to add a reference to the Bing Maps SDK. First, right click on the References folder and press Add Reference. Select Windows -> Extensions, and then select Bing Maps for C#, C++ and Visual Basic. If you do not see this option, be sure to verify that you have installed the Bing Maps SDK for Windows Store apps. While you are here, you can also add a reference to the Microsoft Visual C++ Runtime Package as this is required by the Bing Maps SDK when developing using C# or Visual Basic.

You may notice a little yellow indicator on the references that you just added. Bing Maps SDK requires that you set the Active solution platform in Visual Studio to one of the following options:

• · C#, Visual Basic: ARM, x86 or x64
• · C++: ARM, Win32 or x64

To do this, right click on the Solution folder and select Properties. Then, go to Configuration Properties -> Configuration. Locate your project and under the Platform column and set the target platform. For the purpose of this blog post, I’m going to select x86. Press Ok and the yellow indicator should disappear from your references.

At this point your application should look something like this:

Now we can add a map to our application. To do this, open the MainPage.xaml file and add the Bing Maps SDK as a namespace at the top of the file. Now we can add a Map object to the Grid control and add our Bing Maps key to the credentials properties of the map. We will also give the map a name of MyMap.

If we run the application, we will end up with a Bing map that takes up the whole screen and looks like this.

Using Location Services

We can make use of the Location Services functionality in Window 8 by using the Windows.Devices.Geolocation.Geolocator class. We will use this class to get access the user’s location information. To start, we will open up the MainPage.xaml file and add a checkbox that sits on top of the map to toggle the GPS (or Location services) feature on and off. The XAML for this file should now look like this:

We can now begin to add the functionality behind the map. Open the MainPage.xaml.cs file and create two global variables called GpsPushpin and geolocator. In the constructor of the MainPage class we will initialize the GpsPushpin object and add it to the map. To begin, we will set the visibility of the GpsPushpin to collapsed. Your MainPage.xaml.cs file should look like this:

Next, we need to create a method called GPS_Checked which fires when the user clicks on the GPS checkbox. When this method is fired, we will need to verify if the checkbox is actually checked. If checked, we will need to verify that the geolocator object has been initialized. If it hasn’t, then create and initialize it. Once verified, add a position changed event to this object called geolocator_PositionChanged. If the checkbox has been unchecked we will need to remove the position changed event from the geolocator object (if it exists) and hide the GpsPushpin. This method looks like this:

Now we have to create the geolocator_PositionChanged event handler. This event will be called on a different thread than the map, so we will need to use a Dispatcher to access the same UI thread as the map. Once this is done, we can get the users location from the PositionChangedEventArgs object and use this to update the location of the GpsPushpin.At the same time, we can set the map view so that it is centered over this location. Finally, we need to make the GpsPushpin visible. This event handler will look like this:

Before we get too far ahead, we need to add the Location services to the capabilities in the package manifest; otherwise, we won’t be able to get any location information from the users device. To do this, simply double click on the Package.appxmanifest file and select the Capabilities tab at the top. Under the Capabilities section, check the Location option.

At this point, we are ready to test the application. If you run the application you will see the check box in the top right hand corner. In the first click, you will be asked to allow the application to share your location. After which, it will zoom and display a pushpin on your location.

Location Accuracy Circle

It is common to display a circle of accuracy in apps that display a user’s location In order to get this,we will need to create the circle. The PositionChangedEventArgs object has an accuracy property which gives an accuracy radius in meters. We can use this radius to make our accuracy circle by creating a User Control called GpsIcon that will mark our user’s location and display our accuracy circle. To do this, right click on the project and select Add -> New Item. Then, select User Control and give it a name of GpsIcon.xaml and press OK.

Start by opening the GpsIcon.xaml file. We are going to use several Ellipse objects to create the icon for the center of the circle as well as our accuracy circle. Since we will need to update our accuracy this point, we will give it a name of AccuracyCircle. Your XAML will look like this:

Now we can add the logic for this user control to the GpsIcon.xaml.cs file. In the constructor, we will want to take in a Map object. We will need a reference to the map so that we can update the accuracy circle based on the current zoom level. We will also need to create a method for setting the radius of the accuracy circle in meters. Finally, we will need a method to update the radius of the accuracy circle ellipse by converting the radius that is currently in meters to a pixel radius. Putting this all together, the code for the GpsIcon.xaml.cs file will look like this: