Curso sobre creación y desarrollo de mapas – Parte 10: Visualizar información de los polígonos

Continuamos con el curso de mapas. En esta décima parte estaré mostrando como visualizar información de polígonos. Vamos a partir de lo que hemos hecho en la parte 9.

Ahora copiamos el código de la parte 9 y nombramos la carpeta por ejemplo_visualizar_informacion_poligonos.

Ejemplo de visualizar información de polígonos
Ejemplo de visualizar información de polígonos

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificar el index.html
Modificar el index.html

Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_visualizar_informacion_poligonos/

Mapa inicial
Mapa inicial

Ahora vamos a agregar la parte de visualizar información de polígonos.

Obs:

  • Cada polígono contiene en sus propiedades color y área.

Nos vamos al archivo index.html

Agregar al index.html el div info
Agregar al index.html el div info

Ahora copiamos funciones que están en el txt al final del archivo MapaOSM.js.

Copiamos el txt de funciones al JS
Copiamos el txt de funciones al JS
Agregamos funciones
Agregamos funciones

Obs:

  • Pueden observar que en el código anterior, si al hacer click en un polígono va a mostrar información. En caso que se presione fuera de un polígono y dentro del mapa, no muestra información.

Para que se ejecute todo, se necesita agregar una propiedad en el layer.

Agregamos una propiedad al layer
Agregamos una propiedad al layer

Nos vamos a nuestro navegador y refrescamos el sitio.

Visualizar información de polígonos
Visualizar información de polígonos

Obs:

  • Pueden observar en la imagen de arriba que muestra las propiedades por cada polígono.
  • El diseño pueden mejorar usando CSS. Queda de tarea para ustedes y me muestran en los comentarios con una imagen. 🙂

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo visualizar_informacion_poligonos
Código fuente: ejemplo_visualizar_informacion_poligonos

(Visited 169 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*