How to enable click events on features on a rotated d3.geoAirocean projection?

I am wondering how to get the coordinates under the mouse for the geoAriocean projection, especially when that map is rotated - so that I can enable click events on features on the map. I have a basic fork of a map setup - Airocean projection / Malcolm Meyer / Observable

The coordinates on the non-flipped map are close but not exact - must be something to do with the width, not too sure.


I think the problem might come from the fact that you’re using the same projection on both maps? I’ve sent a suggestion that seems to fix it

Looks like Fil’s solution works for the non-rotated map. Now to figure out how to get the coordinates for the rotated map - seems like the X/Y would be flipped - not sure.

So close…figured out the ratios needed to calculate the correct click event position for the rotated map - but it seems to be using the non rotated projection. Now just to add the point in the correct place once it is clicked - Maybe it is a new question.

My solution should work for all maps, but it is crucial that you instantiate a different projection for each map. Because the projection will only store the last scale and rotate value that were passed to it.

If you really must use the same instantiated projection, then you should save its parameters (rotate, scale and translate) and reapply them before you call projection.invert.

Let me know if you need more details.

OK - I’ll have to look back and see if this makes sense. I understand what you’re getting at. So did you confirm that the features in the rotated map can be found using the mouse position? That is where I was having trouble. I have feature queries working on the non-rotated map - but on the rotated one not so much. I split them out into two different functions for now.

Looks like I got it working - removed all extraneous code and now feature selection works on both maps! Thanks!

1 Like