block by emeeks e6f72fbca42e77be0eb3

Canvas Styling (Transform) - d3.carto

Full Screen

Canvas element styling with d3.carto.map does not use d3.selectAll like SVG element styling because these aren’t SVG elements.

This relies on using cartoLayer.markerColor() and cartoLayer.markerSize() and setting them to function based on the data. If you don’t set markerColor, then it will rely on CSS styling of the associated class.

This example is also available as a globe.

index.html

<html xmlns="//www.w3.org/1999/xhtml">
<head>
  <title>Improved Canvas (Transform) - d3.carto</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .region {
    stroke: white;
  }
  
</style>
<script>

  function makeSomeMaps() {
    pathSource = 0;

    map = d3.carto.map();
    
    var regionColor = ["lightgray","#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"];
    var colorScale = d3.scale.linear().domain([0,5,26]).range(["green","yellow", "red"])
    var sizeScale = d3.scale.linear().domain([50,1000]).range([1,6])

    d3.select("#map").call(map);

    map.centerOn([-88,39],"latlong");
    map.setScale(2);

    wcLayer = d3.carto.layer.tile();
    wcLayer
    .tileType("mapbox")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
    .visibility(true)

    regionLayer = d3.carto.layer.geojson();
    regionLayer
    .path("ecoregions.json")
    .label("Regions")
    .cssClass("region")
    .renderMode("canvas")
    .markerColor(function(d) {return regionColor[d.a]})
    .clickableFeatures(true);
    
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("all_sites.csv")
    .label("Cities")
    .cssClass("pinkcircle")
    .renderMode("canvas")
    .markerSize(function(d) {return sizeScale(d.pop)})
    .markerColor(function(d) {return colorScale(d.capacity)})
    .x(function(d) {return d.xcoord})
    .y(function(d) {return d.ycoord});
    
    map.addCartoLayer(wcLayer).addCartoLayer(regionLayer).addCartoLayer(csvLayer);
    map.refresh();

  }
</script>
<body onload="makeSomeMaps()">
<div id="map">
</div>
<footer>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="//d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="//d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="//bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="//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>

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