2010-04-26 25 views
7

Necesito crear un mapa del mundo interactivo en la página principal de un sitio, el portal de la vista tendrá aproximadamente 650x200 píxeles. La interactividad incluiría lo siguiente, el ratón sobre un país destacaría (los países se llenarán literalmente con "rojo", por ejemplo) ese país y mostrar el nombre de los países (preferiblemente texto en un div), también estaré enlazando el evento destacado con un que resaltará un país cuando se seleccione.Mapa del mundo interactivo, resalte países en mouseover

Estoy teniendo dificultades para encontrar una solución adecuada, me niego a utilizar o aprender una tecnología de propiedad, como flash, por lo que no es una opción. Creé una maqueta simple usando capas abiertas y una imagen de mapa personalizada, pero los marcadores de los países cargan demasiado despacio en IE6.

También SVG parece demasiado grande, como he tratado de utilizar RaphaelJS, pero abondoned cuando me di cuenta de los datos de mapa del mundo es de 1,2 MB que es totalmente no aceptable para la primera página de un sitio ..

soy realmente no sé cómo voy a hacer esto, mi último recurso es crear manualmente 250+ (sin importar cuántos países hay) pngs y aplicar mouseover eventos a puntos de acceso en la imagen ... pero esto probablemente va a ser una callejón sin salida también ... buscando desesperadamente una solución, ¡cualquier comentario útil será apreciado!

Respuesta

5

Finalmente me conformé con RaphaelJS, importando todas las rutas de un svg en inkscape, ¡funciona increíblemente bien!

6

Por qué reinventar la rueda. Google Charts ya lo hace.

+0

¿Seguro? Recuerdo echarle un vistazo y no estar convencido, los mapas son estáticos, no creo que pueda adjuntar eventos JS. – BrenGG

+0

Hay un ejemplo justo en la página que he vinculado para mostrar un mapa mundial completamente interactivo. –

+0

hmmm. ok ja recuerdo haber visto esto hace una semana, no puedo recordar por qué lo dejé caer, voy a echar un vistazo más profundo en la mañana ... gracias de nuevo – BrenGG

0

¿Tiene datos de coordenadas del país almacenados en alguna parte?

Si es así, la configuración de las funciones para analizar a través de los datos pasados ​​y crear más de 250 rutas no debe ser que grande.

+0

tengo las coordenadas de todas las mayúsculas, hice pequeños marcadores en capas abiertas pero es demasiado lento en IE6 (20% de los visitantes de los sitios web) Lo ideal es que me quede con OpenLayers como una solución que me gusta mucho durante la última semana o dos ... – BrenGG

+0

VML podría funcionar para lo que quieras. Dado que parece que está más preocupado por IE6 – Shaunwithanau

0

Hemos desarrollado Highmaps, relacionado con Highcharts, para resolver fácilmente problemas de visualización de datos como este. También proporcionamos un map collection de más de 350 mapas, optimizados para tamaño para mantener el peso ligero.

Para un ejemplo de desglose (cargando un mapa más detallado con el clic del mouse) ver this demo.

Highmaps es gratis para uso no comercial.

Population history by country Drainage basin of the Meuse river

Cuestiones relacionadas