D3 Examples - Map Modes and Styling

Map Modes and Styling - d3.carto
This shows how you can override the CSS for panning, zooming and layer selector elements with d3.carto.map. It also provides examples of the various map modes and zooming functions and gives an example of how to create a legend.
Notice that this legend is the one from my book D3.js in Action and not the more functional (but less readable) one that I made at d3.svg.legend.
xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto - Tutorial 3</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="tutorial3.css" />
</head>
<script>
      function makeSomeMaps() {
        
    var colorScale = d3.scale.quantize().domain([50,1000]).range(colorbrewer.Reds[5])
    
    legend = d3.svg.legend().unitLabel("thousands")
    .formatter(d3.format(".0f"))
    .title("Population")
    .scale(colorScale)
​
  d3.select("#legend").append("svg").style("width", "100%").style("height", "100%").append("g").attr("transform", "translate(20,35)").attr("class", "legend").call(legend);
​
    map = d3.carto.map();
    randomLayerArray = [];
​
    d3.select("#map").call(map);
​
    d3.select("#d3MapPanBox > #left").html("&#9664;")
    d3.select("#d3MapPanBox > #right").html("&#9654;")
    d3.select("#d3MapPanBox > #up").html("&#9650;")
    d3.select("#d3MapPanBox > #down").html("&#9660;")
​
    tileLayer = d3.carto.layer();
    tileLayer
    .type("tile")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
​
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("all_sites.csv")
    .label("CSV Points")
    .cssClass("point")
    .renderMode("canvas")
    .markerSize(2)
    .markerColor(function(d) {return colorScale(d.pop)})
    .strokeColor("black")
    .x("xcoord")
    .y("ycoord");
​
    map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
​
    function setScaleExample() {
      map.setScale(2);
    }
    function centerOnExample() {
      map.centerOn([110,30],"latlong");
    }
    function centerOnTransitionExample() {
      map.centerOn([-110,30],"latlong",5000);
    }
    function zoomToExample() {
      map.zoomTo([[60,29],[75,38]],"latlong",.9);
    }
    function zoomToTransitionExample() {
      map.zoomTo([[30,-1],[45,8]],"latlong",.9,5000);
    }
    function manualScaleTranslateExample() {
      map.zoom().scale(57897).translate([9885, -2150])
    }
    
    function reprojectedCenter() {
      map.mode("globe");
      projection = d3.geo.conicEquidistant()
    .scale(350)
    .translate([350,600]);
      map.projection(projection);
      map.refresh();
    }
​
    
    function createRandomDataLayer() {
      var randomPoints = d3.range(100).map(function() {return {x: 180 - (Math.random() * 360), y: 90 - (Math.random() * 180)}});
​
      var randomRender = "canvas"
      
      if (Math.random() > .5) {
        randomRender = "svg"
      }
      var newRandomLayer = d3.carto.layer.xyArray();
      
      newRandomLayer
      .features(randomPoints)
      .x("x")
      .y("y")
      .label("Random Layer")
      .renderMode(randomRender)
      .cssClass("random" + randomRender)
      
      map.addCartoLayer(newRandomLayer);
      randomLayerArray.push(newRandomLayer);
​
    }
​
    function updateRandomDataLayer() {
​
      if (randomLayerArray.length > 0) {
        var randomLayer = randomLayerArray[0];
        var randomLayerFeatures = randomLayer.features();
        randomLayerFeatures.splice(50,50);
        for (var x in randomLayerFeatures) {
          randomLayerFeatures[x].x = 180 - (Math.random() * 360);
        }
        console.log(randomLayerFeatures.length)
        randomLayer.features(randomLayerFeatures);
        map.refreshCartoLayer(randomLayer)
​
      }
    }
    
    function deleteRandomDataLayer() {
      if (randomLayerArray.length > 0) {
        map.deleteCartoLayer(randomLayerArray[0]);
        map.refresh();
        randomLayerArray.splice(0,1);
      }
    }
​
    d3.select("#buttons").append("button").html("setScale").on("click", setScaleExample)
    d3.select("#buttons").append("button").html("centerOn (Point)").on("click", centerOnExample)
    d3.select("#buttons").append("button").html("centerOn with Transition").on("click", centerOnTransitionExample)
    d3.select("#buttons").append("button").html("zoomTo (Bounding Box)").on("click", zoomToExample)
    d3.select("#buttons").append("button").html("zoomTo with Transition").on("click", zoomToTransitionExample)
    d3.select("#buttons").append("button").html("Manual Scale and Translate").on("click", manualScaleTranslateExample)
    d3.select("#buttons").append("button").html("Globe Mode").on("click", function() {map.mode("globe");})
    d3.select("#buttons").append("button").html("Projection Mode").on("click", function() {map.mode("projection");})
    d3.select("#buttons").append("button").html("Standard Mode").on("click", function() {map.mode("transform");})
    d3.select("#buttons").append("button").html("Projected Center Manipulation").on("click", reprojectedCenter)
    d3.select("#buttons").append("button").html("Add a Random Data Layer").on("click", createRandomDataLayer)
    d3.select("#buttons").append("button").html("Change a Random Data Layer").on("click", updateRandomDataLayer)
    d3.select("#buttons").append("button").html("Delete a Random Data Layer").on("click", deleteRandomDataLayer)
    
  }
  
</script>
<body onload="makeSomeMaps()">
<div id="buttons"></div>
<div id="map"></div>
<div id="legend"></div>
<footer>
<script src="https://d3js.org/colorbrewer.v1.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="legend.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js" type="text/javascript">
</script>
</footer>
</body>
</html>
    