Setting a map based projection in D3 with leaflet on Angular

Question

I've been trying to move a JS project that uses D3 to draw SVG elements on top of a leaflet map using geo-referenced data to Angular.

So far I've created a component that will hold the interactive map and while trying to create a d3Path object I ran into a problem apparently because when doing so TypeScript is not able to recognize that the this keyword is meant to reference the projection object instead of the component.

This is the conflicting code:

// Function on class body
function projectPoint(x, y) {
  var point = this.map.latLngToLayerPoint(new L.LatLng(y, x));
  this.stream.point(point.x, point.y); // This line is marked as error
}

// This inside another function
transform = d3.geoTransform({
  point: projectPoint
});

d3Path = d3.geoPath().projection(transform);

Which is all basically the same found on the documentation. What do you think I could be doing/understanding wrong?

(Also, I'm kind of new to TypeScript and Angular so I'm not entirely sure why I must add var to values inside a function, otherwise, it marks it as an error)

Answer 1

Create a that variable outside of the function and then use it as this . With this workaround the this reference is no more from the projection.

var that = this;
function projectPoint(x, y) {
  var point = that.map.latLngToLayerPoint(new L.LatLng(y, x));
  that.stream.point(point.x, point.y); // This line is marked as error
}