Create navy_gmaps.html

2018-04-13 14:08:01 +02:00 · 2018-04-13 14:08:01 +02:00 · 3e293ba982
commit 3e293ba982
parent ea3a49586c
1 changed files with 92 additions and 0 deletions
--- a/docs/examples/navy_gmaps.html
+++ b/docs/examples/navy_gmaps.html
@ -0,0 +1,92 @@
+<html>
+  <style>
+    #map, html, body {
+      width: 100%; height: 100%; padding: 0; margin: 0;
+    }
+  </style>
+  <body>
+    <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>
+    function initialize() {
+      var map = new google.maps.Map(document.getElementById('map'), {
+          center: new google.maps.LatLng(40.4166909, -3.7003454),
+          zoom: 2,
+          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});
+
+
+      // 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: #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: 8;marker-fill-opacity: 0.05;}',
+          '  [frame-offset = 2] {  marker-width: 20;marker-fill-opacity: 0.02;}',
+          '}'
+
+      ].join('\n');
+      var torqueLayer = new torque.GMapsTorqueLayer({
+        user       : 'viz2',
+        table      : 'ow',
+        cartocss: CARTOCSS
+      });
+      torqueLayer.error(function(err){
+        for(error in err){
+          console.warn(err[error]);
+        }
+      });
+      torqueLayer.setMap(map);
+      torqueLayer.play()
+    }
+    window.onload = initialize;
+    
+    </script>
+  </body>
+</html>
+