D3 Examples - KCMOMVA

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
   <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      height: 100%;
      margin: 30;
    }
  </style>
</head>
​
<body>
  <div id="map"></div>
  <script>
    var baselayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>' }); 
​
    var map = L.map('map', {
      center: [39.0835893, -94.6608975],
      zoom: 11,
      layers: [baselayer]
    });
​
    function cartoTileLayer(callback) {
      cartodb.Tiles.getTiles({
        type: 'cartodb',
        user_name: 'jlrosch',
        sublayers: [{
          sql: 'SELECT the_geom_webmercator, clstrfinal FROM finalmodel_10v5_wsplits_walldata as CST',
          cartocss: '#CST {polygon-fill: ramp([clstrfinal],("#AB8FDB","#C0AAE6","#86ABE3","#A2C0EB","#B8DBD0","#8DCCB7","#FAFAB6","#FAEC84","#FFCE7A"),("A", "B", "C","D","E", "F","G", "H", "I"));polygon-opacity: 0.9;line-color: #FFFFFF;line-width: 0.4;line-opacity: 0.5;}'
        }]
      },
      function (tiles, error) {
        if (!tiles || error) {
          if (!error) {
            error = 'Empty response.';
          }
          callback(error, tiles);
        } else {
          callback(null, tiles);
        }
      });    
      
    }
​
    function callback(error, tiles) {
      if (error) {
        console.warn(error);
        return;
      }
      // the {z}/{x}/{y} tile URL returned by the cartodb.Tiles.getTiles() method
      var tileURL = tiles.tiles[0];
      map.addLayer(L.tileLayer(tileURL));
    }
​
    cartoTileLayer(callback);
  </script>
</body>
    