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/47c0c626126c6f4befdbe1a60c8d6215 to your computer and use it in GitHub Desktop.
Save jsanz/47c0c626126c6f4befdbe1a60c8d6215 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript: Bing on CartoDB
Raw
README.md

Testing Bing basemaps with Leaflet/CartoDB

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Training | custom infowindow | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-plugins/1.6.1/layer/tile/Bing.js"></script>
<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.9;
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="map"></div>
<script>
(function () {
'use strict';
$(document).ready(function(){
var sublayer
var map = L.map('map', {
zoomControl: true,
center: [40.418709, -3.703277],
zoom: 3
});
// Add the Bing Layer
// for all possible values and explanations see "Template Parameters" in https://msdn.microsoft.com/en-us/library/ff701716.aspx
var imagerySet = "Aerial"; // AerialWithLabels | Birdseye | BirdseyeWithLabels | Road
var bingLayer = new L.BingLayer('ArVGTwXaB6QlXN1XMCGlIgjnXcOGRUhHUw6_gIgU2k62v9D8YS8Imk_97jPzxW73',
{type: imagerySet}
);
// CartoDB Layer
var cartoDBLayer = cartodb.createLayer(map, {
user_name: 'jsanzacademy1',
type: 'cartodb',
sublayers: [{
sql: $('#sql').html(),
cartocss: $('#cartocss').html()
},
{
type: "http",
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
}]
},{
https:true
});
// When both are done, add them to the map;
$.when(cartoDBLayer).done(function(cartoLayer){
bingLayer.addTo(map);
cartoLayer.addTo(map);
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment