3

Following this example and Choropleth from Mike's site I am trying to get:

image + vector + choropleth = my map

As you can see I lost the zoom capability on the vector layer. I have been trying differents things, but nothing works.

How can I fix that?

2
  • Thanks for the advice. I've corrected. But the problem continues
    – Klaujesi
    Feb 9, 2015 at 16:12
  • @BelowtheRadar with all due respect, those suggestions are not helpful. OP's issue does not have anything to do with having valid markup, script tags are not required to go in a page's head and you do not need to always put svg elements inside divs. Feb 9, 2015 at 21:14

1 Answer 1

3

You need to update your paths in the zoomed function. The original example does this on line 68.

The simplest thing to do is to use the counties variable store a reference to the selection of paths:

counties = topojson.feature(us, us.objects.barrios);
counties = svg.selectAll("path")
    .data(counties.features)
  .enter()
    .append("path")
    .attr("class","county feature")
    .attr("d", path);

Inside of the zoomed function, after the projection is updated, put:

counties.attr("d", path);

And your counties will update accordingly when the map zooms.

Here's all the JS when I was running locally:

var width = 900;
height = 500;

var color = d3.scale.threshold()
  .domain([3, 6, 9, 12, 15, 18, 21, 24, 27])
  .range(["#fff7f3", "#fde0dd", "#fcc5c0", "#fa9fb5", "#f768a1", "#dd3497", "#ae017e", "#7a0177", "#49006a"]);

var tile = d3.geo.tile()
  .size([width, height]);

var projection = d3.geo.mercator()
  .scale((1 << 20) / 2 / Math.PI)
  .translate([width / 2, height / 2]);

var center = projection([-58.8, -27.48]);

var path = d3.geo.path()
  .projection(projection);

var zoom = d3.behavior.zoom()
  .scale(projection.scale() * 2 * Math.PI)
  .scaleExtent([1 << 19, 1 << 22])
  .translate([width - center[0], height - center[1]])
  .on("zoom", zoomed);

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

var raster = svg.append("g");

var vector = svg.append("path");
var counties, tiles;

d3.json("d/barrios_1.topojson", function(error, us) {
  svg.call(zoom);
  //vector.datum(topojson.feature(us, us.objects.barrios));
  tiles = tile
    .scale(zoom.scale())
    .translate(zoom.translate())
    ();
  projection
    .scale(zoom.scale() / 2 / Math.PI)
    .translate(zoom.translate());

  counties = topojson.feature(us, us.objects.barrios);
  counties = svg.selectAll("path")
    .data(counties.features)
    .enter()
    .append("path")
    .attr("class", "county feature")
    .attr("d", path);
  //.on("click", clicked);

  console.log("counties", counties);

  svg.selectAll(".county")
    .style("fill", function(d) {
      return color(+d.properties.casos);
    })
    .append("svg:title")
    .text(function(d) {
      return d.properties.Name + " - " + d.properties.casos + " caso/s";
    });

  zoomed();
});

function zoomed() {
  //var
  svg.call(zoom);
  tiles = tile
    .scale(zoom.scale())
    .translate(zoom.translate())
    ();

  projection
    .scale(zoom.scale() / 2 / Math.PI)
    .translate(zoom.translate());

  counties.attr("d", path);

  svg.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");

  var image = raster
    .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
    .selectAll("image")
    .data(tiles, function(d) {
      return d;
    });

  image.exit()
    .remove();

  image.enter().append("image")
    .attr("xlink:href", function(d) {
      return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/examples.map-i86nkdio/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";
    })
    .attr("width", 1)
    .attr("height", 1)
    .attr("x", function(d) {
      return d[0];
    })
    .attr("y", function(d) {
      return d[1];
    });
}
2
  • Thanks @Derek Swingley it's works like a charm. Thanks for posting entire code so people after me has a good reference.-
    – Klaujesi
    Feb 9, 2015 at 22:15
  • @Klaujesi you're welcome, glad I could help Feb 9, 2015 at 22:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.