updated navy_elaflet example

examples/navy_leaflet.html

@@ -13,76 +13,52 @@
     <script src="../vendor/underscore.js"></script>
     <script src="../vendor/carto.js"></script>
     <script src="../dist/torque.uncompressed.js"></script>
-    <!--
-    <script src="../lib/torque/cartocss_reference.js"></script>
-    <script src="../lib/torque/profiler.js"></script>
-    <script src="../lib/torque/request.js"></script>
-    <script src="../lib/torque/animator.js"></script>
-    <script src="../lib/torque/leaflet/leaflet_tileloader_mixin.js"></script>
-    <script src="../lib/torque/leaflet/canvas_layer.js"></script>
-    <script src="../lib/torque/renderer/cartocss_render.js"></script>
-    <script src="../lib/torque/renderer/point.js"></script>
-    <script src="../lib/torque/renderer/rectangle.js"></script>
-    <script src="../lib/torque/provider.json.js"></script>
-    <script src="../lib/torque/provider.jsonarray.js"></script>
-    <script src="../lib/torque/leaflet/torque.js"></script>
-    -->
 
 
     <script>
+      // define the torque layer style using cartocss
+      var CARTOCSS = [
+          'Map {',
+          '-torque-time-attribute: "date";',
+          '-torque-aggregation-function: "count(cartodb_id)";',
+          '-torque-frame-count: 760;',
+          '-torque-animation-duration: 15;',
+          '-torque-resolution: 2',
+          '}',
+          '#layer {',
+          '  marker-width: 3;',
+          '  marker-fill-opacity: 0.8;',
+          '  marker-fill: #FEE391; ',
+          '  comp-op: "lighten";',
+          '  [value > 2] { marker-fill: #FEC44F; }',
+          '  [value > 3] { marker-fill: #FE9929; }',
+          '  [value > 4] { marker-fill: #EC7014; }',
+          '  [value > 5] { marker-fill: #CC4C02; }',
+          '  [value > 6] { marker-fill: #993404; }',
+          '  [value > 7] { marker-fill: #662506; }',
+          '  [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}',
+          '  [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}',
+          '}'
+      ].join('\n');
+
+        
       var map = new L.Map('map', {
         zoomControl: true,
         center: [40, 0],
-        //center: [36.60670888641815,  38.627929687],
-        center: [ 41.30499304085372, -5.013290047645569],
-        zoom: 19
+        zoom: 3
       });
-      window.map = map;
 
-      L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
-        attribution: 'Stamen'
+      L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
+        attribution: 'CartoDB'
       }).addTo(map);
 
       var torqueLayer = new L.TorqueLayer({
-        provider: 'sql_api',
-        sql_api_domain: 'localhost.lan',
-        sql_api_port: '8080',
-        tiler_domain: 'localhost.lan',
-        tiler_port: 8181,
-        tiler_protocol: 'http',
-        user       : 'dev',
-        //table      : 'sensor_log_2013_05_31_16_37',
-        table      : 'sensor_log_2013_10_12_16_44',
-        column     : 'time',
-        countby    : 'count(cartodb_id)',
-        resolution: 2,
-        steps: 750,
-        blendmode  : 'lighter',
-        animationDuration: 20
+        user       : 'viz2',
+        table      : 'ow',
+        cartocss: CARTOCSS
       });
-
-    var DEFAULT_CARTOCSS = [
-      '#layer {',
-      '  marker-width: 13;',
-      '  marker-fill: #FEE391; ',
-      '  [value > 2] { marker-fill: #FEC44F; }',
-      '  [value > 3] { marker-fill: #FE9929; }',
-      '  [value > 4] { marker-fill: #EC7014; }',
-      '  [value > 5] { marker-fill: #CC4C02; }',
-      '  [value > 6] { marker-fill: #993404; }',
-      '  [value > 7] { marker-fill: #662506; }',
-      '  [frame-offset = 1] {  marker-width: 20; marker-fill-opacity: 0.05;}',
-      '  [frame-offset = 2] {  marker-fill: red; marker-width: 30; marker-fill-opacity: 0.02;}',
-      '}'
-    ].join('\n');
-      torqueLayer.setCartoCSS(DEFAULT_CARTOCSS);
-
       torqueLayer.addTo(map);
-      //torqueLayer.play()
-      window.torqueLayer = torqueLayer;
-      torqueLayer.setCartoCSS('#layer { marker-width: 1; marker-fill: #000;}')
-      torqueLayer.setStep(308);
-    
+      torqueLayer.play()
     </script>
   </body>
 </html>