Mapa de España

arquidea · #1 (**permalink**) 14/01/2011, 13:25

Hola amigos, me gustaría modernizar mi web y he pensado en poner un mapa de España, para ello me preguntaba si alguien conocería algún sitio donde pueda encontrar un script prefabricado de mapas de España, he intentado buscar por google pero no encuentro nada parecido...

Gracias y un saludo!

caricatos · #2 (**permalink**) 14/01/2011, 16:35

Hola:

Posiblemente te hayas equivocado de foro... al menos con css no se me ocurre otra cosa que ponerlo como fondo de pantalla. Y lo de script tampoco ayuda.

Saludos

Gambinoh · #3 (**permalink**) 14/01/2011, 19:02

Bueno a mi sólo se me ocurre que uses google maps, cosa que hace alguna gente... pero en ese caso deberías de explicar cual es la función que quieres que desempeñe el mapa.

También puedes superponer divs con diferentes fondos (con transparencias) y jugando con el z-index o como se llame... montarte un mapa real en css que al hacer clic se mueste por encima la capa correspondiente.

Pienso que igual el usuario kseso? podría estar más preparado para decirte si es posible lo del mapa en css usando z-index, transparencias y divs superpuestos.

arquidea · #4 (**permalink**) 15/01/2011, 03:41

En realidad me gustaría hacer lo mismo que esta web:

Código HTML:

www.segundamano.es

, lo que pretendo es hacerlo igual pero he estado viendo el código fuente y no lo entiendo...

caricatos · #5 (**permalink**) 15/01/2011, 05:11

Hola:

Se trata de un mapa de imágenes sobre una imagen transparente. Si dispones de un mapa con colores planos, tú mismo lo puedes hacer desde esta página: Capturar áreas en imágenes. Estoy intentando mejorar la página, pero ahora mismo es funcional (recuerda, los colores deben ser planos).

Saludos

arquidea · #6 (**permalink**) 15/01/2011, 05:46

Me alegra que mientes esta página, ayer buscando como poder hacerlo me tope con ella, pero he provado varios mapas de colores planos separados por comunidades pero resulta que no selecciona la zona bien, es decir no se ajusta la selección con la comunidad correspondiente, no se si me entiendes...

caricatos · #7 (**permalink**) 15/01/2011, 11:08

Cita:

Iniciado por arquidea

Me alegra que mientes esta página, ayer buscando como poder hacerlo me tope con ella, pero he provado varios mapas de colores planos separados por comunidades pero resulta que no selecciona la zona bien, es decir no se ajusta la selección con la comunidad correspondiente, no se si me entiendes...

Estás seguro de que eran colores planos. Hay veces que lo parecen pero no lo son. Prueba por ejemplo con el mapa de esta página: No sé si la imagen que tiene es de libre uso. Su paleta es de solo 16 colores.
Desde la pestaña edición puedes pulsar el botón "Mostrar en Pop-Up", y el atributo title de cada casilla del pop-up muestra el valor entero del color de la misma (equivale al color del pixel).
Estoy trabajando en una versión que muestra la paleta, pero mientras la subo, puedes verla en esta otra página: Iconos online, seguro que te sorprenderá la cantidad de colores de las paletas que crees que son reducidas...

Saludos

sanxuan · #8 (**permalink**) 15/01/2011, 12:33

La página que citas utiliza un mapa de imágenes que se define mediante una etiqueta <map>.
Dentro de este mapa se definen una serie de áreas con etiquetas <area> cada una de las cuales es un enlace o hipervínculo.
En la página que has puesto de ejemplo se utilizan los atributos onmouseover y onmouseout dentro de estas áreas. Cuando pasamos el ratón por encima (onmouseover) se muestra una imagen con el contorno de la provincia correspondiente. Cuando el puntero abandona el área (onmouseout) la imagen se vuelve a ocultar.

Esta página http://www.cocemfeweb.zobyhost.com/HTML11.html te puede ayudar a comprender cómo funciona un mapa de imágenes.
Definir las áreas correspondientes puede ser complicado sin un programa como Dreamweaver, pero no imposible si dispones de cualquier programa de edición de imágenes.

Por otro lado, te harán falta conocimientos de JavaScript para hacer que se oculten o se muestren las imágenes de cada provincia.

Espero que sirva de orientación.

arquidea · #9 (**permalink**) 15/01/2011, 13:42

Hola Caricatos, he probado la imagen que había en la web que me has pasado y sigue sin funcionar, te explico lo que me ocurre para ver si le encuentras lógica:

Al poner la imagen deseada, hago doble click sobre la provincia correctamente delimitada, introduzco el nombre, y le doy a edición para comprobar como ha quedado, en este paso es cuando obervo que no ha seleccionado ni por asomo aquello que la provincia delimita.

Seguiré buscando alguna imagen que se adapte más...o tal vez lo intentaré con Dreamweaver...como bien dice sanxuan

arquidea · #10 (**permalink**) 15/01/2011, 13:45

Acabo de encontrar uno que es perfecto, funciona a la perfección!

caricatos · #11 (**permalink**) 15/01/2011, 14:02

Hola:

Yo también he notado que algo fallaba, y también encontré un sitio muy bueno para bajarse cliparts en formato svgde dominio público: Open Clipart... tiene un mapa de españa que con inkscape exporté a pnp y en un tris hice el mapa... en cuanto lo ponga bonito lo subo.

Y por cierto, cuando lo tengas visible, muéstranos el resultado.

Saludos

arquidea · #12 (**permalink**) 15/01/2011, 14:30

Tardaré bastante en rediseñar la web porque tengo muchas otras cosas pendientes que hacer, pero puedes estar seguro que en cuanto lo tenga listo lo enseñaré!!

Gracias por todo!

caricatos · #13 (**permalink**) 16/01/2011, 01:28

Hola:

Bueno, yo subí una captura: Vista previa.

Saludos

arquidea · #14 (**permalink**) 16/01/2011, 02:43

Te ha quedado realmente genial! pero tengo una duda, de donde sacas todas esas coordenadas, porque el programa solo te da las justas...con dremweaver?

caricatos · #15 (**permalink**) 16/01/2011, 02:58

Hola:

El único truco para la rapidez, es que tengo la aplicación en mi ordenador, pero en la página que te indiqué arriba es igual, aunque se tarda algo más por la respuesta del servidor: Capturar áreas en imágenes, y el truco de las coordenadas, también te lo había comentado y era usar una imagen con los colores planos: imagen.png.

Saludos

arquidea · #16 (**permalink**) 16/01/2011, 04:31

Perdona Caricatos, creo que no me he explicado bien. Yo al seleccionar una provincia, le doy un nombre y en edición me muestra la imagen de forma perfecta, pero para saber las coordenadas le doy a "detalles de la captura" y me muestra esto:

area: Barcelona
x: 563
y: 121
color original: 16711680
x mínima: 531
x máxima: 590
y mínima: 88
y máxima: 157
eje x: 560
eje y: 122
anchura máxima: 59
altura máxima: 69

Pero tu para la coordenada de la misma zona tienes todo esto:

Código HTML:

555,95,557,97,558,97,559,98,562,98,563,99,568,99,569,100,573,100,574,101,575,101,576,102,576,103,575,104,575,105,574,106,574,107,571,110,571,114,576,119,577,119,578,120,579,120,580,121,583,121,584,122,586,122,587,123,588,123,589,124,590,124,590,126,589,126,587,128,586,128,585,129,584,129,577,136,576,136,575,137,574,137,573,138,571,138,570,139,569,139,567,141,567,142,561,148,560,148,558,150,557,150,556,151,553,151,548,156,547,156,546,157,543,157,543,156,542,155,542,154,541,153,541,152,540,151,540,149,539,148,539,147,538,146,538,145,537,144,537,143,536,142,536,141,535,140,535,139,534,138,534,137,533,136,533,135,532,134,532,133,531,132,531,131,532,130,532,125,531,124,531,122,535,122,537,120,538,120,540,118,540,117,542,115,542,113,541,112,541,108,542,107,542,100,543,99,543,96,544,95,544,93,545,92,545,91,547,89,548,89,549,88,553,88,554,89,554,90,553,91,553,92,555,94

Como obtienes todas esas coordenadas?

caricatos · #17 (**permalink**) 16/01/2011, 05:48

Hola:

Por ahora está planteado para que se guarde la página desde el navegador, y luego puedes ver el código fuente y copiar la parte del mapa.

Saludos

arquidea · #18 (**permalink**) 16/01/2011, 05:57

Que grande Caricatos! que fácil era y no me había dado cuenta!!

En cuanto tenga algo definitivo te lo enseñare!!

Suerte y muchas gracias!!