var width = 1300,
    height = 960;

var projection = d3.geoMercator()
  .scale(500)
  // Center the Map to middle of shown area
  .center([10.0, 50.5])
  .translate([width / 2, height / 2]);

// ??
var path = d3.geoPath()
  .projection(projection)
  .pointRadius(2);

// Set svg width & height
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
// var g = svg.append("g");

d3.json("europe_wgs84.geojson", function(error, map_data) {
  if (error) return console.error(error);
  // var places = topojson.feature(map_data, map_data.objects.places);

  // "path" instead of ".subunit"
  svg.selectAll("path")
    .data(map_data.features)
  .enter().append("path")
    .attr("d", path)
    .attr("class", function(d) { return "label " + d.id})

  var labelPadding = 2;

  // the component used to render each label
  var textLabel = fc.layoutTextLabel()
    .padding(labelPadding)
    //.value(function(d) { return map_data.properties.iso; });
    .value(function(d) { return d.properties.iso; });

  // use simulate annealing to find minimum overlapping text label positions
  var strategy = fc.layoutGreedy();

  // create the layout that positions the labels
  var labels = fc.layoutLabel(strategy)
      .size(function(_, i, g) {
          // measure the label and add the required padding
          var textSize = d3.select(g[i])
              .select('text')
              .node()
              .getBBox();
          return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
      })
      .position(function(d) { return projection(d.geometry.coordinates); })
      .component(textLabel);

  // render!
  svg.datum(map_data.features)
       .call(labels);
});