Canvas Layers - d3.carto.map

readme.md

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.

d3map.css

path,circle,rect,polygon,ellipse,line {
    vector-effect: non-scaling-stroke;
}
svg, canvas {
    top: 0;
}
#d3MapZoomBox {
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 25px;
    top: 10px;
    right: 50px;
}

#d3MapZoomBox > button {
    height:25px;
    width: 25px;
    line-height: 25px;
}


.d3MapControlsBox > button {
  font-size:22px;
  font-weight:900;
  border: none;
  height:25px;
  width:25px;
  background: rgba(35,31,32,.85);
  color: white;
  padding: 0;
  cursor: pointer;
}

.d3MapControlsBox > button:hover {
  background: black;
}

#d3MapPanBox {
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 25px;
    top: 60px;
    right: 50px;
}
#d3MapPanBox > button {
    height:25px;
    width: 25px;
    line-height: 25px;
}

#d3MapPanBox > button#left {
  position: absolute;
  left: -25px;
  top: 10px;
}

#d3MapPanBox > button#right {
  position: absolute;
  right: -25px;
  top: 10px;
}

#d3MapLayerBox {
    position: relative;
    z-index: 10;
    height: 100px;
    width: 120px;
    top: 10px;
    left: 10px;
    overflow: auto;
    color: white;
    background: rgba(35,31,32,.85);
}

#d3MapLayerBox > div {
    margin: 5px;
    border: none;
}

#d3MapLayerBox ul {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
#d3MapLayerBox li {
    list-style: none;
    padding: 0;
}

#d3MapLayerBox li:hover {
    font-weight:700;
}

#d3MapLayerBox li input {
    cursor: pointer;
}

div.d3MapModal {
    position: absolute;
    z-index: 11;
    background: rgba(35,31,32,.90);
    top: 50px;
    left: 50px;
    color: white;
    max-width: 400px;
}

div.d3MapModalContent {
    width:100%;
    height: 100%;
    overflow: auto;
}

div.d3MapModalContent > p {
    padding: 0px 20px;
    margin: 5px 0;
}

div.d3MapModalContent > h1 {
    padding: 0px 20px;
    font-size: 20px;
}

div.d3MapModalArrow {
    content: "";
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid rgba(35,31,32,.90);
        position: absolute;
        bottom: -20px;
        left: 33px;
}


#d3MapSVG {

}

rect.minimap-extent {
    fill: rgba(200,255,255,0.35);
    stroke: black;
    stroke-width: 2px;
    stroke-dasharray: 5 5;
}

circle.newpoints {
    fill: black;
    stroke: red;
    stroke-width: 2px;
}

path.newfeatures {
    fill: steelblue;
    fill-opacity: .5;
    stroke: pink;
    stroke-width: 2px;
}

example.css

.countrylabel {
    font-size: 12px;
    color: red;
    text-anchor: middle;
    pointer-events: none;
    font-weight: 900;
}

.wards {
    fill: gray;
    stroke: gray;
    stroke-width: 1px;
}

.countryborders {
    fill: rgba(0,0,0,0);
    stroke-width: 1px;
    stroke: gray;
    cursor: pointer;
}

.invisible {
    fill: rgba(0,0,0,0);
    stroke-width: 0;
    stroke: black;
    cursor: pointer;
}

.countries {
    fill: none;
    stroke-width: 1px;
    stroke: black;
    opacity: 1;
}

.halffilledcountries {
    fill: rgba(224,224,209,0.5);
    stroke-width: 1px;
    stroke: black;
    opacity: 1;    
}

.filledcountries {
    fill: #E0E0D1;
    stroke-width: 1px;
    stroke: black;
    opacity: 1;
}

.francelike {
    fill: steelblue;
    stroke-width: 2px;
    stroke: lightgray;
}

.roads {
    stroke: brown;
    stroke-width: 1px;
    fill: none;
}

.rivers {
    stroke: blue;
    stroke-width: 2px;
    fill: none;
    opacity: 1;
}

.thickborders {
    stroke: brown;
    stroke-width: 2px;
    fill: none;
}

circle {
    fill: black;
    stroke: red;
}

circle.pinkcircle {
    fill: pink;
    stroke: black;
    stroke-width: 1;
    opacity: 1
}

circle.greencircle {
    fill: green;
    stroke: red;
    opacity: 1;
    stroke-width: 3;
}

  #infoBox {
    position: fixed;
    z-index: 1;
    bottom: 150px;
    right: 150px;
    background: white;
    border: 1px gray dashed;
    padding:20px;
    width: 200px;
  }

index.html

<html xmlns="http://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("http://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="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
</footer>
</body>
</html>

subcables.geojson

thumbnail.png