Managing Layers - d3.carto

A map example created with d3.carto.map that loads feature, tile and point layers using the various methods available in d3.carto.

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

#map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  
  .country {
    fill-opacity: .25;
    fill: #4682B4;
    stroke-opacity: 1;
    stroke: black;
    stroke-width: 2px;
  }

.country-gray {
    opacity: .25;
    fill: lightgray;
    stroke: lightgray;
    stroke-width: 1;
  }

.country-red {
    fill-opacity: .25;
    fill: darkred;
    stroke: black;
    stroke-width: 1;
  }
  
  .capital {
    fill: white;
    stroke: black;
    stroke-width: 2px;
  }
</style>
<script>
    function makeSomeMaps() {
    map = d3.carto.map();

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

terrainLayer = d3.carto.layer.tile();
    
    terrainLayer
    .path("elijahmeeks.map-azn21pbi")
    .label("Terrain");

countryLayer = d3.carto.layer.topojson();
    
    countryLayer.path("world.topojson")
    .label("Countries")
    .renderMode("canvas")
    .specificFeature("world")
    .cssClass("country-gray")
    .on("load", showHighGDP)
    .visibility(false);
    
    capitalLayer = d3.carto.layer.csv();
    capitalLayer
    .path("worldcapitals.csv")
    .label("Capitals")
    .cssClass("capital")
    .renderMode("svg")
    .markerSize(3)
    .x("x")
    .y("y")
    .clickableFeatures(true)
    .on("load", loadXYArray);

map.addCartoLayer(terrainLayer)
    map.addCartoLayer(countryLayer)
    .addCartoLayer(capitalLayer);
    map.setScale(2);
    
    function loadXYArray() {
    d3.csv("worldcapitals.csv", highPopCapitals);
    
    function highPopCapitals(data) {
      highPop = data.filter(function(d) {return d.population > 3000000});
      
      highPopCapitals = d3.carto.layer.xyArray();
      
      highPopCapitals
      .features(highPop)
      .label("High Population Capitals")
      .cssClass("capital")
      .renderMode("svg")
      .markerSize(10)
      .x("x")
      .y("y")
      .clickableFeatures(true);
      
      map.addCartoLayer(highPopCapitals);
    }
    }
    
    function showHighGDP() {
      highGDPCountries = countryLayer.features().filter(function(d) {return d.properties.gdp > 1000});
      
      highGDPLayer = d3.carto.layer.featureArray();
      
      highGDPLayer
      .features(highGDPCountries)
    .label("High GDP")
    .renderMode("svg")
    .cssClass("country-red")
    .clickableFeatures(true);
    
    map.addCartoLayer(highGDPLayer)
    }

}
</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://cdn.jsdelivr.net/gh/emeeks/d3-carto-map/d3.carto.map.js" type="text/javascript">
</script>
<script src="https://d3js.org/topojson.v1.min.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
</footer>
</body>
</html>

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

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

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

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

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

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

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