Canvas Layers - d3.carto.map

Drawing d3.carto.map layers to canvas is simple, just set the renderMode to "canvas" instead of "svg". This example shows the various map modes with canvas drawing of vector layers.

Click the button to cycle through map modes to see the difference between Transform, Projection and Globe modes.

Undersea cable geodata and armadillo projection inspiration from Peter Bakkum's example. Stamen watercolor map from http://maps.stamen.com/#toner/12/37.7706/-122.3782.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - canvas globe</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .reproject {
    position: absolute;
    z-index: 99;
    left: 50px;
    top: 250px;
  }

</style>
<script>
  function makeSomeMaps() {
map = d3.carto.map();

d3.select("#map").call(map);
    map.mode("globe");
    map.zoom().scale(350);

map.refresh();

wcLayer = d3.carto.layer.tile();
    wcLayer
    .tileType("stamen")
    .path("watercolor")
    .label("Watercolor")
    .visibility(false)

countryLayer = d3.carto.layer.geojson();
    countryLayer
    .path("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson")
    .label("Countries")
    .cssClass("countryborders")
    .renderMode("canvas");
    
    cableLayer = d3.carto.layer.geojson();
    cableLayer
    .path("subcables.geojson")
    .label("Undersea Cables")
    .cssClass("roads")
    .renderMode("canvas");

map.addCartoLayer(wcLayer).addCartoLayer(countryLayer).addCartoLayer(cableLayer);
    
    d3.select("#map").append("button").attr("class", "reproject").html("Transform").on("click", reproject);
    
    function reproject() {
      if (d3.select("button.reproject").html() == "Transform") {
        d3.select("button.reproject").html("Projection")
        map.mode("transform");
        map.refresh();
      }
      else if (d3.select("button.reproject").html() == "Globe") {
        d3.select("button.reproject").html("Transform")
        map.mode("globe");
        map.refresh();        
      }
      else {
        d3.select("button.reproject").html("Globe")
        map.mode("projection");

var projection = d3.geo.armadillo()
    .scale(237)
    .parallel(20)
    .rotate([-10, 0])
    .precision(.1);
    map.projection(projection);

map.refresh();        
      }
    }
  }
</script>
<body onload="makeSomeMaps()">
<div id="map"></div>
<footer>
<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="https://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.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>
<script src="https://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>

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

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

Modified http://d3js.org/d3.geo.projection.v0.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 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

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

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

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

https://d3js.org/d3.geo.projection.v0.min.js

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

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

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

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