cdb

2020-06-15 12:07:54 +08:00
parent 610ed21a90
commit a96ef233c9
444 changed files with 0 additions and 0 deletions
--- a/lib/assets/javascripts/cdb/examples/tutorials/tutorial-2.html
+++ b/lib/assets/javascripts/cdb/examples/tutorials/tutorial-2.html
@@ -0,0 +1,70 @@
+<html>
+<head>
+  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
+  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
+  <style>
+    html, body {width:100%; height:100%; padding: 0; margin: 0;}
+    #cartodb-map { width: 100%; height:100%; background: black;}
+  </style>
+
+  <script type="infowindow/html" id="infowindow_template">
+    <div class="cartodb-popup">
+      <a href="#close" class="cartodb-popup-close-button close">x</a>
+       <div class="cartodb-popup-content-wrapper">
+         <div class="cartodb-popup-header">
+           <img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light.png"></src>
+         </div>
+         <div class="cartodb-popup-content">
+           <!-- content.data contains the field info -->
+           <h4>City: </h4>
+           <p>{{content.data.name}}</p>
+         </div>
+       </div>
+       <div class="cartodb-popup-tip-container"></div>
+    </div>
+  </script>
+
+  <script>
+    var map;
+    function init(){
+      // initiate leaflet map
+      map = new L.Map('cartodb-map', {
+        center: [40,-98],
+        zoom: 4
+      })
+
+      L.tileLayer('http://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
+        attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
+      }).addTo(map);
+
+      var layerUrl = 'https://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json';
+
+      cartodb.createLayer(map, layerUrl)
+       .addTo(map)
+       .on('done', function(layer) {
+        // change the query for the first layer
+        var subLayerOptions = {
+          sql: "SELECT * FROM example_cartodbjs_1 where pop_other::float > 1000000",
+          cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
+        }
+
+        var sublayer = layer.getSubLayer(0);
+
+        sublayer.set(subLayerOptions);
+        sublayer.infowindow.set('template', $('#infowindow_template').html());
+
+        sublayer.on('featureClick', function(e, latlng, pos, data) {
+          alert("Hey! You clicked " + data.cartodb_id);
+        });
+      }).on('error', function() {
+        //log the error
+      });
+    }
+  </script>
+
+</head>
+
+<body onload="init()">
+  <div id='cartodb-map'></div>
+</body>
+</html>