D3 Examples - TwoLayerKC

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
​
    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [39.0835893, -94.6608975],
          zoom: 9
        });
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);
        
          cartodb.createLayer(map, {
          user_name: 'jlrosch',
          type: 'cartodb',
          sublayers: [{
            sql: 'SELECT the_geom_webmercator, pvacany141 FROM finalmodel_10v5_wsplits_walldata WHERE pvacany141 > .1',
          cartocss: '#vac {polygon-fill:"#ff4400";polygon-opacity: 0.1;line-color: #c62835;line-width: 2;line-opacity: .8;}'
          }]
                                 })
          .addTo(map);   
        
        cartodb.createLayer(map, {
          user_name: 'jlrosch',
          type: 'cartodb',
          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;}'
          }]
                                 })
          .addTo(map)
        
        .done(function(layer) {
             var legend = new cdb.geo.ui.Legend({
               type: "custom",
               data: [                 
                 { name: "A", value: "#AB8FDB" },
                 { name: "B", value: "#C0AAE6" },
                 { name: "C", value: "#86ABE3" },
                 { name: "D", value: "#A2C0EB" },
                 { name: "E", value: "#B8DBD0" },
                 { name: "F", value: "#8DCCB7" },
                 { name: "G", value: "#FAFAB6" },
                 { name: "H", value: "#FAEC84" },
                 { name: "I", value: "#FFCE7A" },
               ]
             });
             $('#map').append(legend.render().el);
        });        
​
​
      };
      
      window.onload = main;
    </script>
  </body>
</html>
    