Old school D3 from simpler times

All examples By author By category About

emeeks

Full window Github gist

Center on a Point - d3.carto.map

How to center on a point with d3.carto.map.

The centerOn function can take "latlong" coordinates, which are latitude and longitude in XY order, or "scaled" coordinates, which are XY coordinates in the scaled space on the map. You can get latlong from d3.geo.centroid() and scaled from d3.geo.path.centroid().

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - Center on a Point</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() {
    map = d3.carto.map();

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

map.addTileLayer("examples.map-zgrqqx0w", "Base", "mapbox", false);
    map.centerOn([-0.1275,51.507],"latlong",5000);
    map.addTopoJSONLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson","TopoJSON","roads","svg","all");
    map.addCSVLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_points.csv","CSV Points","pinkcircle",2,"svg","x","y");

}
</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 - Center on a Point</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() {
    map = d3.carto.map();
​
    d3.select("#map").call(map);
​
    map.addTileLayer("examples.map-zgrqqx0w", "Base", "mapbox", false);
    map.centerOn([-0.1275,51.507],"latlong",5000);
    map.addTopoJSONLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_routes.topojson","TopoJSON","roads","svg","all");
    map.addCSVLayer("https://bl.ocks.org/emeeks/raw/c970c9ee3e242e90004b/sample_points.csv","CSV Points","pinkcircle",2,"svg","x","y");
​
  }
</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