Skip to main content
RSS feed Subscribe to feed


How to Create a Map Mashup

The Map mashup in this tutorial has two components: the Web Player and the Virtual Earth map. The user may hide the Web Player or the map via two buttons at the top of the page.

Examples folder


When the user makes markings in the analysis, a route between the marked cities is calculated. A popup is displayed until the route is calculated. A pushpin is added for each marked city. When the user clicks on a pushpin, the Web Player changes to a page with a more detailed visualization.

Background Information
  • Installing and Configuring the JavaScript API
    Before the Web Player JavaScript API can be used to create mashups, the Web Player must be installed and configured to enable the JavaScript API.
  • Mashup Development with Multiple Servers
    JavaScript in mashup calls from the same server as the Web Player does not compromise domain security. If the mashup and the Web Player reside on different servers, attention to domain attributes is essential.
  • From Spotfire 3.0, download the source code for this tutorial:
    It contains the file Demo3.htm example code. Place the file with the other mashup examples available in the TIBCO Spotfire 3.0 SDK: Examples\Extensions\SpotfireDeveloper.WebAutomationExample\
  • For Spotfire 2.1 and 2.2, download the source code for this tutorial:
    It contains the file Demo3.htm example code. Place the file with the other mashup examples available in the TIBCO Spotfire 2.x SDK: Examples\Extensions\SpotfireDeveloper.WebAutomationExample\


The source is divided into functional sections:

  • Constants define server URL, analysis path, and so forth.
  • Fields & Properties define variables used throughout the code.
  • DOM Event Handlers handle the web page when loading and re-position the HTML components when resizing.
  • Virtual Earth Functions manipulate the map.
  • Web Player Callbacks are run during interaction with the Web Player.
  • Helper Functions simplify updates of the HTML components.

The window.onload() event handler is called when the page is loaded. It initializes the Virtual Earth map, creates the Web Player, and registers event handlers for it. A helper JavaScript class is also initialized, enabling the show and hide both of services via sliding windows.

The window.onresize() event handler dynamically changes the size of the HTML components if the window is resized.

The Application.onOpened() event handler is called when the Web Player has finished loading. The correct start page in the analysis is set and an event handler for marking changes is registered.

The markingCallback(args), the event handler for Web Player markings, is called when markings are made in the planning pages: Brand A Planning, Brand B Planning". The callback extracts the marked locations and sends them as a list to Virtual Earth.

Virtual Earth calculates the route between the different locations, displays them on the map, and runs a callback with information about the route. In the callback, a pushpin is added to the location of each stop in the route via the helper function addPushpin() along with the corresponding marking data.

The loadMap() helper function registers a global event for mouse clicks in the map. When a pushpin is clicked, the mapClickCallback(e) event handler first checks if the clicked object is a valid pushpin, then sets the marking to the value of the pushpin, and finally changes page to Account Summary with extended visualizations of the marking.