Author: Ricky Brundritt

Category: Layout

Module Size: 6kb (minified 2kb)

Dependencies: d3.js

Relies on SVG: Supported browsers


This module allows you to easily create a layer in Bing Maps that uses d3.js for rendering. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. This allows you to customize how the data is rendered a lot more, while making it easy to project the data correctly on top of the map.

Live Demos


How to implement:

var map, d3MapTools, d3Layer;

function getMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'YOUR_BING_MAPS_KEY'

//Register and load the D3 Overlay Module
Microsoft.Maps.registerModule("D3OverlayModule", "scripts/D3OverlayManager.js");
Microsoft.Maps.loadModule("D3OverlayModule", {
callback: loadD3Layer

function loadD3Layer() {
//Create an instance of the D3 Overlay Manager
d3MapTools = new D3OverlayManager(map);

//Create a data layer onto the map.
d3Layer = d3MapTools.addLayer({
loaded: function (svg, projection) {

//Add code for rendering data using d3


//Optionally you can remove a layer from the map.
function removeD3Layer(){

Last edited Jan 27, 2015 at 10:07 PM by rbrundritt, version 2


No comments yet.