CODEWITHSUNDEEP
javascriptsvgd3.jstransformleaflet
nextstopsun
nextstopsun

Reputation: 473

SVG circles don't get repositioned when zooming leaflet map

I'm using d3 to add svg circles on leaflet map. My fiddle is here http://jsfiddle.net/nextstopsun/C3U8g/

I've added a reset() function to map viewreset event to calculate transformation for svg g element containing all circles. This function is called on map viewreset event.

    svg.attr("width", topRight[0] - bottomLeft[0])
    .attr("height", bottomLeft[1] - topRight[1])
    .style("margin-left", bottomLeft[0] + "px")
    .style("margin-top", topRight[1] + "px");
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

(The code is originally from this example http://bost.ocks.org/mike/leaflet/)

I can see that the transformation parameters for g element are being recalculated, but circles aren't repositioned (or they are repositioned wrong) and don't align with the map tilelayer. Everything is ok when paning map, though. What has to be changed for proper repositioning on zooming?

Upvotes: 7

Views: 1560

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

In addition to transforming the g element that contains the circles, you also need to reset the coordinates of the circles themselves:

circles.attr("cx", function (d) { return project([d.m4312, d.m4311])[0]; })
       .attr("cy", function (d) { return project([d.m4312, d.m4311])[1]; });

Updated jsfiddle here.

Upvotes: 5

Related Questions