example file for vector field

2015-09-09 14:46:12 -04:00 · 2015-09-09 14:46:12 -04:00 · 1b93a6c67e
commit 1b93a6c67e
parent 70c34d2d30
1 changed files with 81 additions and 0 deletions
--- a/examples/vector_test.html
+++ b/examples/vector_test.html
@ -0,0 +1,81 @@
+
+<html>
+  <link rel="stylesheet" href="vendor/leaflet.css" />
+  <style>
+    #map, html, body {
+      width: 100%; height: 100%; padding: 0; margin: 0;
+    }
+    #title {
+      position: absolute;
+      top: 100px;
+      left: 50px;
+      color: white;
+      font-size: 27px;
+      font-family: Helvetica, sans-serif;
+    }
+  </style>
+  <body>
+    <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>
+
+
+    <script>
+      // define the torque layer style using cartocss
+      // this creates a kind of density map
+      //color scale from http://colorbrewer2.org/
+      var CARTOCSS = [
+        'Map {',
+        '  -torque-frame-count:1;',
+        '  -torque-animation-duration:1;',
+        '  -torque-time-attribute:"date";',
+        '  -torque-aggregation-function:"avg(angle*40)";',
+        '  -torque-resolution:4;',
+        '  -torque-data-aggregation:linear;',
+        '}',
+          '#wind {',
+          '  marker-width: 4;',
+          '  marker-fill-opacity: 1.0;',
+          '  marker-stroke: red; ',
+          '  marker-max-mag: 7; ',
+          '  marker-type: vector;',
+          '  marker-mag : 7;',
+          '}'
+
+      ]
+
+      for(var i=0 ; i  < 255; i++){
+        CARTOCSS.push('#wind[value <= '+(255-i)+'] { marker-angle:'+ (255-i)/40+'; marker-stroke: rgb('+i+','+(255-i)+',255); }')
+      }
+      console.log(CARTOCSS)
+
+      CARTOCSS = CARTOCSS.join("\n")
+
+
+      var map = new L.Map('map', {
+        zoomControl: true,
+        center: [40, 0],
+        zoom: 3
+      });
+
+      L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
+        attribution: 'CartoDB'
+      }).addTo(map);
+
+      var torqueLayer = new L.TorqueLayer({
+        user       : 'stuartlynn',
+        table      : 'wind',
+        cartocss: CARTOCSS
+      });
+
+      torqueLayer.addTo(map);
+      torqueLayer.play();
+
+
+
+    </script>
+  </body>
+</html>