Old school D3 from simpler times

All examples By author By category About

mpmckenna8

Full window Github gist

Mapbox tiles on a d3.globe, oh gosh

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.

This time with some of my maps from mapbox on a globe.

<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="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/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;
  }

</style>
<script>
  function makeSomeMaps() {
    map = d3.carto.map();

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

map.mode('globe');
    map.refresh();

tileLayer = d3.carto.layer.tile();
    tileLayer
    .path("mpmckenna8.map-pvvgcbh5")
    .label("Base")
    .on("load", recenter);

map.addTileLayer("mpmckenna8.map-5hpnzi5m", "Purple", "mapbox");
    map.addTileLayer("examples.map-h67hf2ic", "Streets", "mapbox", false);
    map.centerOn([-0.1275,51.507],"latlong");
    map.addTopoJSONLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.topojson","world","countries","canvas","countries");
    map.addTopoJSONLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson","toporoutes","rivers","canvas","all");

map.addCartoLayer(tileLayer);

function recenter() {
      map.centerOn([-0.1275,51.507],"latlong",5000);
    }

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

xxxxxxxxxx
 
<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="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/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;
  }
​
</style>
<script>
  function makeSomeMaps() {
    map = d3.carto.map();
​
    d3.select("#map").call(map);
​
    map.mode('globe');
    map.refresh();
​
    tileLayer = d3.carto.layer.tile();
    tileLayer
    .path("mpmckenna8.map-pvvgcbh5")
    .label("Base")
    .on("load", recenter);
​
    map.addTileLayer("mpmckenna8.map-5hpnzi5m", "Purple", "mapbox");
    map.addTileLayer("examples.map-h67hf2ic", "Streets", "mapbox", false);
    map.centerOn([-0.1275,51.507],"latlong");
    map.addTopoJSONLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.topojson","world","countries","canvas","countries");
    map.addTopoJSONLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson","toporoutes","rivers","canvas","all");
​
        map.addCartoLayer(tileLayer);
​
            function recenter() {
      map.centerOn([-0.1275,51.507],"latlong",5000);
    }
​
  }
</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