Triggering modal activation upon clicking on the SVG map

Question

Triggering modal activation upon clicking on the SVG map

Seeking advice on the best way to implement a new feature.

I have an SVG map with tiny blue icons that users can click on. You can refer to the image below for clarity:

https://i.sstatic.net/XHry9.png

Whenever a user clicks on any of these blue icons, I want a small modal to pop up showing information about that specific region. Take a look at the screenshot below as an example:

https://i.sstatic.net/vRv3X.png

For instance, in the screenshot above, clicking on the blue circle at the bottom brings up a modal displaying details about that particular region.

In my svg, I've assigned ids to each blue icon (

<g class="mapLocations__icon" id="uk" ..."

>. However, I'm currently contemplating two options:

Absolutely positioning the modals for each region, but this could be challenging to make responsive.
Repeating markup for the modal within the svg itself.

Both approaches don't seem ideal to me.

Any suggestions on how to proceed?

Here is the link to view my svg code: https://jsfiddle.net/6squyc7d/ (Shared via jsfiddle due to character limit when pasted here)

javascript html jquery css svg

Answer 1

Answer №1

When the onclick event is triggered, you have the ability to leverage the x and y coordinates in order to dynamically position the modal. This means that you can actually create and place the modal directly within the onclick function.

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

Answer 2

When the onclick event is triggered, you have the ability to leverage the x and y coordinates in order to dynamically position the modal. This means that you can actually create and place the modal directly within the onclick function.

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

Answer 3

Answer №2

Each dot is assigned a unique Id. Using a forEach loop, you can add an onclick listener to each dot by iterating through all the Ids in an array. The code snippet for adding this functionality within the forEach loop is as follows:

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

This code snippet retrieves the dot with the Id 'canada'. Upon clicking on the dot, the x and y coordinates of the click event are logged, indicating where the user clicked on their screen.

To display a popup modal at the clicked location, you can utilize an absolute positioned div with specified top and left values:

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

Using JavaScript, you can dynamically position the modal by setting the appropriate top and left values, while changing the opacity to 1 to make it visible at the correct position upon click.

Answer 4

Each dot is assigned a unique Id. Using a forEach loop, you can add an onclick listener to each dot by iterating through all the Ids in an array. The code snippet for adding this functionality within the forEach loop is as follows:

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

This code snippet retrieves the dot with the Id 'canada'. Upon clicking on the dot, the x and y coordinates of the click event are logged, indicating where the user clicked on their screen.

To display a popup modal at the clicked location, you can utilize an absolute positioned div with specified top and left values:

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

Using JavaScript, you can dynamically position the modal by setting the appropriate top and left values, while changing the opacity to 1 to make it visible at the correct position upon click.

Triggering modal activation upon clicking on the SVG map

Answer №1

Answer №2

Similar questions

Transform your Angular Framework Application into a desktop application with the power of Electron

D3 bar chart displaying identical values but with varying data sets

Utilizing JavaScript to eliminate objects from a collection and showcase a refreshed arrangement

Is there an issue with hover not working for MUI styled component when focused?

Loop through each item in order to modify the text within the pop-up using a for loop

Struggling to eliminate the remaining vertical paddings within the <div> element while utilizing Bootstrap 5

How can I retrieve the page title in a React app when using jest and enzyme for testing purposes?

The setState function in React.js fails to properly assign data

pressing the switch will adjust the size of the container

Struggling to alter Material-UI theme styles

The clearInterval function seems to be malfunctioning in this particular piece of code

Customize the Vuetify 2.0 sass variable $heading-font-family

Using React Native to dynamically change color based on API response

Error message: "Unable to locate module for split-pane-react in Jest"

Avoid using the Router with the Search component in React JS

The outcome of Contains function is coming back as negative

Issue detected in rxjs-compat operator's shareReplay file at line 2, column 10:

Adjusting image size to accommodate responsive column cell using CSS

Node.js MongoDB Error: db.open is undefined

Generating progress bar in Javascript while exporting CSV fileCan JavaScript export CSV and