Diseño de mapas

[rapuig]

Hola! ¿Todo bien?

Alguien sabe cómo se hacen o con qué herramientas o por dónde puedo empezar a investigar sobe este tipo de mapas, el cual aparece a la derecha abajo en la siguiente web, mostrando las zonas de New York: www.nycgo.com

No quiero usar flash, ni tampoco Google Maps, básicamente lo que necesito es tener un mapa donde pueda marcar barrios / zonas en una ciudad y al pasar sobre ellas se pinte de un color diferente.

Agradezco sus comentarios :)

Saludos.

[txemaarbulo]

Iniciado por rapuig

...
No quiero usar flash, ni tampoco Google Maps, básicamente lo que necesito es tener un mapa donde pueda marcar barrios / zonas en una ciudad y al pasar sobre ellas se pinte de un color diferente.

Hola rapuig:
Flash no te lo recomiendo porque hasta Google lo ha abandonado (mal funciona lo que queda hoy con parches).

Y si no te animas con Google Maps, que hoy por hoy es el más completo tanto en servicios como en documentación y tutoriales (y gratuito hasta 25.000 visitas diarias), lo que nos queda es OSM (OpenStreetMap)

La página oficial en España es http://www.openstreetmap.es/

Personalmente opino que aún le faltan años y apoyo económico para obtener desarrollos importantes.

[rapuig]

Iniciado por txemaarbulo

Hola rapuig:
Flash no te lo recomiendo porque hasta Google lo ha abandonado (mal funciona lo que queda hoy con parches).

Y si no te animas con Google Maps, que hoy por hoy es el más completo tanto en servicios como en documentación y tutoriales (y gratuito hasta 25.000 visitas diarias), lo que nos queda es OSM (OpenStreetMap)

La página oficial en España es http://www.openstreetmap.es/

Personalmente opino que aún le faltan años y apoyo económico para obtener desarrollos importantes.

Hola txemaarbulo, Flash no quiero justamente por eso.
Google Maps he trabajado con el muchas veces y se de sus beneficios, pero no es lo que estoy buscando. Quiero un mapa sencillo, tal como en el ejemplo de la web, es solamente para una ciudad y mostrar algunos de sus barrios.

[rapuig]

Acá se puede ver mejor a lo que me refiero, debajo del slider aparece el mapa: www.nycgo.com/brooklyn

Gracias.

[txemaarbulo]

Hola rapuig:

La solución es sencilla ... pero con abundante trabajo.

Evidentemente que, en el caso que muestras, no hay mapa sino un dibujo (que corresponde a un mapa de barrio, distrito, provincia, ...).

Si examinas el código fuente verás algo asi como

Código HTML:

<area shape="poly" class="manhattan" rel="nofollow" coords="180,179,183,160,184,149,186,134,197,114,232,51,232,40,239,28,246,13,255,17,246,37,239,53,240,71,242,85,235,101,235,110,216,137,214,156,212,170,198,171" href="/manhattan" target="_parent" alt="Map - Manhattan" id="brooklynMap-Manhattan"/>
 

Corresponde a Manhattan pero en su dibujo (el de la página expuesta) y deberás delimitar las áreas de cada <shape.

Hay especialistas en este foro pero puedo decirte que tienes que:
1.- Mostrar una imagen de "tu mapa" (que no es tal sino una imagen)
2.- Delimitar cada área del mapa (sea barrio, distrito, ...) (<coords>
3.- Aplicarle estilos: :hover, :fofus, :active (vamos, css sobre tu dibujo). Le das color, límites, fondo, lo que quieras.

Nos lo cuentas

[caricatos]

Hola:

No se si buscas hacer: rollover en mapas... en el apunte comento como hacerlo, aunque con imágenes en formato SVG parece más fácil... simplemente con estilos. En mi página podrás ver algunos apuntes al respecto.

Saludos