Usar Canvas o SVG?

[Mikimoto74]

Hola,

tengo que implementar una aplicación (para una intranet, no de forma pública), en la cuál la interfaz gráfica ha de ser un menú superior y un mapamundi.

Dependiendo de la opción de menú escogida, al clicar en un país, que debería remarcarse al pasar por encima, se debe hacer zoom en él, o esconder el resto de países, y mostrar la información referente a ese país acorde con la opción de menú elegida. Si además hay definidas regiones para ese país, se mostrarán las regiones, para poder seleccionarlas individualmente y mostrar la misma información pero por región.

He visto varias cosas hechas por ahí, pero no sé qué camino tomar. Si usar canvas de HTML5 + jQuery, si usar SVG, o usar HTML simple + jQuery... En una ocasión hice algo con un mapa de España por provincias con el tag <map> de HTML y un plugin de jQuery llamado map hilight, pero quizás para lo que quiero sea más sencillo lanzarse a aprender a usar canvas o SVG, los cuáles todavía no he usado.

Qué me aconsejaríais? De paso, si alguien conoce un buen framework, que no sea demasiado complejo, para manejar mapas en HTML, soy todo oídos.

Saludos!

[caricatos]

Hola:

Yo no uso librerías javascript, pero tengo algo hecho con mapas, de forma gráfica (y simple javascript) puedes ver este Mapa de España, y también lo repetí en svg: SVG: Mapa de España.

He visto cosas hechas en canvas, pero no las he usado aún... y con svg tan solo he visto algunas figuras y poco más, pero me parece muy práctico.

En la página hay también una aplicación que obtiene los polígonos con colores planos de las imágenes, que pueden ayudar mucho.

Saludos

[Mikimoto74]

Hola Caricatos, gracias por responder.

Sí, yo también hice justo un mapa de España con rollover usando un plugin de jQuery llamado Map Hilight y los viejos tags <map> y <area>.

He estado indagando por ahí y al parecer esta implementación no tiene pinta de ser muy recomendada por gente con mucha experiencia acerca de este tema. Vamos, que con esto del HTML5, se ven cosas increíbles hechas con canvas y/o SVG, o incluso mezclándolas.

Por lo que he visto, para creación de mapas es más recomendable SVG por el tema de la escalabilidad de los gráficos vectoriales. Pero siempre he oído hablar maravillas de canvas y sin embargo SVG está ahí casi desde que está XML pero no ha hecho nunca demasiado ruido (yo hasta ahora lo había usado en dos o tres ocasiones para importar algún gráfico vectorial a Freehand o Illustrator).

Además, si no entendí mal de lo que ví por ahí, a la hora de interactuar con las regiones de un mapa usando javascript, es más difícil hacerlo con canvas no? Los elementos del SVG formarán parte del DOM, pero los gráficos de canvas, si no me equivoco, son opacos a javascript.

No se... de momento creo que me decantaré por SVG, si alguien no me recomienda lo contrario.

[emprear]

No descartes el uso de css, he visto cosas bastante interesantes, obviamente hay que analizarlas en función de tu objetivo, que desde ya, a primera vista, muy simple tampoco es.

http://www.noobcube.com/tutorials/ht...inners-guide-/
http://www.tankedup-imaging.com/css_dev/rollover.html
http://www.frankmanno.com/ideas/css-imagemap/

Saludos

[Rafael]

Emprear, lo que noto es que con estos ejemplos css... mejor dicho divs, solo ocupan áreas cuadradas, lo que nos lleva a la exactitud o detalle del mapa.

Ahora. Los Tags area y map no son viejos (ni obsoletos ni depreciados), siguen presentes en la (WD) especificación html5.

De que puede tener un status mouseover con JavaScript puede. Pero como sustituye completamente el img original supongo que es lo que le da la sensación de primitivo. A ver si alguien por ahí descubre un Jquery para sustituir zonas parciales de una imagen.

Los 4 apectos que creo, a tomar en cuenta son
1) Exactitud/detalle de las zonas seleccionables.
2) El status/interacción Mouseover/click.
3) El detalle de la imagen/mapa.
4) Compatibilidad.

Quizá con esto se pueda decidir o encontrar alternativas.

Los candidatos son:
a) Map
b) SVG
c) Canvas
d) Divs/css

Por ejemplo.
SVG queda atrás (creo) en detalle de la imagen y en compatibilidad.
Los divs quedan atrás en exactitud y tienen cierto riesgo de descuadrarse.
De canvas no tengo ni idea... sería bueno ver alternativas.
Map se queda atrás en interacción mouseover, a menos que haya esteroides Jquery por ahí.

Interesante tema...

[emprear]

lo mencioné como una alternativa a analizar. Todo dependerá de la compplejidad requerida.
Y desde ya que con jQuery hay, y muy buenos

http://www.outsharked.com/imagemapster/
http://davidlynch.org/projects/maphilight/docs/
y seguramente mejores si se busca con más detalle

[Panino5001]

Yo te sugiero svg. He aquí un gran ejemplo: http://mapoteca.educ.ar/mapa/republica-argentina/

[Mikimoto74]

Hola de nuevo y gracias por vuestros aportes.

A decir verdad, el ejemplo que mencioné que hice hace tiempo con <map> y el plugin jQuery llamado Map Hilight recuerdo ahora que hacía uso de canvas para el resaltado de las provincias. El canvas era transparente y situado por encima del mapa, y al hacer un rollover se dibujaba un polígono semitransparente encima del área (provincia) sobre la cuál estaba el cursor, con los mismos puntos, para que coincidiera.

A parte de eso, estoy ya metido en intentar hacerlo con SVG porque frente a canvas me parece más sencillo a la hora de moverlo con Javascript, y más que nada no uso <map> por meterme ya de lleno en algo que parece tener más futuro.

Lo único es que encuentro mucha información, pero muy confusa. Muchas herramientas, frameworks, plugins, que me han dejado un poco apabullado sin saber por dónde tirar

Está el caso de los frameworks de mapas open source como OpenLayers (el cuál usa tu ejemplo Panino), OpenStreetMap, Cartagen, Tile5, Leaflet, el propio Google Maps..., pero ofrecen demasiado y son muy complejas para lo que necesito: un mapa con países sin ninguna información cartográfica adicional, con solo dos o tres niveles de zoom (a nivel de continente, de país, o de región en algunos casos), y con interacción con el usuario . Luego he indagado más en una librería que ya conocía pero que nunca había estudiado que es Raphaël, con la cuál entre otras cosas puedes manejar más cómodamente un mapa SVG que usando javascript "a pelo". También he estado mirando otra llamada KineticJS, que se basa en canvas 100%, aunque te ofrece interacción con los vectores dibujados en el canvas: ejemplo.

Pero por sencillez y porque ya conozco bastante bien jQuery, de momento me estoy decantando por un plugin de jQuery llamado jVectorMap