Tengo que construir un mapa interactivo en JavaScript. Leí que d3.js puede manejar imágenes SVG para agregar funciones de clic a los polígonos en el SVG.
¿Alguien sabe cómo agregar funciones de clic a este mapa SVG ( enlace )? El objetivo es hacer que se pueda hacer clic en los más de 1300 municipios de Baviera para agregar información si alguien se desplaza o hace clic en el polígono.
Si alguien tiene una mejor idea para darse cuenta de esto, entonces, por supuesto, también estaría bien.
Aquí hay un posible enfoque usando vanilla js.
Suponiendo que puede usar el svg en línea y tener los datos que desea mostrar organizados de una manera similar a esta:
const data = { municipality_name_one: { name: 'a', size: 1, population: 2, foo: 3 }, municipality_name_two: { name: 'b', size: 2, population: 3, foo: 4 }, municipality_name_n: { name: 'c', size: 3, population: 4, foo: 5 }, }; Podría dar a los polygon en ese archivo una id o algún data-field que apunte a los datos correspondientes y tener un controlador de eventos en el svg principal que muestre esos datos cuando se haga clic en el polygon , así:
svg.addEventListener('click', ({ target: { id } }) => { if (id in data) { const { name, size, population, foo } = data[id]; alert(`${name} has size of ${size} and pop. of ${population}. ${foo}`); } }); Para mostrar los datos al pasar el mouse, querrá usar un controlador de mouseover . En ambos casos, querrá considerar también el evento que debería ocultar los datos nuevamente. Esto debería ayudarte a empezar, aunque.