D3 Examples - d3 geographic tile sets

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="d3-slippy.js"></script> 
<script>
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;
​
    // svg
    var svg = d3.select("svg");
​
    // Get list of tilesets:
    var tilesets = d3.geoSlippy().tileSet(); 
      
    // Drop down menu for tilesets:
    var select = d3.select("body")
      .append("select")
      .attr("style","position: absolute; top: 0; left: 0; z-index: 0");
    
    var options = select.selectAll("option")
      .data(tilesets)
      .enter()
      .append("option")
      .text(function(d) { return d; })
      .attr("style","position: absolute; top: 10px; left 10px; z-index: 999");
    
    // Set up slippy map initially:
    var slippy = d3.geoSlippy()
      .size(svg)
      .tileSet("CartoDB_Positron")
      .wrap(true);
    
    // Set up zoom:
    var zoom = d3.zoom()
      .on("zoom",zoomed)        
      
    // Create g elements for tiles and vectors:
    var tiles = svg.append("g");
    var vector = svg.append("g");
    
    // Append attribution:
    var text = svg.append("text")
      .attr("x", 10)
      .attr("y", 490);
    
    // Add features:
    var path = d3.geoPath().projection(slippy.projection());
    var features = vector.selectAll("path")
      .data(topojson.feature(world,world.objects.land).features)
      .enter()
      .append("path")
      .attr("fill","none")
      .attr("stroke","black")
      .attr("stroke-width",1)
  
    svg
      .call(zoom)
      .call(zoom.transform, slippy.zoomIdentity());   
​
    // Apply zoom
    function zoomed() {
      // Update projection.
      slippy.zoomTransform(d3.event.transform)
  
      // Update raster tiles:
      tiles.call(slippy.tile);
      path = d3.geoPath().projection(slippy.projection());
      features.attr("d",path);
      
      text.text(slippy.attribution());
    }         
​
    // Cycle through tilesets:
    setInterval(showcase, 16000);
    
    var index = 0;
    function showcase( ) {
        index++;
        var tileset = options
          .property("selected",false)
          .filter(function(d,i) { return i == index%tilesets.length })
          .property("selected",true)
          .text();
        
        slippy.tileSet(tileset);
        svg.call(zoom.transform, slippy.zoomIdentity());     
    }   
    
    select.on("change", function(d) {
        // assign new tileset and redraw:
        slippy.tileSet(this.value);
        svg.call(zoom.transform, slippy.zoomIdentity());      
    })
    
    
    
});
​
​
</script>
    