Posicionar gráfico en una posición definida

Bier · #1 (**permalink**) 14/01/2013, 01:20

Tengo una página con los mapas de los Estados del País.
Cada Estado lo tengo en un JPG (Gráfico por cada Estado)
Deseo poder indicar la posición en que deseo que aparezca cada gráfico de cada Estado.

No lo puedo resolver con table, ya que el mapa de cada Estado es irregular, unos muy pequeños y otros más grandes.

Lo que deseo es mostrar en un color los Estados con determinada característica y en otro color a los Estados con otra característica. Todo lo tengo en PHP, solo requiero saber como posicionar cada gráfico en una posición específica.

Gracias por cualquier orientación.

pzin · #2 (**permalink**) 14/01/2013, 04:06

Tener cada estado en una imagen independiente no es lo que suele hacerse. De las formas más antiguas, es usar un mapa de coordenadas de HTML. Aunque es un trabajo de chinos hacerlo.

Lo que puedes hacer, es mediante CSS crear un contenedor con posición relativa, y luego cada estado aplicarle una posición absoluta y ajustar con top/right/bottom/left.

Luego también puedes crear un mapa en SVG, que diría yo que es la forma más de hoy de hacerlo. Mucho más dinámico que cualquier otra forma. Y tiene un buen soporte entre navegador —quitando filtros y efectos.

La última opción es más recomendable que las dos primeras. Mucho más limpio.

caricatos · #3 (**permalink**) 14/01/2013, 05:14

Hola:

Tal como comenta Bonez, es muy laborioso hacer un mapa de coordenadas, pero si tienes un fichero con colores planos (evidentemente no valdría el formato jpg), en la misma página que te han referenciado hay un apartado llamado "Otras páginas del dominio", donde hay una herramienta para reconocer áreas de la imagen... las coordenadas que se obtienen son válidas tanto para usar en un area de un mapa html, como para un tag polygon de svg; incluso para generar una imagen del tipo que quieras con las librerías GD de php y la instrucción imagepolygon o imagefillpolygon...

Lo que no quita que sea laborioso.

Saludos

Bier · #4 (**permalink**) 14/01/2013, 10:25

Muchas gracias a Bonez y caricatos por sus excelentes comentarios.

Cada estado lo puedo tener ya sea en JPG, PNG o GIF, ya que la imagen contiene información dentro de ella, además de poder estar en diferente color de acuerdo a determinados parámetros.

El SVG: Mapa de España se ve excelente, en mi caso no requiero cambiar de color con el puntero, sino que los estados sean mostrados hasta en 3 colores.

Considero lo que requiero es un mapa de coordenadas, no importa que sea mucho trabajo. ¿Donde puedo encontrar un ejemplo al respecto?

Gracias nuevamente.

caricatos · #5 (**permalink**) 14/01/2013, 16:18

Hola:

Si lo he podido hacer yo, tú también puedes hacerlo... (no vendo nada)...

Con un mapa con los límites provinciales, y con colores planos, simplemente la cargas en la página que reconoce áreas y pinchas sobre la provincia que quieras colorear. Si cambias de pestaña puedes ver si la captura fue buena; en ese caso ya tienes las coordenadas para un tag polygon en formato svg. Luego el color se pone con el atributo fill...

Si tienes las primeras coordenadas y no sabes como continuar, háznoslo saber...

Saludos

Bier · #6 (**permalink**) 14/01/2013, 18:36

Gracias por tu comentario Caricatos.

La imagen de las provincias tiene información dentro del plano, incluso con tipografía especial.

Para cada provincia se tienen 3 variantes. Fondo: verde, amarillo y rojo.

Lo que deseo es colocar cada provincia en una posición específica, es todo lo que deseo poder hacer.

Imagino que debo poder indicar a cada gráfico de provincia en la posición en pixeles en donde lo deseo colocar ¿Es esto posible?

Gracias

caricatos · #7 (**permalink**) 20/01/2013, 12:50

Hola:

Perdona que haya tardado tanto en responder (casi se me pasa...) Lo que quieres hacer se consigue con un contenedor (div) con posicionamiento absoluto y las imágenes que insertes tengan posicionamiento absoluto asignando la coordenada x al estilo left y la coordenada y al estilo top (sin olvidarte de las medidas: px)

Hemos hecho en estos foros hace algunos años una página para generar postales digitales que podrías usar, aunque solo admite unas dimensiones (width, height): Postales digitales, puedes ver un ejemplo aquí... si te fijas en la url, puedes usar diferentes porcentajes y la ubicación no se altera proporcionalmente.

Saludos

Bier · #8 (**permalink**) 20/01/2013, 15:11

Gracias Pepe Molina,

Este es el camino de lo que ando buscando.
Investigaré al respecto.

Saludos

caricatos · #9 (**permalink**) 20/01/2013, 17:02

Hola:

¡Uf!, me equivoqué... el contenedor puede tener posicionamiento absoluto, pero quise decir "relativo".

Saludos