Let the madness begin on Bing Maps

March Madness kicks off this week with the first round of games starting in a few days. Along with Bing’s bracket builder, the Bing Maps team is excited to share new imagery of the stadiums that will host both the NCAA Division 1 Men’s and Women’s games across the US. In this blog post we will see how we created a visual of where these teams are from and where the games will be played with the help of Bing Maps. You can view the completed maps here:

• • • • • Men’s Tournament Map: https://binged.it/1CwQz0p
        • Women’s Tournament Map: https://binged.it/1CwR4aH

Gathering data

Gathering data before the March Madness tournament begins can be a challenge because the list of teams is not announced until two days before the tournament starts. Since I’m writing this post before the announcements are made and I don’t have a crystal ball, I’ve collected information on all the possible teams. There are 351 men’s and 348 women’s basketball teams who are separated into 23 different conferences and compete in Division 1 of the NCAA. The primary information I collected was the school name of each team along with the conference they play in, the city and state of the school, and the school’s nickname. I then geocoded each school using the city and state information. I’ve also collected some basic information about the difference venues that will be used to play these games.

By managing this data in Excel, I am able to easily add a column that indicates whether a team is playing and quickly filter the data so that I can focus on just the relevant teams. You can access this spreadsheet here. I’ve selected random teams as playing, for testing purposes.

Importing into the Bing Maps consumer site

When signed into Bing Maps with your Microsoft ID, you will see a link to a tool called “My Places”. This tool allows you to easily add pushpins and draw shapes on the map as a layer which you can then easily share with others. The “My places” link is located in the top left corner of Bing Maps as you can see here:

Screenshot: My places link

When you click this link you will see a panel that lists any existing layers you have created and provides options to create new layers.

Screenshot: “My places” layer panel

In addition to being able to manually create layers by drawing on the map, you can also create layers by importing common spatial file formats such as KML, GPX, and GeoRSS. With this in mind, we will use the KML file format to import our data from Excel to “My Places”. We will use the CONCATENATE function in Excel to combine our data with the XML markup used to represent a pushpin in KML. Here is the Excel function I used:

 =CONCATENATE("<Placemark><name>",A2,"</name><description>Nickname: ",D2," - Conference: ",B2,"</description><Style><IconStyle><Icon><href>https://rbrundritt.azurewebsites.net/Resources/MarchMadness/basketball.png</href></Icon></IconStyle></Style><Point><coordinates>",F2,",",E2,",0</coordinates></Point></Placemark>")

This will then generate XML that looks like this:

 <Placemark>
  <name>Duke University</name>
  <description>Nickname: Blue Devils - Conference: Atlantic Coast</description>
  <Style>
    <IconStyle>
      <Icon>
 <href>https://rbrundritt.azurewebsites.net/Resources/MarchMadness/basketball.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Point>
    <coordinates>-78.89644,35.99542,0</coordinates>
  </Point>
</Placemark>

Looking at this XML, we can see the name and description values that will appear in the infobox and in the left side panel of Bing Maps when viewing this layer. We also see that we are specifying a URL to an image that will be used to display a custom icon on the map for this location. Finally, we see the coordinates being specified for where this team should appear on the map. Note that in KML the convention for a coordinate string is “longitude,latitude,altitude”.

We can then wrap all the Placemark values for our layer with some XML for a KML document like this:

 <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="https://www.opengis.net/kml/2.2" xmlns:atom="https://www.w3.org/2005/Atom">
  <Document>
    <name>2015 NCAA Div I Men's Basketball Tournament</name>
    <description>A map of all teams competing in the 2015 NCAA Div I Men's Basketball Tournament and the venues where the games will be played.</description>

    <!-- Add team and venue placemarks here -->
  </Document>
</kml>

Once we have our KML file created, we can import it as a layer to “My places” by pressing the import button.

Screenshot: Importing KML into “My places”

It is worth pointing out that you can either import this data as a new layer or add it to an existing one. This is useful, especially in situations like this. I can upload an initial list that may only have the venue location information and then later, once the teams have been selected, I can append that information to the layer.

Once the layer is imported, you will see all the locations appear on the map and a list of the locations inside the “My places” panel.

Screenshot: Layer imported into “My places”

Next, if you want to share your layer with others you will need to do the following. Click on Actions -> See properties, then check the option to turn on sharing, and then press Save.

Screenshot: Properties panel

Next go to Actions -> Email. This will generate an email that has a link to your map layer. You can pass this around to show others your map. If you view this map you will see that the list of locations shows up in the left side panel rather than in the “My places” panel.

Screenshot: The finished map

Exploring the Teams and Venues

Now that the map layer is created, we can dive into the data and explore it. The final championship games for the Men’s tournament, also known as the Final Four, will be played at Lucas Oil Stadium in Indianapolis, Indiana. Jump into the street side imagery and see the outside of the stadium as if you were actually there.

Screenshot: Street side imagery of Lucas Oil Stadium

For a view from outside the three-point line, take a look at the Birds eye imagery.

Screenshot: Birds eye imagery of Lucas Oil Stadium

And for a slam dunk, check out the stadiums in 3D using the Bing Maps Preview app on Windows 8.

Screenshot: 3D Bing Maps Preview app of Lucas Oil Stadium

- Ricky Brundritt, Bing Maps Program Manager