Create car.html

2018-04-13 14:06:56 +02:00 · 2018-04-13 14:06:56 +02:00 · 7b8fd95f69
commit 7b8fd95f69
parent e9e30b7541
1 changed files with 99 additions and 0 deletions
--- a/docs/examples/car.html
+++ b/docs/examples/car.html
@ -0,0 +1,99 @@
+
+<html>
+  <link rel="stylesheet" href="vendor/leaflet.css" />
+  <style>
+    #map, html, body {
+      width: 100%; height: 100%; padding: 0; margin: 0;
+    }
+  </style>
+  <body>
+    <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>
+      var map = new google.maps.Map(document.getElementById('map'), {
+          center: new google.maps.LatLng(50.36274924193307,6.952676312093109),
+          zoom: 13,
+          mapTypeId:google.maps.MapTypeId.SATELLITE,
+          mapTypeControl:false,
+          minZoom:1,
+          scaleControl: false,
+          streetViewControl: false,
+          overviewMapControl: false,
+      });
+
+      var map_style = {};
+      map_style.google_maps_customization_style = [
+          {
+              stylers:[
+                  { invert_lightness:true },
+                  { weight:1 },
+                  { saturation:-100 },
+                  { lightness:-40 }
+              ]
+          },
+          {
+              elementType:"labels",
+              stylers:[
+                  { visibility:"simplified" }
+              ]
+          }
+      ];
+      map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
+      map.setOptions({styles:map_style.google_maps_customization_style});
+
+
+      var torqueLayer = new torque.GMapsTorqueLayer({
+        user       : 'javi',
+        table      : 'sensor_log_2013_05_30_15_25',
+        column     : 'cartodb_id',
+        countby    : 'avg(vel)',
+        resolution: 1,
+        steps: 1024,
+        blendmode  : 'lighter',
+        animationDuration: 20,
+        map: map
+      });
+
+    var DEFAULT_CARTOCSS = [
+      '#layer {',
+        'marker-width: 3; ',
+        'marker-fill: #FEE391; ',
+        'marker-fill-opacity: 0.2;',
+        '[value > 10] { marker-width: 3; }',
+        '[value > 20] { marker-width: 4; }',
+        '[value > 30] { marker-width: 6; }',
+        '[value > 40] { marker-width: 10; marker-fill: #FFF; }',
+      '[frame-offset = 1] {',
+         'marker-width: 4;',
+          'marker-fill-opacity: 0.1;',
+      '}',
+      '[frame-offset = 2] { ',
+         'marker-width: 4;',
+          'marker-fill-opacity: 0.1;',
+      '}',
+      '[frame-offset = 3] { ',
+         'marker-width: 3;',
+          'marker-fill-opacity: 0.1;',
+      '}',
+      '[frame-offset = 4] { ',
+         'marker-width: 2;',
+          'marker-fill-opacity: 0.1;',
+      '}',
+      '[frame-offset = 5] { ',
+         'marker-width: 2;',
+          'marker-fill-opacity: 0.1;',
+      '}',
+      '}'
+      ].join('\n');
+      torqueLayer.setCartoCSS(DEFAULT_CARTOCSS);
+      torqueLayer.setMap(map);
+      torqueLayer.play()
+    
+    </script>
+  </body>
+</html>
+