Visitas: 1
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](http://proyectosbeta.net/wp-content/uploads/2016/08/Ejemplo-de-visualizar-información-de-polígonos.png)
Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.
![Modificar el index.html Modificar el index.html](http://proyectosbeta.net/wp-content/uploads/2016/08/Modificar-el-index.html-1.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/08/Mapa-inicial-1.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/08/Agregar-al-index.html-el-dinv-info.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/08/Copiamos-el-txt-de-funciones-al-JS.png)
![Agregamos funciones Agregamos funciones](http://proyectosbeta.net/wp-content/uploads/2016/08/Agregamos-funciones.png)
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](http://proyectosbeta.net/wp-content/uploads/2016/08/Agregamos-una-propiedad-al-layer.png)
Nos vamos a nuestro navegador y refrescamos el sitio.
![Visualizar información de polígonos Visualizar información de polígonos](http://proyectosbeta.net/wp-content/uploads/2016/08/Visualizar-información-de-polígonos.png)
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