Merge pull request #299 from CartoDB/update-examples

Update Torque examples
2018-12-03 15:18:21 +01:00 · 2018-12-03 15:18:21 +01:00 · 69857f7335
commit 69857f7335
parent 8142d2622e 6489c8a743
13 changed files with 81 additions and 59 deletions
--- a/examples/car.html
+++ b/examples/car.html
@ -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 = [
--- a/examples/data_peek.html
+++ b/examples/data_peek.html
@ -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();
--- a/examples/dual_encode.html
+++ b/examples/dual_encode.html
@ -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);
        });
--- a/examples/examples.json
+++ b/examples/examples.json
@ -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"
                }
            ]
        }
    ]
-}
+}
--- a/examples/leaflet_interaction.html
+++ b/examples/leaflet_interaction.html
@ -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);

--- a/examples/light_bright.html
+++ b/examples/light_bright.html
@ -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);
        });
--- a/examples/navy_gmaps.html
+++ b/examples/navy_gmaps.html
@ -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){
--- a/examples/navy_leaflet.html
+++ b/examples/navy_leaflet.html
@ -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){
--- a/examples/navy_ol.html
+++ b/examples/navy_ol.html
@ -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);
--- a/examples/render-range_leaflet.html
+++ b/examples/render-range_leaflet.html
@ -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);
--- a/examples/static_bubble_map.html
+++ b/examples/static_bubble_map.html
@ -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>
--- a/examples/static_heat_map.html
+++ b/examples/static_heat_map.html
@ -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);
        });
--- a/examples/static_heat_map_simple.html
+++ b/examples/static_heat_map_simple.html
@ -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>