Old school D3 from simpler times

All examples By author By category About

syntagmatic

Full window Github gist

Hello d3.carto

A simple map example created with d3.carto.map with a tile layer, centered on Toronto.

Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>d3.carto - Basic d3.carto Map</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="d3map.css" />
</head>
<style>
html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

#map {
  height: 100%;
  width: 100%;
  position: absolute;
}

#d3MapLayerBox {
  width: 150px;
  border-radius: 2px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #222;
}
</style>
<body>
<div id="map"></div>
</body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/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>
<script>
map = d3.carto.map();

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

wcLayer = d3.carto.layer.tile();
wcLayer
  .tileType("cartodb")
  .path("light_all")
  .label("CartoDB Light")
  .visibility(true);

map.addCartoLayer(wcLayer);
map.centerOn([-79.4,43.7],"latlong");
map.setScale(10);
</script>
</html>

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>d3.carto - Basic d3.carto Map</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="d3map.css" />
</head>
<style>
html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}
​
#map {
  height: 100%;
  width: 100%;
  position: absolute;
}
​
#d3MapLayerBox {
  width: 150px;
  border-radius: 2px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #222;
}
</style>
<body>
<div id="map"></div>
</body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/tile.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js" type="text/javascript">
</script>
<script src="/emeeks/f3105fda25ff785dc5ed/example/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>
<script>
map = d3.carto.map();
​
d3.select("#map").call(map);
​
wcLayer = d3.carto.layer.tile();
wcLayer
  .tileType("cartodb")
  .path("light_all")
  .label("CartoDB Light")
  .visibility(true);
​
map.addCartoLayer(wcLayer);
map.centerOn([-79.4,43.7],"latlong");
map.setScale(10);
</script>
</html>
​
    

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

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js to /emeeks/f3105fda25ff785dc5ed/example/tile.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js to /emeeks/f3105fda25ff785dc5ed/example/d3.quadtiles.js

Updated missing url http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js to /emeeks/f3105fda25ff785dc5ed/example/d3.geo.raster.js

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://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js

https://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js

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