• Home

Insert scripted third party web content

Contents[Hide]

1. Overview

This article will show how to insert scripted third party web content like Bing Maps on a single dashboard and pass it data, when adding a new type of control to the toolbar is not wanted. For reusable controls that users can find in the toolbar, see the article: Create a custom control.

This sample will show how to integrate a Bing map onto a dashboard. This will be done using the Bing Maps API, a metric set, and an HTML label control. The metric set will hold the latitude and longitude values we wish to display on a map. The HTML label control will be used to place a div element that will be used to render the map itself.

2. Creating the Data

To create the data necessary do the following:

 

Tip
This is just a small example of creating a metric set, for more information on the options available when creating a metric set, see the Create a metric set and add a filter article.

3. Integrating the external web content

3.1. Create the dashboard

    • From the main menu on the home screen, click New, and then click Dashboard.

3.2. Create a placeholder for the Bing Map

To create the placeholder for the Bing Map do the following:

3.3. Add a Loading script

In the dashboard’s Loading event, add the following script:

    // Add the Bing Map Scripts
var tag = document.createElement('script');
tag.setAttribute('type', 'text/javascript');
tag.setAttribute('src', 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0');
// Wait for the scripts to load.
tag.onload = function () {
    //*********************
    /* Required Input */
    var placeholderElement = document.getElementById('bingMapContainer');  // This is the element defined in the html label.
    var latitudeIndex = 0; // The index of your latitude in the metric set
    var longitudeIndex = 1; // The index of your longitude in the metric set
    var initialZoomLevel = 9;  // The default zoom level of the map 1-10 (out>in)
    // Describes the visual used as a placeholder for the symbol
    var pushpinOptions = { width: null, height: null, htmlContent: "" };
    //*********************
    var metricSetId = '3f65707b-bdeb-4e13-8067-d91084416c9e';
    
    // Request data from a metric set by its ID:
    var request = new dundas.data.Request({ objectId: metricSetId });
    // Do not limit the number of rows by paging:
    request.pagingOptions.pagingKind = dundas.data.PagingKind.NONE;
    // Get the data retrieval service
    var dataRetrievalService = this.getService("DataRetrievalService");
    // Make this aysnc
    var dataPromise = dataRetrievalService.getData(request);
    // Used to show loading animation over the bing map during the data request
    var viewService = this.getService("ViewService");
    viewService.showLoadingRestCall(dataPromise, { "element": placeholderElement });
    // On data retrieval successful
    dataPromise.done(function (results) {
        //add the bing key here
        var bingKey = 'YourBingKey';
        var mapOptions =
          {
              credentials: bingKey,     
              mapTypeId: Microsoft.Maps.MapTypeId.road,
              showScalebar: true,
              showDashboard: false,
              enableSearchLogo: false,
              disableKeyboardInput: false,
              disableMouseInput: false,
              disablePanning: false,
              disableTouchInput: false,
              disableUserInput: false,
              disableZooming: false
          }
        var lat = results[0].cellset.cells[latitudeIndex];
        var long = results[0].cellset.cells[longitudeIndex];
        // initialize the map
        if (window.map == null) {
            window.map = new Microsoft.Maps.Map(placeholderElement, mapOptions);
        }
        // clear and existing entities
        window.map.entities.clear();
        // Create an array of locations (so that we can later calculate the center point)
        var locations = [];
        // Iterate the data that is returned
        for (i = 0; i < lat.length; i++) {
            // collect the points so that we can later calculate the center point
            locations.push(new Microsoft.Maps.Location(lat[i].value, long[i].value));
            // add the pushpin to the map
            var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat[i].value, long[i].value), pushpinOptions);
            window.map.entities.push(pushpin);
        }
        // Calculate the center point of the map and the zoom level
        var r = Microsoft.Maps.LocationRect.fromLocations(locations);
        window.map.setView({ zoom: initialZoomLevel, center: r.center })
        // Signal operation complete (for async)
        e.deferred.resolve();
    });
};
// Add the script tag.
document.head.appendChild(tag);

Tip
See the dundas.data.Request Class for the complete list of data request options.

The important part of this script that needs to be changed is:

// Place the metric set ID from Creating the Data portion of this sample.
var metricSetId = '3f65707b-bdeb-4e13-8067-d91084416c9e';

// ...

//add the bing key here
var bingKey = 'YourBingKey';
      {articlenote title="Important"|text="You will need to set up an account with Bing Maps and create a key. As part of the key setup you must associate each key with an application. More information on creating a key can be found here:

https://www.bingmapsportal.com/

      ."|type="important"}

Once your design is complete, view and refresh the dashboard. The html label div tag placeholder on the dashboard should be integrated with the Bing Map.

4. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri