Bing Maps Configuration Module

In many real world projects one challenge is to have a generic map. In order to accomplish that I often used a configuration file to configure the map with start parameters. One example of this is Geo365, where each SharePoint site should be able to have their own map.

In an organization, for example one project might be on a completely different place than another project. So we need to be able to configure that in some way. So lets introduce a small, simple but useful module for Bing Maps. The Configuration Module.

So far you can specify the ViewOptions parameters in the configuration file.

The configuration file is a JSON file and pretty straight forward. For example:

{

  "bounds": {
    "center": {
      "latitude": 62.5,
      "longitude": 17.2
    },
    "width": 1,
    "height": 1
  },

  "center": {
    "latitude": 62.5,
    "longitude": 17.2
  },

  "centerOffset": {
    "point": {
      "x": 1000,
      "y": 1000
    }
  },

  "credentials": "{YOUR BING MAPS KEY HERE}",

  "heading": 45,

  "labelOverlay": "hidden",

  "mapTypeId": "aerial",

  "padding": 100,

  "zoom": 2
}

When the configuration file is in place you simple load the configuration and supply it as a parameter to the Bing Maps Map class such as:

function loadMap() {
            var elem = document.querySelector("#map");
            Microsoft.Maps.registerModule("ConfigurationModule", "scripts/ConfigurationModule.js");
            Microsoft.Maps.loadModule("ConfigurationModule", {
                callback: function () {
                    getConfig(function (jsonConfig) {
                        var config = ConfigurationModule.getConfig(jsonConfig);
                        new Microsoft.Maps.Map(elem, config);
                    })
                }
            });
        }

        var getConfig = function (callback) {
            var request = new XMLHttpRequest();
            request.addEventListener("load", function () {
                var config = JSON.parse(this.responseText);
                callback(config);
            });
            request.open("GET", "configuration.json");
            request.send();
        };

You will find the module among the other Bing Maps Modules on Codeplex.