Creating Custom Modules

Article
05/22/2024

Note

Bing Maps Web Control SDK retirement

Bing Maps Web Control SDK is deprecated and will be retired. Free (Basic) account customers can continue to use Bing Maps Web Control SDK until June 30th, 2025. Enterprise account customers can continue to use Bing Maps Web Control SDK until June 30th, 2028. To avoid service disruptions, all implementations using Bing Maps Web Control SDK will need to be updated to use Azure Maps Web SDK by the retirement date that applies to your Bing Maps for Enterprise account type. For detailed migration guidance, see Migrate from Bing Maps Web Control SDK and Migrate Bing Maps Enterprise applications to Azure Maps with GitHub Copilot.

Azure Maps is Microsoft's next-generation maps and geospatial services for developers. Azure Maps has many of the same features as Bing Maps for Enterprise, and more. To get started with Azure Maps, create a free Azure subscription and an Azure Maps account. For more information about azure Maps, see Azure Maps Documentation. For migration guidance, see Bing Maps Migration Overview.

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 moduleLoaded event 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 loadModule method 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);

Example

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">
        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>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Share via

Creating Custom Modules

Example

Additional resources