Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/README.md

Last active September 14, 2016 09:00
Show Gist options
  • Save jsanz/721f346e0b845857cc4f2c468b86d3cb to your computer and use it in GitHub Desktop.
Save jsanz/721f346e0b845857cc4f2c468b86d3cb to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript: CartoDB in Bing SDK
Raw
README.md

Using CartoDB tiles and features inside a simple Bing Maps application

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bing Maps SDK with CartoDB tiles</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
position:relative;
}
#map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<!-- layer SQL -->
<script type="text/sql" id="sql">
SELECT * FROM ne_10m_populated_places_simple
</script>
<!-- layer CartoCSS style -->
<style type="text/cartocss" id="cartocss">
#ne_10m_populated_places_simple{
marker-fill-opacity: 0.6;
marker-line-color: #FFF;
marker-line-width: 0;
marker-line-opacity: 1;
marker-placement: point;
marker-multi-policy: largest;
marker-type: ellipse;
marker-fill: #FFCC00;
marker-allow-overlap: true;
marker-clip: false;
marker-comp-op: multiply;
}
</style>
</head>
<body>
<div id='myMap'></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.core.js"></script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
<script type='text/javascript'>
function loadMapScenario() {
// Set a map
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'ArVGTwXaB6QlXN1XMCGlIgjnXcOGRUhHUw6_gIgU2k62v9D8YS8Imk_97jPzxW73',
center: new Microsoft.Maps.Location(30, -90),
zoom: 3,
mapTypeId: Microsoft.Maps.MapTypeId.aerial
});
// Define a CartoDB Maps API source
var cartoDBLayerSource = {
user_name: 'jsanzacademy1',
type: 'cartodb',
sublayers: [{
sql: $('#sql').html(),
cartocss: $('#cartocss').html()
}]
};
// Configure Tiles
cartodb.Tiles.getTiles(cartoDBLayerSource, function(tilesUrl, error) {
if (tilesUrl == null) {
console.log("error: ", error.errors.join('\n'));
return;
}
// Custom tiles of Hurricane Katrina for zoom level 1-10
var cartoDBTileSource = new Microsoft.Maps.TileSource({
uriConstructor: function getTilePath(tile){
var subdomains = ['a','b','c','d'];
var randSubdomain = subdomains[Math.floor(Math.random() * subdomains.length)];
return tilesUrl.tiles[0]
.replace('{s}',randSubdomain)
.replace('{z}',tile.zoom)
.replace('{x}',tile.x)
.replace('{y}',tile.y);
}
});
var cartoDBTileLayer = new Microsoft.Maps.TileLayer({
mercator: cartoDBTileSource,
});
map.layers.insert(cartoDBTileLayer);
// Configure vector points
var vectorLayer = new Microsoft.Maps.Layer();
var SQL = $('#sql').html() + ' ORDER BY pop_max DESC LIMIT 100';
$.getJSON( 'http://jsanzacademy1.cartodb.com/api/v2/sql?format=geojson&q='+SQL, function( data ) {
$.each(data.features,function(key,feature){
// Retrieve the latitude and longitude values- normalize the longitude value
var latVal = parseInt(feature.geometry.coordinates[1]);
var longVal = Microsoft.Maps.Location.normalizeLongitude(parseInt(feature.geometry.coordinates[0]));
var location = new Microsoft.Maps.Location(latVal, longVal);
var pinInfobox = new Microsoft.Maps.Infobox(location,{
width:300,
height: 100,
title: feature.properties.adm1name,
description: "Population: " + feature.properties.pop_max,
showPointer: true,
visible: false
});
var pushpin = new Microsoft.Maps.Pushpin(location,{infobox: pinInfobox });
// Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(pushpin, 'click', function(e) {
pinInfobox.setOptions({ visible:true });
});
// Hide the infobox when the map is moved.
Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
pinInfobox.setOptions({ visible: false });
});
vectorLayer.add(pushpin);
});
map.layers.insert(vectorLayer);
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment