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.

<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 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>

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js to https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

https://d3js.org/colorbrewer.v1.min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js