Embed Yahoo Maps

This purpose of this document is to demonstrate how to embed Yahoo! Maps in IBM Cognos 8 reports.

In IBM Cognos 8 reports, Yahoo! Maps can be embedded and scripted using the JavaScript programming language. The Yahoo! Maps AJAX API allows a report developer to add Yahoo! Maps to their reports using DHTML and JavaScript.

Please note that an application ID is required to use the Yahoo! Maps AJAX API from within any application. This ID should be generated and included when calling the Yahoo! Maps AJAX API.

This document will go over some of the Object calls available in the AJAX API but will not go into full detail. For a complete reference consult the Yahoo! Developers pages.

Limitations

The Yahoo! AJAX Maps API is limited to 50,000 queries per IP per day and is only available for non-commercial use. See the Yahoo! Terms of Use for more information.

Introduction to the Yahoo! Maps AJAX API

1. To use the Yahoo! Maps an API needs to be imported. This can be done for the AJAX API as follows:
   
   <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=YourAppID"></script>
   
2. Replace “YouAppID� with the Application ID you acquired from the URI referenced in the introduction. Without a valid application ID the provided sample report will not function correctly.
   
3. Now that the API is available for us to use, create a map Object place it into a container.
   
   <div id="mapContainer"></div>
   <script type="text/javascript">
   // Create a map object
   var map = new YMap(document.getElementById('mapContainer'));
   map.setMapType(YAHOO_MAP_HYB);
   </script>
   
   This example shows how to create the YMap Object and place it into the <div> with ID mapContainer. It also sets the display type of the map to Hybrid.
   
4. Add control objects using:
   
   <script type="text/javascript">
   // Add Map controls to the map
   map.addTypeControl();
   map.addZoomLong();
   map.addPanControl();
   </script>
   
   The addTypeControl method allows the end user to control the display type of the map whereas the addZoomLong controls the Slide Zoom capability. The addPanControl brings in the ability to pan the map.

Creating Location Markers

Create an YMarker object at the location you want to place the marker on the map.

Place the marker on the map using the addOverlay method:

<script type=�text/javascript�>
var marker = new YMarker(location,myImage);
marker.addAutoExpand(swtext);
YEvent.Capture(marker,EventsList.MouseClick,
function() { marker.openSmartWindow(swtext) });
map.addOverlay(marker);
</script>

Markers can have simple labels, Smart Windows, or both. A Smart Window is a small balloon that opens when the user clicks on the marker. Any values from the report can be passed inside the Smart Window. This provides the option of passing any data item values from the Query to be displayed in the Smart Window. This is done via the addAutoExpand method illustrated above.

Zoom In!

Specifying the map location is achieved by calling the drawZoomAndCenter method. This method accepts a location to centre on and a zoom depth. Note that the location can be a String representation of the location address or even the longitude and latitude coordinates.

<script type=�text/javascript�>
map.drawZoomAndCenter(location,15);
</script>

Sample report

Here are some screenshots of the sample report provided with this document. This report has been tested on IBM Cognos 8.4 with Internet Explorer 6/7 and Mozilla Firefox 3.