Curso sobre creación y desarrollo de mapas – Parte 9: Seleccionar polígonos

Continuamos con el curso de mapas. En esta novena parte estaré mostrando como seleccionar un polígono entre varios para poder diferenciar que esta seleccionado.

En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_seleccionar_poligonos.

Ejemplo de seleccionar polígonos
Ejemplo de seleccionar 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_seleccionar_poligonos

Mapa inicial
Mapa inicial

Ahora debemos de crear una carpeta datos para colocar un archivo poligonos.geojson donde se encuentra algunos polígonos que vamos a usar.

Crear carpeta datos
Crear carpeta datos

El archivo GeoJSON de los polígonos pueden descargar de este link. Ahora debemos colocar el archivo GeoJSON que recién descargamos.

Colocar el archivo geojson en la carpeta datos
Colocar el archivo geojson en la carpeta datos

Vamos a traer esos datos (poligonos.geojson) con una llamada AJAX, que resolveremos usando JQuery. Pueden descargar el archivo JQuery de este link y crear una carpeta como muestro en la imagen de abajo.

Colocar el archivo jquery en libs
Colocar el archivo jquery en libs

Ahora agregamos en el index.html el archivo JQuery.

Agregar el archivo jquery en el index.html
Agregar el archivo jquery en el index.html

Copiamos este archivo y luego pegamos en nuestro script JavaScript (MapaOSM.js) como se muestra en la imagen de abajo.

Colocamos en nuestro archivo MapaOSM.js
Colocamos en nuestro archivo MapaOSM.js

En la parte que acabamos de copiar a nuestro código es una llamada Ajax para traer los polígonos. Luego cada polígono tiene propiedades como en este caso sería un color. Se le asigna un color a cada polígono. Al seleccionar un polígono va a marcar en color rojo, indicando que se seleccionó. Pueden cambiar al color que quieran.

Entren a su navegador y refresquen el sitio.

Seleccionar polígono en un mapa
Seleccionar polígono en un mapa

Pueden probar que si hacen click en un polígono, va a cambiar de color, simulando una selección.

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo seleccionar_poligonos
Código fuente: ejemplo_seleccionar_poligonos

(Visited 246 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*