C1Maps Quick Start

The C1Maps Web Part Quick Start shows you how to create a map that indicates the location of 30 universities based on their address. When the location marker for the university is clicked on the map, a picture of the campus is displayed. Hovering over the location marker will display a tooltip with the name of the university.

This Quick Start uses the Universities list. If you have not created this list, see Quick Start for instructions.

How it works:

The Universities List contains university names (the Institution column), street addresses, state, affiliations, rank by endowments, and photo URLs. We will only use the institution, address, and photo data in this example.

• The Web Part tells Bing Maps to use the addresses in the Universities list to indicate the location of each university. Bing Maps Geocoding can use addresses (as well as other data, like State) to pinpoint locations on a map.
• The Web Part pulls the campus photo from the URL in the Universities list. It also pulls the name of the university from the list to use as a tooltip.
• The Web Part sets the type of Bing Map (Road, Aerial, or Hybrid), the longitude, latitude, and zoom of the coordinates that will be displayed by default. (In this case, the map will be zoomed in to the continental USA.)

To create an interactive Map

1. Add the C1Maps Web Part to the page. (See Adding a Web Part to a Page.)
2. Open the On-Board Designer. (See Using the On-Board Designer.)
3. Click the Data Source tab.
   • Choose the "Universities" List. Click OK.  

      

4. Click the Geocode tab. Set the following:
   • Service Provider = Bing Maps. Enter your Authentication Key.
   • Choose the dropdown next to Address and select Required. Move this field to the top of the list with the arrow buttons. Click OK. 

     If you don't have a Bing Maps license, you can sign up for a free developer license here: http://www.bingmapsportal.com/.

      

5. Click the Maps tab. Set the following and click OK. This specifies the coordinates we would like to display (the continental USA):

   • Map Source = BingMapsRoad

   • Longitude = -96.635742

   • Latitude = 39.571822

   • Zoom Factor = 3.0

6. Click the Annotations tab. Set the following and click OK. This sets the marker (orange ball) hover tooltip text (the information in the Institution column), as well as the information displayed when the orange ball is clicked (an image stored in the Photo column):

   • Annotation Type = Image

   • Annotation URL Column = Photo

   • ToolTip Text Column = Institution

7. Click the Save Web Part button.

The result:

• The map will now be zoomed into the continental USA, and an orange ball will be displayed at the address of each university.
• Hovering over any orange ball will display a tooltip containing the name of each university.
• Clicking on any orange ball will display a photo of that university. 
• You can zoom in and navigate the map.