Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
bing maps in cartodb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<title>Bing Maps + CartoDB.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
html, body, #myMap{
height: 100%;
padding: 0;
margin: 0;
<script src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var map = null;
function getMap()
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
type: 'cartodb',
user_name: 'examples',
sublayers: [{
sql: 'select * from ne_10m_populated_p_2',
cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
}, function(tileTemplate) {
var url = tileTemplate.tiles[0].replace('{s}', 'a');
url = url.replace('{z}/{x}/{y}', '{quadkey}')
var options = {
uriConstructor: function(tile, zoom) {
var i = tile.x + tile.y;
return tileTemplate.tiles[0]
.replace('{s}', 'abcd'[i%3])
.replace('{z}', tile.levelOfDetail)
.replace('{x}', tile.x)
.replace('{y}', tile.y)
width: 256,
height: 256
var tileSource = new Microsoft.Maps.TileSource(options);
var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource});
<body onload="getMap();">
<div id='myMap' style="position:relative; width:100%; height:100%;"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.