The Bing Maps Modular framework allows you to create reusable blocks of code that ties into Bing Maps. This saves on development time and is a great way to improve code quality by re-using proven and tested modules.

Official MSDN documentation on how to create a modules can be found here: http://msdn.microsoft.com/en-us/library/hh125836.aspx

The basic overview of how to create a module

  1. Create a single JavaScript file that contains all the code for your module.
  2. Add a call to the Bing Maps moduleLoaded event to the end of the JavaScript file containing the code to for your module, passing in the name of your module:
    i.e Microsoft.Maps.moduleLoaded('MyModule');
  3. Register your module by adding a reference to where your modular plugin JavaScript file is located. This is often done right after the map is loaded.
    i.e. Microsoft.Maps.registerModule("MyModule", "http://example.com/mymodule.js");
  4. Load your module by calling the loadModule method in Bing Maps and passing in a callback method that will be fired when the module has been loaded. This is often done right after registering is done but can be delayed until the module is needed.
    i.e. Microsoft.Maps.loadModule("MyModule", { callback: myModuleLoaded });

Sample code of a basic module (i.e. mymodule.js)

var MyModule = function(map){
    var localVariable = "";
    
    //Constructor
    function init(){
        
    }

    //Private Method
    function _doSomething(){
    }
    
    //Public method
    this.DoSomething = function(){
    };
    
    init();
};
Microsoft.Maps.moduleLoaded('MyModule');

Sample code of how to register and load a module (i.e. index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         var map;

         function myModuleLoaded()
         {
            //call code that uses your module.
         }

         function GetMap()
         {
             // Initialize the map
             var options = {credentials: "Bing Maps Key"};
             map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), options);

             // Register and load the arrow module
             Microsoft.Maps.registerModule("MyModule", "http://example.com/mymodule.js");
             Microsoft.Maps.loadModule("MyModule", { callback: myModuleLoaded });
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative;width:400px;height:400px;"></div>       
   </body>
</html>

Tips & Tricks

  • Try and make the module fairly self contained. References to external open source JavaScript libraries should be limited to jQuery. This will make it easy for others to use your module without the need to verifying the licensing restrictions of 3rd party libraries.
  • References to jQuery should be made to the CDN hosted versions (i.e. http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js). Local copies of jQuery are not recommended as it adds unneeded size to the download.
  • Passing a reference of the map control when initializing an instance of a module is a good approach if direct access to the map is needed. This is better than trying to reference a global variable which may differ in naming between applications.
  • If your module requires a CSS styles create a style sheet just for your module and load it in dynamically when your module is loaded. This will mean that your CSS file only gets loaded when your module in loaded.

Last edited Aug 18, 2011 at 4:56 PM by rbrundritt, version 17

Comments

No comments yet.