cartodb.js/examples/tutorial-toggle_map_view.html at develop · recena/cartodb.js · GitHub - github.com

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map { width: 100%; height:100%; background: black;}
    #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
    #menu a {
      margin: 15px 10px 0 0;
      float: right;
      vertical-align: baseline;
      width: 70px;
      padding: 10px;
      text-align: center;
      font: bold 11px "Helvetica",Arial;
      line-height: normal;
      color: #555;
      border-radius: 4px;
      border: 1px solid #777777;
      background: #ffffff;
      text-decoration: none;
      cursor: pointer;
    }
    #menu a.selected,
    #menu a:hover {
      color: #F84F40;
    }
  </style>

  <script>
    var map;

    function init() {
      // initiate leaflet map
      map = new L.Map('map', {
        center: [20,-20],
        zoom: 3
      })

      L.tileLayer('https://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 = 'http://documentation.cartodb.com/api/v2/viz/9af23dd8-ea10-11e2-b5ac-5404a6a683d5/viz.json';

      var sublayers = [];

      var LayerActions = {
        all: function(){
          sublayers[0].setSQL("SELECT * FROM ne_10m_populated_p_2");
          return true;
        },
        capitals: function(){
          sublayers[0].setSQL("SELECT * FROM ne_10m_populated_p_2 WHERE featurecla = 'Admin-0 capital'");
          return true;
        },
        megacities: function(){
          sublayers[0].setSQL("SELECT * FROM ne_10m_populated_p_2 WHERE megacity = 1");
          return true;
        }
      }

      cartodb.createLayer(map, layerUrl)
        .addTo(map)
        .on('done', function(layer) {
          // change the query for the first layer
          var subLayerOptions = {
            sql: "SELECT * FROM ne_10m_populated_p_2",
            cartocss: "#ne_10m_populated_p_2{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}"
          }

          var sublayer = layer.getSubLayer(0);

          sublayer.set(subLayerOptions);

          sublayers.push(sublayer);
        }).on('error', function() {
          //log the error
        });

      $('.button').click(function() {
        $('.button').removeClass('selected');
        $(this).addClass('selected');
        LayerActions[$(this).attr('id')]();
      });
    }
  </script>
</head>

<body onload="init()">
  <div id='map'></div>

  <div id='menu'>
    <a href="#megacities" id="megacities" class="button megacities">MEGACITIES</a>
    <a href="#capitals" id="capitals" class="button capitals">CAPITALS</a>
    <a href="#all" id="all" class="button all">ALL CITIES</a>
  </div>
</body>
</html>