Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
bing maps in cartodb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps + CartoDB.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
html, body, #myMap{
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.core.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
cartodb.Tiles.getTiles({
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});
map.entities.push(tilelayer);
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:100%; height:100%;"></div>
</body>
</html>
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.