Looking for best practise around a feature I'm looking to implement.

I have an SVG map, which contains little blue icons where a user can click, see image below for reference:

When a user clicks any of the blue icons, I'm looking to open a little modal by it that will showcase that regions info. For example, see the below screenshot:

So, in the above instance, the user has clicked on the blue circle on the bottom, which opens a little modal for that region.

Now, in my svg, I have added id's for each blue icon (<g id="uk" ...">, but with this approach, the two options I see are:

1. Absolute positioning the modal for each region. But this sounds like a pain for responsive.
2. Writing repeat markup for the modal within the svg itself.

Neither seem like a good approach.

Any recommendations?

Here is my svg for reference: https://jsfiddle.net/6squyc7d/ (Added as jsfiddle as pasting the code puts me over the charachter limit)

CodePudding user response：

In the onclick event you can use the x and y coordinates to absolute position the modal dynamically. So actually you could create and position the modal right on the onclick function.

function openModal( evt ) {
 var intCoordX = evt.clientX;    
 var intCoordY = evt.clientY;
 // Modify modal properties
 // Open modal
}

CodePudding user response：

For each dot, you have an Id. You can add an onclick listener to each dot with an forEach loop (all Ids in an array). You can then put this code into the forEach loop:

const dot = document.getElementById('canada')
dot.addEventListener('click', event => {
  console.log(event.x, event.y)
});

In this code you get the dot with the Id (canada). Then you have the click event and you can see where the user clicked on their screen (x and y pixels).

Then you can place an absolute div with the top and left value.

.position {
  position: absolute;
  opacity: 0;
}

You can then with JS place the modal with top and left on the right position and set the opacity to 1; It will make the div show on the correct place.