0

Given coordinates like

South latitude: 50.2
North latitude: 52.01
West longitude: -60
East longitude: -57.1

I want to draw a what should be a bounding box on a orthographic map, but I'm having troubles doing so. I've found a very ellegant way of achieving that in this question, but the solution doesn't seem to work on a newer version, or I am missing something?

Here is the relevent code that I'm using:

const g = svg.append('g')
let bounds = {W: -5.0, N: 50.0, E: 10.0, S: 40.0 };
let projection = projections[1].value.precision(0.1);
let pathGenerator = d3.geoPath(projection);
let arc = d3.geoGraticule().extentMajor([[bounds.W, bounds.S], [bounds.E, bounds.N]]);
function  drawBox(params) {
  g.selectAll('.rect')
  .enter().append('path')
  .attr('class', 'rect')
  .attr('d', pathGenerator(arc.outline()))
}

Here is a live demo

expected result

Gleb
  • 107
  • 1
  • 9
  • You aren't appending the arc properly: you aren't entering any paths when you `selectAll(".rect")` because you don't assign any data to the selection. Try just `g.append("path").attr("d", pathGenerator(arc.outline()))...` – Andrew Reid Mar 05 '21 at 01:47
  • Ah. Thats what I missed. – Gleb Mar 05 '21 at 01:55
  • You could write it out as as an answer and I will mark it if you want. – Gleb Mar 05 '21 at 01:56
  • 1
    I figured the comment was either a first step or a resolution, so I didn't answer. Not on a device that is ideal for testing a solution and can't edit the linked example, will look closer tomorrow time permitting (been pretty busy lately), unless someone else beats me to it. – Andrew Reid Mar 05 '21 at 02:14
  • I have a follow up question: If i make the rectangle appear on top of the countires, I cannot click on the countries with the OnClick listener that I have in my full code. Any ideas what could be responsible for such behaviour? – Gleb Mar 05 '21 at 02:21
  • You can use `.style("pointer-events","none")` on the selection containing the rectangle to stop the rectangle from interacting with the mouse, allowing mouse events to interact with elements underneath (at the cost of not being able to use the mouse to interact with the rectangle). – Andrew Reid Mar 05 '21 at 02:23
  • The bbox "rectangle" looks right to me based on the expected result (bounding box lines follow lines of longitude and latitude and matches the graticules curves, and would, if drawn on an cylindrical projection, draw a rectangle). Is there an outstanding issue in the live demo or have you found an answer to the problem? – Andrew Reid Mar 05 '21 at 22:17
  • @AndrewReid Yes, The box appears to be correct. I've delted my other comment, as I just made a small mistake while testing. – Gleb Mar 09 '21 at 02:57

0 Answers0