D3 Examples - CartoDB.js map and interactive Paris

CartoDB.js map and interactive Paris

This example uses the libraries CartoDB.js and d3.js to display two maps that are connected. If you click on the CartoDB map, the d3.js map changed its center.

First a "normal" CartoDB map is created with the cartodb.createLayer() method, but everytime that the map is clicked, the longitude and latitude values are stored in the lat and lon variables. On the other hand, a d3.js map is created by using the d3.geo.orthographic() projection to get the effect of a 3D map of the world.

Everytime that the CartoDB map is clicked, the latitude and longitude coordinates that are get from the "clicked" event are used to change the center of the d3.js map.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>D3.js Earth Globe + CartoDB.js</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
     <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <style>
​
     html,body,#map{
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        z-index: 0;        
     }
    #globe{
      position: absolute;
      right:20px;
      bottom: 20px;
      width: 200px;
      height: 200px;
      z-index: 10;
​
    }
   
    </style>
  </head>
  <body>
   <div id="globe"></div>
   <div id = "map"></div>   
   
    <script>
    var lat = 0;
    var lon = 0;
    var path;
    var proj;
    var globe;
   
    /* CartoDB.js map */
    function main() {
          
              
          //  center and zoom level
          var options = {
            center: [48.85,2.34], 
            zoom: 11,
            
          };
          // define map object
          var map = new L.Map('map', options);
          
          // add default basemap
         var basemap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
            }).addTo(map).setZIndex(0);
          
          // define CartoCSS
          var style = [
            '#world_table{',
            ' polygon-opacity: 0.8;',
            ' line-color: #FFF;',
            ' line-width: 0.5;',
            ' line-opacity: 1;',
            '}',
            '#world_table[pop2005 >= 0]{',
            '  polygon-fill:  #f0f9e8;',
            '}',
            '#world_table[pop2005 > 500]{',
            '  polygon-fill: #bae4bc;',
            '}',
            '#world_table[pop2005 > 10000]{',
            '  polygon-fill: #7bccc4;',
            '}',
            '#world_table[pop2005 > 100000000]{',
            '  polygon-fill: #43a2ca;',
            '}',
            '#world_table[pop2005 > 1000000000]{',
            '  polygon-fill: #0868ac;',
            '}'
​
          ].join('');
​
         // add CartoDB layer
          cartodb.createLayer(map, {
            user_name: 'oboix',
            type: 'cartodb',
             sublayers: [
               {
                 sql: 'select * from world_table',
                 cartocss: style
             }
           ],
         })
            .addTo(map)
            .done(function (layer){
                layer.setInteraction(true);
                layer.setInteractivity(['cartodb_id'])
                // when the CartoDB layer is clicked...
                layer.on('featureClick', function(e, latlng, pos, data) {
                        //console.log(data.cartodb_id)
                        //console.log(id);
                        var data1 = data.cartodb_id;
                        var lat = latlng[0]; 
                        var lon = latlng[1]; 
                     
                        rotateEarth(lat,lon);
                        
                      });
              })
        L.marker([48.85,2.34]).addTo(map);  
      };
      
        window.onload = main;
    //  L.marker([48.85,2.34]).addTo(map);
   
    // function that rotates the map
    var rotateEarth = function (lat, lon) {
       
       lat = lat;
       lon = lon;
​
      // transition to rotate the map
     (function transition() {
        d3.transition()
        .duration(2500)
        .tween("rotate", function() {
          var r = d3.interpolate(proj.rotate(), [-lon, -lat]);
          return function(t) {
            proj.rotate(r(t));
            svg.selectAll("path").attr("d", path);
           
          };
        })
      })()
    };
​
​
​
    /* d3.js globe map */
    var width = 200;
    var height = 200;
    // Define our SVG element outside our SQL functions
    var svg = d3.select("#globe")
      .append("svg")
      .attr("width",width)
      .attr("height",height);
            
    // Define the color scale for our choropleth
    var fill = d3.scale.linear()
        .domain([0, 500, 10000, 100000000, 1000000000])
        .range(["#edf8e9", "#bae4b3", "#74c476", "#31a354", "#006d2c"]);
​
    // projection
    proj = d3.geo.orthographic().scale(70).translate([width/2,height/2]).clipAngle(90).rotate([lon,lat]);
    
    // path
    path = d3.geo.path().projection(proj);
​
    // paint layer
    svg.append("g").attr("fill","#00248F"); 
​
    // Use D3 AJAX method to query CartoDB table and draw the globe
    globe = d3.json("https://oboix.cartodb.com/api/v2/sql?q=SELECT ST_Simplify(the_geom,0.01) as the_geom, pop2005 as population, cartodb_id FROM world_table&format=geojson", function(layer) {
          svg.select("g")
            .selectAll("path")
            .data(layer.features)
            .enter().append("path")
            .attr("fill", function(d) { 
              // Return a color from our color ramp based on population size
              return fill(d.properties.population); 
             })
            .attr("fill-opacity", "0.7")
            .attr("d", path.projection(proj))
            
​
      });
     // L.marker([48.85,2.34]).addTo(map);
​
    </script>
  </body>
</html>
    