53 lines
2.0 KiB
HTML
53 lines
2.0 KiB
HTML
<!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="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
|
|
<script type="text/javascript" src="https://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 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>
|
|
|