0
639
ViewsAbrir modal donde se hace clic en el mapa SVG
Buscando las mejores prácticas en torno a una característica que estoy buscando implementar.
Tengo un mapa SVG , que contiene pequeños íconos azules donde un usuario puede hacer clic, vea la imagen a continuación como referencia:
Cuando un usuario hace clic en cualquiera de los íconos azules, busco abrir un pequeño modal que muestre la información de esa región. Por ejemplo, vea la siguiente captura de pantalla:
Entonces, en el ejemplo anterior, el usuario ha hecho clic en el círculo azul en la parte inferior, que abre un pequeño modal para esa región.
Ahora, en mi svg , he agregado identificaciones para cada icono azul ( <g class="mapLocations__icon" id="uk" ..." >, pero con este enfoque, las dos opciones que veo son:
- Posicionamiento absoluto del modal para cada región. Pero esto suena como un dolor para la respuesta.
- Escribiendo marcas repetidas para el modal dentro del propio
svg.
Tampoco parece un buen enfoque.
¿Alguna recomendación?
Aquí está mi svg como referencia: https://jsfiddle.net/6squyc7d/ (Agregado como jsfiddle ya que pegar el código me pone por encima del límite de caracteres)
2 answers
Answer question0
En el evento onclick , puede usar las coordenadas x e y para posicionar dinámicamente el modal de forma absoluta. Entonces, en realidad podría crear y colocar el modal directamente en la función onclick .
function openModal( evt ) { var intCoordX = evt.clientX; var intCoordY = evt.clientY; // Modify modal properties // Open modal }0
Para cada punto, tienes una identificación. Puede agregar un oyente onclick a cada punto con un bucle forEach (todos los ID en una matriz). A continuación, puede poner este código en el bucle forEach:
const dot = document.getElementById('canada') dot.addEventListener('click', event => { console.log(event.x, event.y) });En este código obtienes el punto con el Id (Canadá). Luego tiene el evento de clic y puede ver dónde hizo clic el usuario en su pantalla (píxeles x e y).
Luego puede colocar un div absoluto con el valor superior e izquierdo.
.position { position: absolute; opacity: 0; }Luego, con JS, puede colocar el modal con la parte superior e izquierda en la posición derecha y establecer la opacidad en 1; Hará que el div se muestre en el lugar correcto.