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

Update examples

Browse Source
This commit is contained in:
Ivan Malagon 2018-12-03 14:53:13 +01:00
parent 8142d2622e
commit 6489c8a743
13 changed files with 81 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/car.html
View File

@ -10,7 +10,7 @@
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../dist/torque.full.uncompressed.js"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"></script>
<script>
@ -55,7 +55,8 @@
steps: 1024,
blendmode : 'lighter',
animationDuration: 20,
map: map
map: map,
tiler_protocol: 'https'
});
var DEFAULT_CARTOCSS = [

9
examples/data_peek.html
View File

@ -9,7 +9,7 @@
<div id="map"></div>
<script src="vendor/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"></script>
<script>
@ -24,7 +24,7 @@
'}',
'#layer {',
'image-filters: colorize-alpha(blue, cyan, lightgreen, yellow , orange, red);',
'marker-file: url(http://s3.amazonaws.com/com.cartodb.assets.static/alphamarker.png);',
'marker-file: url(https://s3.amazonaws.com/com.cartodb.assets.static/alphamarker.png);',
'marker-fill-opacity: 0.4;',
'marker-width: 35;',
'}'
@ -37,14 +37,15 @@
zoom: 3
});
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
L.tileLayer('https://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);
var torqueLayer = new L.TorqueLayer({
user : 'fdansv',
table : 'snow',
cartocss: CARTOCSS
cartocss: CARTOCSS,
tiler_protocol: 'https'
});
torqueLayer.addTo(map);
torqueLayer.play();

11
examples/dual_encode.html
View File

@ -4,7 +4,7 @@
<title>Heat map simple | 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="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
@ -12,7 +12,7 @@
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
@ -95,7 +95,7 @@
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
@ -105,7 +105,7 @@
zoom: 14
});
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
@ -118,6 +118,9 @@
user_name: "andrew",
tile_style: $('#cartocss_template').html()
}
}, {
https: true,
tiler_protocol: 'https'
}).done(function(layer) {
map.addLayer(layer);
});

16
examples/examples.json
View File

@ -32,14 +32,9 @@
"file": "light_bright.html"
},
{
"title": "Navy Ships",
"title": "Navy Ships GMaps",
"desc": "Navy Ships over Google Maps",
"file": "navy_gmaps.html"
},
{
"title": "Nurburgring track",
"desc": "A car's route at the Nürburgring track mapped in Torque.",
"file": "car.html"
},
{
"title": "Data peek",
@ -52,7 +47,7 @@
"file": "dual_encode.html"
},
{
"title": "Navy Ships",
"title": "Navy Ships Leaflet",
"desc": "Navy Ships over Leaflet",
"file": "navy_leaflet.html"
},
@ -65,13 +60,8 @@
"title": "Render range Leaflet",
"desc": "",
"file": "render-range_leaflet.html"
},
{
"title": "SQL",
"desc": "",
"file": "sql.html"
}
]
}
]
}
}

11
examples/leaflet_interaction.html
View File

@ -18,9 +18,9 @@
<div id="map"></div>
<div id="title">Average temperature collected by Britain's Royal Navy (1913-1925)</div>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"></script>
<script>
@ -57,14 +57,15 @@
zoom: 3
});
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
L.tileLayer('https://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
attribution: 'CartoDB'
}).addTo(map);
var torqueLayer = new L.TorqueLayer({
user : 'viz2',
table : 'ow',
cartocss: CARTOCSS
cartocss: CARTOCSS,
tiler_protocol: 'https'
});
torqueLayer.addTo(map);

11
examples/light_bright.html
View File

@ -4,7 +4,7 @@
<title>Light bright effect | 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="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
@ -12,7 +12,7 @@
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
@ -60,7 +60,7 @@
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
@ -69,7 +69,7 @@
center: [-6.964483, 107.634506],
zoom: 7
});
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
@ -81,6 +81,9 @@
user_name: "andrew",
tile_style: $('#cartocss_template').html()
}
}, {
https: true,
tiler_protocol: 'https'
}).done(function(layer) {
map.addLayer(layer);
});

7
examples/navy_gmaps.html
View File

@ -8,8 +8,8 @@
<div id="map"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../dist/torque.full.uncompressed.js" type="application/javascript" charset="utf-8"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js" type="application/javascript" charset="utf-8"></script>
<script>
@ -74,7 +74,8 @@
var torqueLayer = new torque.GMapsTorqueLayer({
user : 'viz2',
table : 'ow',
cartocss: CARTOCSS
cartocss: CARTOCSS,
tiler_protocol: 'https'
});
torqueLayer.error(function(err){
for(error in err){

8
examples/navy_leaflet.html
View File

@ -8,8 +8,9 @@
<body>
<div id="map"></div>
<script src="vendor/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js" type="application/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js" type="application/javascript" charset="utf-8"></script>
<script>
@ -53,7 +54,8 @@
user : 'viz2',
table : 'ow',
zIndex: 100,
cartocss: CARTOCSS
cartocss: CARTOCSS,
tiler_protocol: 'https'
});
torqueLayer.error(function(err){
for(error in err){

11
examples/navy_ol.html
View File

@ -3,8 +3,8 @@
<head lang="en">
<meta charset="UTF-8">
<title>CartoDb Torque Layer Example</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
<style>
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
@ -13,7 +13,7 @@
</head>
<body>
<div id="map"></div>
<script src="../dist/torque.full.uncompressed.js" type="application/javascript" charset="utf-8"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js" type="application/javascript" charset="utf-8"></script>
<script>
@ -50,7 +50,7 @@
}),
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({ url: 'http://api.cartocdn.com/base-dark/{z}/{x}/{y}.png'})
source: new ol.source.XYZ({ url: 'https://api.cartocdn.com/base-dark/{z}/{x}/{y}.png'})
})
],
interactions: ol.interaction.defaults({
@ -63,7 +63,8 @@
var torqueLayer = new ol.TorqueLayer({
user : 'viz2',
table : 'ow',
cartocss: CARTOCSS
cartocss: CARTOCSS,
tiler_protocol: 'https'
});
torqueLayer.onAdd(map);

5
examples/render-range_leaflet.html
View File

@ -20,7 +20,7 @@
<div id="map"></div>
<script src="vendor/leaflet.js"></script>
<script src="../dist/torque.full.uncompressed.js"></script>
<script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"></script>
<script>
@ -60,7 +60,8 @@
var torqueLayer = new L.TorqueLayer({
user: 'documentation',
sql: 'SELECT s + 181 as cartodb_id, st_transform(ST_SetSRID (st_makepoint(s, 10*sin(s)), 4326), 3857) as the_geom_webmercator FROM generate_series(-180, 180, 1) as s',
cartocss: CARTOCSS
cartocss: CARTOCSS,
tiler_protocol: 'https'
});
torqueLayer.error(console.warn);
torqueLayer.addTo(map);

18
examples/static_bubble_map.html
View File

@ -4,7 +4,7 @@
<title>Static bubble map | 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="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
@ -12,7 +12,10 @@
margin: 0;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
<script type="sql/html" id="cartocss_template">
Map {
-torque-frame-count:0.5;
@ -54,7 +57,7 @@
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>
<script>
function main() {
@ -63,8 +66,8 @@
center: [39.9304, 116.423239],
zoom: 8
});
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
cartodb.createLayer(map, {
@ -75,6 +78,9 @@
user_name: "andrew",
tile_style: $('#cartocss_template').html()
}
}, {
https: true,
tiler_protocol: 'https'
}).done(function(layer) {
map.addLayer(layer);
});
@ -84,4 +90,4 @@
window.onload = main;
</script>
</body>
</html>
</html>

14
examples/static_heat_map.html
View File

@ -4,7 +4,7 @@
<title>Torque heatmap | 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="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
@ -12,7 +12,10 @@
margin: 0;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
<script type="sql/html" id="cartocss_template">
Map {
-torque-frame-count:0.5;
@ -51,7 +54,7 @@
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
@ -61,7 +64,7 @@
zoom: 7
});
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
@ -74,6 +77,9 @@
user_name: "andrew",
tile_style: $('#cartocss_template').html()
}
}, {
https: true,
tiler_protocol: 'https'
}).done(function(layer) {
map.addLayer(layer);
});

14
examples/static_heat_map_simple.html
View File

@ -4,7 +4,7 @@
<title>Heat map simple | 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="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
@ -12,7 +12,10 @@
margin: 0;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
<script type="sql/html" id="cartocss_template">
Map {
-torque-frame-count:0.5;
@ -38,7 +41,7 @@
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
@ -61,6 +64,9 @@
user_name: "andrew",
tile_style: $('#cartocss_template').html()
}
}, {
https: true,
tiler_protocol: 'https'
}).done(function(layer) {
map.addLayer(layer);
});
@ -70,4 +76,4 @@
window.onload = main;
</script>
</body>
</html>
</html>