Creating Custom Modules
The Bing Maps Modular framework allows you to create reusable blocks of code that tie into Bing Maps. This saves on development time and is a great way to improve code quality by re-using proven and tested modules.
The basic overview of how to create a module:
- Create a single JavaScript file that contains all the code for your module.
- Add a call to the Bing Maps
moduleLoadedevent to the end of the JavaScript file containing the code for your module, passing in the name of your module. For example:
Microsoft.Maps.moduleLoaded('MyModule');
- 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. For example:
Microsoft.Maps.registerModule('MyModule', 'http://example.com/MyModule.js');
- Load your module by calling the
loadModulemethod in Bing Maps and passing in a callback method that will be fired when the module has been loaded. For example:
Microsoft.Maps.loadModule('MyModule', myModuleLoaded);
The following example shows a common way of structuring a custom module.
var MyModule = function (map) {
var localVariable = "";
//Constructor
function init() {
}
//Private Method
function _doSomething() {
}
//Public method
this.DoSomething = function () {
};
init();
};
//Call the Module Loaded method.
Microsoft.Maps.moduleLoaded('MyModule');
If this module was stored saved in a folder called js and a file called MyModule.js, the following code can register and load it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer></script>
<script type="text/javascript">
var map;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: ‘Your Bing Maps Key’
});
//Register code to our Custom Module
Microsoft.Maps.registerModule('MyModule', 'js/MyModule.js');
//Load the arrow module
Microsoft.Maps.loadModule('MyModule', function(){
//MyModule is loaded. Do post load tasks here.
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
Tip: The Bing Maps V7 SDK also supported custom modules. Several developers created useful modules and made them available through the Bing Maps V7 Module project on CodePlex. This is a great place to see how other custom modules have been created.