cartodb4/cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cdb

Browse Source
This commit is contained in:
zhongjin
2020-06-15 12:07:54 +08:00
parent 610ed21a90
commit a96ef233c9
444 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
lib/assets/javascripts/cdb/examples/tutorials/named-maps-example.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>Named Maps Tutorial | CartoDB</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="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- Drop your code between the script tags below! -->
<script>
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
scrollWheelZoom: false,
center: [0, 0],
zoomControl: true,
zoom: 3
});
// add a base layer
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
// add cartodb layer with one sublayer
cartodb.createLayer(map, {
user_name: 'documentation',
type: 'namedmap',
named_map: {
name: "namedmap_tutorial",
layers: [{
layer_name: "t",
interactivity: "cartodb_id, name, pop_max"
}]
}
}, {https: true})
.addTo(map)
.done(function(layer) {
layer.getSubLayer(0).setInteraction(true);
// on mouseover
layer.getSubLayer(0).on('featureOver', function(e, pos, pixel, data) {
// print data to console log
console.log("Event #" + data.cartodb_id + ", name " + data.name + ", max population: " + data.pop_max);
});
// show infowindows on click
cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id','name', 'pop_max']);
});
}
window.onload = main;
</script>
</body>
</html>

32
lib/assets/javascripts/cdb/examples/tutorials/named-maps-template.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Named Maps Tutorial | CartoDB</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" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- Drop your code between the script tags below! -->
<script>
</script>
</body>
</html>

45
lib/assets/javascripts/cdb/examples/tutorials/tutorial-1.html Normal file
View File

@@ -0,0 +1,45 @@
<html>
<head>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#cartodb-map { width: 100%; height:100%; background: black;}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('cartodb-map', {
center: [40,-98],
zoom: 4
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
var layerUrl = 'https://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json';
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM example_cartodbjs_1 where adm0_a3 = 'USA'",
cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
}
layer.getSubLayer(0).set(subLayerOptions);
}).on('error', function() {
//log the error
});
}
</script>
</head>
<body onload="init()">
<div id='cartodb-map'></div>
</body>
</html>

70
lib/assets/javascripts/cdb/examples/tutorials/tutorial-2.html Normal file
View File

@@ -0,0 +1,70 @@
<html>
<head>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#cartodb-map { width: 100%; height:100%; background: black;}
</style>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-header">
<img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light.png"></src>
</div>
<div class="cartodb-popup-content">
<!-- content.data contains the field info -->
<h4>City: </h4>
<p>{{content.data.name}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('cartodb-map', {
center: [40,-98],
zoom: 4
})
L.tileLayer('http://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
var layerUrl = 'https://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json';
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM example_cartodbjs_1 where pop_other::float > 1000000",
cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayer.infowindow.set('template', $('#infowindow_template').html());
sublayer.on('featureClick', function(e, latlng, pos, data) {
alert("Hey! You clicked " + data.cartodb_id);
});
}).on('error', function() {
//log the error
});
}
</script>
</head>
<body onload="init()">
<div id='cartodb-map'></div>
</body>
</html>

74
lib/assets/javascripts/cdb/examples/tutorials/tutorial-google-driving-2.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>Driving directions to clicked point | 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="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="http://www.maps.google.com/maps/api/js?sensor=false&v=3.30"></script>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map;
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
function main() {
// Map center
var myLatlng = new google.maps.LatLng(37.753, -122.433);
var myOptions = {
zoom: 13,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create services for later rendering of directions
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var directionsService = new google.maps.DirectionsService();
// The location of the Exploratorium
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
// Our CartoDB visualization
var vizjson_url = "https://documentation.cartodb.com/api/v2/viz/4a885510-d6fb-11e4-aedb-0e4fddd5de28/viz.json";
cartodb.createLayer(map, vizjson_url)
.addTo(map)
.done(function(layers) {
var subLayer = layers.getSubLayer(0);
subLayer.setInteraction(true); // Interaction for that layer must be enabled
// Setup our event when an object is clicked
layers.on('featureClick', function(e, latlng, pos, data){
// the location of the clicked school
var school = new google.maps.LatLng(latlng[0], latlng[1]);
var request = {
origin : school,
destination : exploratorium,
travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
});
}
window.onload = main;
</script>
</body>
</html>

93
lib/assets/javascripts/cdb/examples/tutorials/tutorial-google-driving.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<title>Driving directions to clicked point | 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" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map;
function main() {
// Map center
var myLatlng = new google.maps.LatLng(37.753, -122.433);
var myOptions = {
zoom: 13,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Create services for later rendering of directions
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var directionsService = new google.maps.DirectionsService();
// The location of the Exploratorium
var exploratorium = new google.maps.LatLng(37.801434, -122.397561);
// Our CartoDB visualization
var vizjson_url = "https://documentation.cartodb.com/api/v2/viz/4a885510-d6fb-11e4-aedb-0e4fddd5de28/viz.json";
cartodb.createLayer(map, vizjson_url)
.addTo(map)
.done(function(layers) {
var subLayer = layers.getSubLayer(0);
subLayer.setInteraction(true); // Interaction for that layer must be enabled
cdb.vis.Vis.addCursorInteraction(map, subLayer); // undo with removeCursorInteraction
// Setup our event when an object is clicked
layers.on('featureClick', function(e, latlng, pos, data){
// the location of the clicked school
var school = new google.maps.LatLng(latlng[0], latlng[1]);
// our DirectionsRequest
var request = {
origin : school,
destination : exploratorium,
travelMode : google.maps.TravelMode.DRIVING
};
// use route method to generate directions
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
});
}
window.onload = main;
</script>
</body>
</html>

70
lib/assets/javascripts/cdb/examples/tutorials/tutorial-google-heatmap-2.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps Heatmap of bike trips | 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" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library + visualization-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.33&libraries=visualization"></script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map, pointarray, heatmap;
var google_api_key = "AIzaSyCADWr4a6NraGN1ldmcBKN4W_6c6teuImw"
function main() {
// Map center
var myLatlng = new google.maps.LatLng(40.722, -73.997);
var myOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
var sql = cartodb.SQL({ user: 'documentation', format: 'geojson'});
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points_281_29").done(function(data) {
data = data.features.map(function(r) {
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
});
var pointArray = new google.maps.MVCArray(data);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.set('radius', heatmap.get('radius') ? null : 20);
heatmap.set('opacity', heatmap.get('opacity') ? null : .8);
heatmap.setMap(map);
});
}
window.onload = main;
</script>
</body>
</html>

74
lib/assets/javascripts/cdb/examples/tutorials/tutorial-google-heatmap.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>GMaps Heatmap of bike trips | 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" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<!-- include google maps library -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=INSERTYOURAPIKEYHERE&v=3.32"></script>
<!-- include google visualization library -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false">
</script>
<!-- include cartodb.js library -->
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var map, pointarray, heatmap;
function main() {
// Map center
var myLatlng = new google.maps.LatLng(40.722, -73.997);
var myOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
var sql = cartodb.SQL({ user: 'documentation', format: 'geojson'});
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points_281_29").done(function(data) {
data = data.features.map(function(r) {
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
});
var pointArray = new google.maps.MVCArray(data);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.set('radius', heatmap.get('radius') ? null : 20);
heatmap.set('opacity', heatmap.get('opacity') ? null : .8);
heatmap.setMap(map);
});
}
window.onload = main;
</script>
</body>
</html>

57
lib/assets/javascripts/cdb/examples/tutorials/tutorial-query_by_distance-template.html Normal file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('map', {
center: [20,-20],
zoom: 3
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
<a href="#500" id="500" value=500 class="button 500">500</a>
<a href="#100" id="100" value=100 class="button 100">100</a>
<a href="#50" id="50" value=50 class="button 50">50</a>
<a href="#10" id="10" value=10 class="button 10 selected">10</a>
</div>
</body>
</html>

130
lib/assets/javascripts/cdb/examples/tutorials/tutorial-query_by_distance.html Normal file
View File

@@ -0,0 +1,130 @@
<html>
<head>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 30px;
padding: 10px;
text-align: center;
font: bold 15px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #000;
}
</style>
<script>
var map;
function init() {
// initiate leaflet map
map = new L.Map('map', {
center: [20,-20],
zoom: 3
});
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
var layerUrl = 'https://documentation.cartodb.com/api/v2/viz/9af23dd8-ea10-11e2-b5ac-5404a6a683d5/viz.json';
var sublayers = [];
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM ne_10m_populated_p_2 LIMIT 2000",
cartocss: "#ne_10m_populated_p_2{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
detectUserLocation();
}).on('error', function() {
//log the error
});
// credit: http://html5doctor.com/finding-your-position-with-geolocation/
function detectUserLocation() {
if(navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.watchPosition(
mapToPosition,
alertError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
} else {
alert("Geolocation is not supported by this browser");
}
function alertError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
}
function mapToPosition(position){
lon = position.coords.longitude;
lat = position.coords.latitude;
updateQuery();
map.setView(new L.LatLng(lat,lon), 7);
new L.CircleMarker([lat,lon],{radius: 4}).addTo(map);
}
var lon,
lat,
total = 10;
function updateQuery() {
sublayers[0].set({
sql: "WITH cities AS (SELECT cartodb_id, the_geom, the_geom_webmercator, name FROM ne_10m_populated_p_2 ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint("+lon+","+lat+"),4326) ASC LIMIT "+total+") SELECT null as cartodb_id, ST_MakeLine(ST_Transform(ST_SetSRID(ST_MakePoint("+lon+","+lat+"),4326),3857),the_geom_webmercator) as the_geom_webmercator, null as name FROM cities UNION ALL SELECT cartodb_id, the_geom_webmercator, name FROM cities",
cartocss: "#ne_10m_populated_p_2{[mapnik-geometry-type = 1]{text-name: [name]; text-face-name: 'DejaVu Sans Book'; text-size: 12; text-fill: #000; text-allow-overlap: false; text-halo-fill: #FFF; text-halo-radius: 2;} [mapnik-geometry-type = 2]{line-color: white; line-opacity: 0.5;} } "
});
}
$('.button').click(function() {
$('.button').removeClass('selected'); $(this).addClass('selected');
total = $(this).attr('id');
updateQuery();
});
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
<a href="#500" id="500" value=500 class="button 500">500</a>
<a href="#100" id="100" value=100 class="button 100">100</a>
<a href="#50" id="50" value=50 class="button 50">50</a>
<a href="#10" id="10" value=10 class="button 10 selected">10</a>
</div>
</body>
</html>

55
lib/assets/javascripts/cdb/examples/tutorials/tutorial-toggle_map_view-template.html Normal file
View File

@@ -0,0 +1,55 @@
<html>
<head>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('map', {
center: [20,-20],
zoom: 3
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
<a href="#megacities" id="megacities" class="button megacities">MEGACITIES</a>
<a href="#capitals" id="capitals" class="button capitals">CAPITALS</a>
<a href="#all" id="all" class="button all">ALL CITIES</a>
</div>
</body>
</html>

100
lib/assets/javascripts/cdb/examples/tutorials/tutorial-toggle_map_view.html Normal file
View File

@@ -0,0 +1,100 @@
<html>
<head>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init() {
// initiate leaflet map
map = new L.Map('map', {
center: [20,-20],
zoom: 3
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
var layerUrl = 'https://documentation.cartodb.com/api/v2/viz/9af23dd8-ea10-11e2-b5ac-5404a6a683d5/viz.json';
var sublayers = [];
var LayerActions = {
all: function(){
sublayers[0].setSQL("SELECT * FROM ne_10m_populated_p_2");
return true;
},
capitals: function(){
sublayers[0].setSQL("SELECT * FROM ne_10m_populated_p_2 WHERE featurecla = 'Admin-0 capital'");
return true;
},
megacities: function(){
sublayers[0].setSQL("SELECT * FROM ne_10m_populated_p_2 WHERE megacity = 1");
return true;
}
}
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM ne_10m_populated_p_2",
cartocss: "#ne_10m_populated_p_2{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
}).on('error', function() {
//log the error
});
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
});
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id='menu'>
<a href="#megacities" id="megacities" class="button megacities">MEGACITIES</a>
<a href="#capitals" id="capitals" class="button capitals">CAPITALS</a>
<a href="#all" id="all" class="button all">ALL CITIES</a>
</div>
</body>
</html>