D3 Examples - addXYLayer

addXYLayer - d3.carto.map

Labeling features using addXYLayer d3.carto.map.

You can add any array of objects with XY data by using d3.carto.layer.xyArray(). Here an array of centroid objects is made for the paths and then added to the map to display labels. Notice that the paths are added using addFeatureLayer because using addTopoJSON would load asynchronously and not have the data available to make the array for addXYLayer.

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>d3.carto.map - Label Features</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;
  }
​
</style>
<script>
  function makeSomeMaps() {
    zoomMap = d3.carto.map();
​
    d3.select("#map").call(zoomMap);
​
    zoomMap.setScale(2)
​
    tileLayer = d3.carto.layer.tile();
    tileLayer
    .path("elijahmeeks.map-ktkeam22")
    .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);
    
    function clickToZoom() {
      d3.select("#map").selectAll("path.countryborders").on("click", function (d) {
​
        var path = d3.geo.path().projection(zoomMap.projection());
        zoomMap.zoomTo(path.bounds(d),"scaled",.95,2000);
​
      })
    }
​
      labelPoints = [];
​
      for (x in data.features) {
        var center = d3.geo.centroid(data.features[x]);
        var newPoint = {label: data.features[x].properties.name, x: center[0], y: center[1]}
        labelPoints.push(newPoint)
      }
      
    xyLayer = d3.carto.layer.xyArray();
    xyLayer
    .features(data.features)
    .label("Labels")
    .cssClass("countrylabel")
    .renderMode("svg")
    .x("x")
    .y("y")
    .markerSize(10)
    .clickableFeatures(true);
    
    zoomMap.addCartoLayer(xyLayer)
      
      d3.selectAll("g.countrylabel").append("text")
      .text(function(d) {return d.label});
      d3.selectAll("circle.countrylabel").remove();
      zoomMap.refresh();
​
​
    })
​
  }
</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>
    