mtc-samples/carto-test.html at gh-pages · LocalData/mtc-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
  <title>CartoDB test</title>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>

  <style type="text/css">
  #map {
    height: 400px;
    width: 400px;
  }
  </style>
</head>
<body>

<div id="map"></div>

<script type="text/javascript">
window.onload = function() {

  // Create the Leaflet map
  var map = new L.Map('map', {
    center: [37.809911,-122.402115],
    zoom: 8
  });

  // Create a Standard Layer Source Object
  // per http://docs.cartodb.com/cartodb-platform/cartodb-js.html#standard-layer-source-object-type-cartodb
  var cdbTracts = cartodb.createLayer(map, {
    user_name: 'mtc',
    type: 'cartodb',
    sublayers: [{
      sql: "SELECT * FROM ec_tracts",
      cartocss: '#ec_tracts { polygon-fill: green }',
      interactivity: "en_ped_injured_per_2008"
    }]
  })
  .addTo(map)
  .done(function(layer) {
    console.log("Done.");

    // Listen for errors
    layer.on('error', function(err) {
      console.log('error: ' + err);
    });

    // Listen for featureOver events
    // Doesn't seem to fire.
    layer.on('featureOver', function(e, latlng, pos, data) {
      console.log(e, latlng, pos, data);
    });

    var subLayer = layer.getSubLayer(0);
    subLayer.setInteraction(true);
    subLayer.on('featureOver', function(e) {
      console.log("Hovered over layer");
    })
    subLayer.on('featureClick', function(e) {
      console.log("Clicked sublayer feature");
    })
  });
}
</script>

</body>
</html>