Skip to content

Instantly share code, notes, and snippets.

@namessanti

namessanti/index.html

Last active September 26, 2017 14:11
Show Gist options
  • Save namessanti/2de7ed854983708f94af to your computer and use it in GitHub Desktop.
Save namessanti/2de7ed854983708f94af to your computer and use it in GitHub Desktop.
Download ZIP
Apple Stores with Cesium & CartoDB
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Apple Stores CartoDBXCesium</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quicksand">
<link href="http://cartodb-libs.global.ssl.fastly.net/cartodbui/assets/3.4.9/favicons/favicon.ico?1411985985" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<script src="http://cesium.cartodb.io/Cesium/Cesium.js"></script>
<style>
@import url(http://cesium.cartodb.io/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.text{
font-family: 'Quicksand';
font-size: 30px;
color: #FFFF00;
background-color: #2F4F4F;
margin:0;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.core.js"></script>
<script src="http://cesium.cartodb.io/cesium-cartodb.min.js"></script>
<script>
// Basemap
var basemapProvider = new Cesium.CartoDBImageryProvider({
url: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
credit: 'Open Street Map'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: basemapProvider,
baseLayerPicker: false,
fullscreenButton: false,
homeButton: false,
timeline: false,
navigationHelpButton: false,
animation: false,
scene3DOnly: true,
geocoder: false
});
// Tile data layer
var layerData1 = {
user_name: 'santiagoa',
sublayers: [{
sql: "SELECT * FROM ne_10m_urban_areas",
cartocss: '#ne_10m_urban_areas{ polygon-fill: #EDF8FB; polygon-opacity: 0.3; line-color: #FFF; line-width: 0; line-opacity: 1; line-gamma-method: power; } #ne_10m_urban_areas [ scalerank <= 9] { polygon-fill: #005824; } #ne_10m_urban_areas [ scalerank <= 8] { polygon-fill: #238B45; } #ne_10m_urban_areas [ scalerank <= 7] { polygon-fill: #41AE76; } #ne_10m_urban_areas [ scalerank <= 6] { polygon-fill: #66C2A4; } #ne_10m_urban_areas [ scalerank <= 5] { polygon-fill: #CCECE6; } #ne_10m_urban_areas [ scalerank <= 4] { polygon-fill: #D7FAF4; } #ne_10m_urban_areas [ scalerank <= 3] { polygon-fill: #EDF8FB; } #ne_10m_urban_areas { line-color: #C00; line-width: 1; line-opacity: 0; } #ne_10m_urban_areas::glow { line-color: #0AF; line-opacity: 0.4; line-width: 3; }'
}]
};
cartodb.Tiles.getTiles(layerData1, function (tiles, err) {
if (tiles == null) {
console.log("error: ", err.errors.join('\n'));
return;
}
viewer.scene.imageryLayers.addImageryProvider(new Cesium.CartoDBImageryProvider({
url: tiles.tiles[0],
credit: 'Natural Earth'
}));
});
var layerData = {
user_name: 'santiagoa',
sublayers: [{
sql: "SELECT * FROM apple_stores_2",
cartocss: '#apple_stores_2{ marker-fill-opacity: 5; marker-line-color: #ffff00; marker-line-width: 1; marker-line-opacity: 0.5; marker-placement: point; marker-type: ellipse; marker-width: 5; [zoom>3] { marker-width: 7; } [zoom>4] { marker-width: 8; } marker-fill: #FFFFFF; marker-allow-overlap: true; }'
}]
};
cartodb.Tiles.getTiles(layerData, function (tiles, err) {
if (tiles == null) {
console.log("error: ", err.errors.join('\n'));
return;
}
viewer.scene.imageryLayers.addImageryProvider(new Cesium.CartoDBImageryProvider({
url: tiles.tiles[0],
credit: 'CartoDB'
}));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment