navy example using google maps

2013-08-29 12:53:02 +02:00 · 2013-08-29 12:53:02 +02:00 · 9cde3d5c08
commit 9cde3d5c08
parent bd2307a4fa
1 changed files with 109 additions and 0 deletions
--- a/examples/navy_gmaps.html
+++ b/examples/navy_gmaps.html
@ -0,0 +1,109 @@
+
+<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="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+
+    <script src="../vendor/leaflet.js"></script>
+    <script src="../vendor/underscore.js"></script>
+    <script src="../vendor/carto.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 src="../lib/torque/gmaps/canvas_tile_layer.js"></script>
+    <script src="../lib/torque/gmaps/CanvasLayer.js"></script>
+    <script src="../lib/torque/gmaps/gmaps_tileloader_mixin.js"></script>
+    <script src="../lib/torque/gmaps/torque.js"></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});
+
+      var torqueLayer = new torque.GMapsTorqueLayer({
+        provider: 'sql_api',
+        user       : 'viz2',
+        table      : 'ow',
+        column     : 'date',
+        countby    : 'count(cartodb_id)',
+        resolution: 2,
+        is_time: true,
+        steps: 750,
+        blendmode  : 'lighter',
+        animationDuration: 60,
+        map: map
+      });
+
+      var DEFAULT_CARTOCSS = [
+        '#layer {',
+        '  marker-width: 2;',
+        '  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.setMap(map);
+      torqueLayer.play()
+    }
+    window.onload = initialize;
+    
+    </script>
+  </body>
+</html>
+