lite - Cree un mapa con provincias/estados seleccionables usando SVG, HTML/CSS, ImageMap

svg clickable

Question

Intento crear un mapa interactivo donde los usuarios puedan hacer clic en diferentes provincias en el mapa para obtener información específica de esa provincia.

Ejemplo: http://www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

Hasta ahora solo he encontrado soluciones que tienen una funcionalidad limitada. Realmente solo busqué esto usando un archivo SVG, pero estaría abierto a otros tipos de archivos si es posible.

Si alguien sabe de una forma completamente funcional de hacerlo (jQuery plug-in, script PHP, imágenes vectoriales) o un tutorial sobre cómo hacerlo manualmente, por favor, comparta.

Answer 1

Aquí hay otro plugin de mapas de imágenes que escribí para mejorar los mapas de imágenes: https://github.com/gestixi/pictarea

Hace que sea fácil resaltar toda el área y le permite especificar diferentes estilos según el estado de la zona: normal, hover, activo, deshabilitar.

También puede especificar cuántas zonas se pueden seleccionar al mismo tiempo.

Answer 2

Complemento jQuery para decorar mapas de imágenes (aspectos destacados, áreas seleccionadas, información sobre herramientas):

http://www.outsharked.com/imagemapster/

Divulgación: lo escribí.

Answer 3

Creo que es mejor dividir mi respuesta en 2 partes:

A -Crear todo desde cero (usando SVG, JavaScript y HTML5):

1. Crea una nueva página HTML5
2. Cree un nuevo archivo SVG, cada área seleccionable (provincia) debe ser un Polígono SVG separado en su archivo SVG (estoy usando Adobe Illustrator para crear archivos SVG pero también puede encontrar muchos productos de software alternativos, por ejemplo, Inkscape )
3. Agregue mouseover y haga clic en eventos a sus polígonos uno por uno

   <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
       onmouseover="mouseOverHandler(evt)"
       onclick="clickHandler(evt)" />

4. Agregue un controlador para cada evento en su código JavaScript y agregue el código deseado al controlador

   function mouseOverHandler(evt) {};
   function clickHandler(evt) {};

5. Agregue el archivo SVG a su página HTML (prefiero SVG en línea, pero también puede usar el archivo SVG vinculado)
6. Cargue los archivos a su servidor

B -Utilice un software como FLDraw Interactive Image Creator (solo si tiene una imagen de mapa y desea hacerlo interactivo):

1. Cree un proyecto vacío y elija la imagen del mapa como su imagen base al crear el nuevo proyecto
2. Agregue un elemento Polígono (del menú Forma) para cada provincia
3. Para cada polígono, haga doble clic en él para abrir la ventana Propiedades donde puede elegir un tipo de evento para hacer clic y también cambiar la opacidad de la forma a 0 para hacerlo invisible.
4. Guarde su proyecto y publíquelo en HTML5, FLDraw creará una nueva carpeta que contiene todos los archivos necesarios para su proyecto que puede cargar en su servidor.

La opción (A) es muy buena si eres programador o tienes a alguien para crear el código requerido y el archivo SVG, la opción (B) es buena si no quieres contratar a alguien o dedicar tu propio tiempo a crear todo, desde rasguño

También tiene otras opciones, por ejemplo, usar HTML5 Canvas en lugar de SVG, pero no es muy fácil crear un mapa de Zoomable utilizando HTML5 Canvas, tal vez hay otras formas que desconozco.

Answer 4

El siguiente código puede ayudarte:

$("#svgEuropa [id=''stallwanger.it.dev_shape_DEU'']").on("click",function(){
    alert($(this).attr("id"));
});

Source

Answer 5

En caso de que alguien lo busque, lo utilicé en varios sitios, siempre las posibilidades de personalización y RD fueron perfectas para lo que necesitaba. Simple y de uso gratuito:

Mapas CSS utilizables

Una nota para más guiones en un sitio: tuve algunos problemas molestos con el trabajo de un mapa (que funcionaba como un menú gráfico) en Drupal 7. Allí se utilizaron muchos otros guiones, y después de manejarlos, me quedé atrapado en el mapa - Todavía no funcionó, aunque el jquery.cssmap.js, CSS (ambos locales) y el script en el lugar en el lugar correcto. Firebug me mostró un error y de repente eureka - un simple descuido, dejé el código del script como estaba en el ejemplo y hubo un conflicto. Simplemente cambie la función frontal "$" a "jQuery" (u otro manejador) y funciona perfecto. :]

Esto es lo que mencioné (por supuesto, puede ponerlo antes en lugar de hacerlo):

<script type="text/javascript">
      jQuery(function($){
        $(''#map-country'').cssMap({''size'' : 810});
       });
    </script>

Answer 6

He estado usando makeaclickablemap para mis mapas de provincia desde hace un tiempo y resultó ser una muy buena opción.

Answer 7

Parece que quieres un mapa de imágenes simple, te recomendaría no hacerlo más complejo de lo necesario. Aquí hay un artículo sobre cómo mejorar los mapas de imagen con svg . Es muy fácil hacer regiones clicables en svg en sí mismo, solo agrega algunos elementos <a> alrededor de las formas en las que quieres que se pueda hacer clic.

Un par de opciones si necesita algo más avanzado:

• http://jqvmap.com/
• http://jvectormap.com/
• http://polymaps.org/

Answer 8

Tenía los mismos requisitos y, finalmente, este convertidor de mapas funcionó para mí. Es el mejor complemento para cualquier generación de mapas.

Answer 9

Tienes bastantes opciones para esto:

1 - Si puede encontrar un archivo SVG para el mapa que desea, puede usar algo como RaphaelJS o SnapSVG para agregar oyentes de clic para sus estados / regiones, esta solución es la más personalizable ...

2 - Puede usar herramientas dedicadas como clickablemapbuilder (gratis) o makeaclickablemap (creo que también gratis) .

[descargo de responsabilidad] Im el autor de clickablemapbuilder.com :)

Answer 10

Vaya a SVG a Script con su SVG el resultado predeterminado es el mapa en código SVG que agrega eventos también se agrega pero se identifica fácilmente y se puede modificar según sea necesario.

Answer 11

<script type="text/javascript">
      jQuery(function($){
        $(''#map-country'').cssMap({''size'' : 810});
       });
    </script>

texto fuerte