D3 Examples - Managing Layers

xxxxxxxxxx
 
<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>
    
Managing Layers - d3.carto

hello world
