Reset svg container to current view

Question

I want to add SVG-overlays to a leaflet map. I add a SVG-container to the overlay pane where I append my SVGs. This works however my SVG-container keeps scrolling with the map. To display my SVGs properly I want the container to always span over my current view of the map (from the top-left to the bottom-right of my current map view).

How can I reset the origin of the svg-container to the top-left of my current map view?

This is my code snippet, it shows the directive for the SVG-overlay. I am using the leaflet-angular-directive:

angular.module('app')
  .directive('cluster', ['lodash', function() {
    return {
      link: function(scope, element, attrs, leafletController) {

        scope.$watch('cluster', function(newCluster, oldCluster) {
          leafletController.getMap()
            .then(function(map) {
              return scope.render(newCluster, map);
            });
        });

        scope.render = function(cluster, map) {
          var overlayPane = d3.select(map.getPanes().overlayPane);

          var svg = overlayPane.append("svg").attr("class", "leaflet-zoom-hide cluster");
          var g = svg.append("g");

          // append features (circles) to g
          // ...

          map.on("viewreset", update);
          update();

          function update() {
            // update svg
            svg.attr("width", map.getSize().x);
            svg.attr("height", map.getSize().y);

            // update features
            // ...
          }
        };
      }
    };
  }]);

Answer 1

This is how I fixed it:

The size of the svg container is the bounds of all circles. You also have to include the radius of your circles as offset since the bounds of a circle depends on its center.

/* Update size and scaling of svgs on mapchange */
function update() {
  var bounds = getBounds(features);
  var offset = 20 / 1400 * Math.pow(2, map.getZoom());

  var width = Math.abs((bounds.max[0] - bounds.min[0]) + 2 * radius);
  var height = Math.abs((bounds.max[1] - bounds.min[1]) + 2 * radius);
  var left = bounds.min[0] - radius;
  var top = bounds.min[1] - radius;

  svg.attr('width', width).attr('height', height)
    .style("left", left + 'px')
    .style("top", top + 'px');

  g .attr("transform", "translate(" + -bounds.min[0] + "," + -bounds.min[1] + ")");

  g.selectAll('circle')
    .attr("cx", function(d) { return map.latLngToLayerPoint(d.LatLng).x + radius; })
    .attr("cy", function(d) { return map.latLngToLayerPoint(d.LatLng).y + radius;})
    .attr("r", radius);
}

/* Get the min and max bounds of all features */
function getBounds(features) {
  var bounds = { min: [999, 999], max: [-999, -999] };

  _.each(features, function(element) {
    var point = map.latLngToLayerPoint(element.LatLng);

    bounds.min[0] = Math.min(bounds.min[0], point.x);
    bounds.min[1] = Math.min(bounds.min[1], point.y);
    bounds.max[0] = Math.max(bounds.max[0], point.x);
    bounds.max[1] = Math.max(bounds.max[1], point.y);
  });

  return bounds;
}