Loading Tile Layers in d3.carto.map

Loading multiple tile layers with d3.carto.map.

Each layer is represented in the layer selector and can be hidden or displayed by clicking its name or the checkbox.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - Multiple Tile Layers</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;
  }

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

.roads {
    stroke: brown;
    stroke-width: 1px;
    fill: none;
}
</style>
<script>
  function makeSomeMaps() {
    map = d3.carto.map();

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

map.centerOn([-0.1275,51.507],"latlong");

tileLayer1 = d3.carto.layer.tile();
    tileLayer1
    .path("examples.map-zgrqqx0w")
    .label("Terrain 1")
    .visibility(false);

tileLayer2 = d3.carto.layer.tile();
    tileLayer2
    .path("elijahmeeks.map-ktkeam22")
    .label("Terrain 2");

tileLayer3 = d3.carto.layer.tile();
    tileLayer3
    .path("examples.map-h67hf2ic")
    .label("Streets")
    .visibility(false);

geojsonLayer = d3.carto.layer.geojson();
    geojsonLayer
    .path("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson")
    .label("GeoBorders")
    .visibility(false)
    .cssClass("countryborders")
    .renderMode("canvas");
    
    topojsonLayer = d3.carto.layer.topojson();
    topojsonLayer
    .path("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson")
    .label("TopoRoutes")
    .visibility(false)
    .cssClass("roads")

.renderMode("canvas");

map.addCartoLayer(tileLayer1);
    map.addCartoLayer(tileLayer2);
    map.addCartoLayer(tileLayer3);
    map.addCartoLayer(topojsonLayer);
    map.addCartoLayer(geojsonLayer);

}
</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="tile.js" type="text/javascript">
</script>
<script src="d3.quadtiles.js" type="text/javascript">
</script>
<script src="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 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://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js