Old school D3 from simpler times

All examples By author By category About

emeeks

Full window Github gist

Zoom to Bounding Box - d3.carto.map

Zoom to bounding box example for d3.carto.map.

Click on any country and the map will automatically zoom to the bounding box of that country. This is done by creating an invisible vector layer that's overlaid on the tile layer, with zoomTo being called on click of any of the invisible paths.

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

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

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

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

zoomMap.setScale(2)

tileLayer = d3.carto.layer.tile();
    tileLayer
    .path("examples.map-zgrqqx0w")
    .label("Terrain");
    
    zoomMap.addCartoLayer(tileLayer);

d3.json("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson", function(error,data) {

featureLayer = d3.carto.layer.featureArray();
    featureLayer
    .features(data.features)
    .label("Countries")
    .cssClass("invisible")
    .renderMode("svg")
    .clickableFeatures(true)
    .on("load", clickToZoom);

zoomMap.addCartoLayer(featureLayer);
    
    function clickToZoom() {  
      d3.select("#map").selectAll("path.invisible").on("click", function (d) {

var path = d3.geo.path().projection(zoomMap.projection());
        zoomMap.zoomTo(path.bounds(d),"scaled",.95,2000);

})
    }
    })

}
</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="https://d3js.org/colorbrewer.v1.min.js"></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>
</footer>
</body>
</html>

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - Zoom to Bounding Box</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="example.css" />
</head>
<style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
​
  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }
​
</style>
<script>
  function makeSomeMaps() {
    zoomMap = d3.carto.map();
​
    d3.select("#map").call(zoomMap);
​
    zoomMap.setScale(2)
​
    tileLayer = d3.carto.layer.tile();
    tileLayer
    .path("examples.map-zgrqqx0w")
    .label("Terrain");
    
    zoomMap.addCartoLayer(tileLayer);
​
​
    d3.json("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/world.geojson", function(error,data) {
​
    featureLayer = d3.carto.layer.featureArray();
    featureLayer
    .features(data.features)
    .label("Countries")
    .cssClass("invisible")
    .renderMode("svg")
    .clickableFeatures(true)
    .on("load", clickToZoom);
​
    zoomMap.addCartoLayer(featureLayer);
    
    function clickToZoom() {  
      d3.select("#map").selectAll("path.invisible").on("click", function (d) {
​
        var path = d3.geo.path().projection(zoomMap.projection());
        zoomMap.zoomTo(path.bounds(d),"scaled",.95,2000);
​
      })
    }
    })
​
  }
</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="https://d3js.org/colorbrewer.v1.min.js"></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>
</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

Modified http://d3js.org/colorbrewer.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

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://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://d3js.org/colorbrewer.v1.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