Obtaining a Bing Maps developer key

The first thing you need before connecting to the Bing Maps servers is a Bing Maps developer key. The Bing Maps portal (http://www.bingmapsportal.com) allows you to create a Bing Maps account and one or more Bing Maps keys.

To request a Bing Maps key from Microsoft:

  1. Go to http://www.bingmapsportal.com.

  2. Sign in with your Microsoft account, or create one.

  3. Click "Create or view keys".

  4. Choose "Evaluation / Trial" and click Submit.
    The key is created.

Note that additional terms may apply for deployment. For more information on Bing Maps licensing, see the Licensing information guide.

Visualizing Bing Maps data

The Bing Maps protocol requires the retrieval of metadata containing the URLs of the services that provide the imagery. Due to cross-domain restrictions, the LuciadRIA samples use a bingproxy sample service that forwards our metadata requests to the official service.

An additional advantage of using a proxy is that you can configure the required Bing key on the server side, and avoid exposing it to your users. You can configure the key either through the environment variable LUCIAD_RIA_BING_KEY, or through an initialization parameter in the servlet web.xml with the name bing.key.

The servlet is available as sample code. You can have a look at com.luciad.samples.webservices.bingproxy.BingProxyServlet in the samples source code folder, to see the available options, or to adapt it to your needs.

If the bingproxy servlet is running, you can use it to retrieve the metadata to set up a BingMapsTileSetModel. This model can be visualized in a regular RasterTileSetLayer, as illustrated below:

Program: Creating a Bing Maps raster layer using the sample BingProxyServlet (from samples/dataformats/BingMapsDataLoader.js)
var layer = request("/sampleservices/bingproxy/" + type, {
  handleAs: "json"
}).then(function(data) {
  var resource;
  if (data.resourceSets[0] && data.resourceSets[0].resources[0]) {
    resource = data.resourceSets[0].resources[0];
    resource.brandLogoUri = data.brandLogoUri;
  } else {
    resource = data;
  }
  return new RasterTileSetLayer(new BingMapsTileSetModel(resource), {
    label: type + " (Bing)",
    layerType: LayerType.BASE,
    id: "Bing"
  });
}).catch(function() {
  throw new Error(
    "Something went wrong while contacting the Bing proxy. Did you configure it with a Bing Maps key?"
  );
});

Another aspect of using Bing Maps background data is that you are required to show the attribution information of the imagery.

The LuciadRIA sample code contain an AttributionComponent class to handle this. The program assumes that a div element with the ID attribution is available in the HTML of the web page.

Please refer to the sample samples/model/tileset/Bing for more details.

Program: Including Bing Maps attribution information using the sample class AttributionComponent (from samples/dataformats/main.js)
new AttributionComponent(map, {
  domId: "attribution"
});