Curso sobre creación y desarrollo de mapas – Parte 4: Varios marcadores en una misma posición

Continuamos con el curso de mapas. En esta cuarta parte estaremos mostrando como resolver varios marcadores en una misma posición.

Leaflet es una librería pequeña, pero con la posibilidad de crecer en cuanto a funcionalidades mediante plugins.

Leaflet no trae por defecto la posibilidad de resolver varios marcadores en una misma posición, pero tenemos un plugin que nos ayudará a hacerlo. Se plugin se llama Leaflet.markercluster y podes encontrarlo en GitHub.

Obs:

  • Como usamos Leaflet 0.7.7 debemos de usar otra versión del plugin.

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

Ejemplo varios marcadores
Ejemplo varios marcadores

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

Modificaciones en el index.html
Modificaciones en 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_varios_marcadores/

Mapa primera fase
Mapa primera fase

Tenemos el mapa!!!

Ya hemos descargado el plugin, ahora debemos de crear una carpeta plugins como muestra en la imagen de abajo.

Crear carpeta plugins
Crear carpeta plugins

Ahora dentro de la carpeta plugin creamos la carpeta Leaflet.markercluster y agregamos los 3 archivos. Pueden descargar esos archivos en este link.

Plugin Leaflet.markercluster
Plugin Leaflet.markercluster

Ahora volvemos a nuestro editor y editamos en el index.hml. Agregamos el plugin.

Agregar el plugin en el index.html
Agregar el plugin en el index.html

<link rel="stylesheet" href="libs/leaflet/plugins/Leaflet.markercluster/MarkerCluster.css" />
<link rel="stylesheet" href="libs/leaflet/plugins/Leaflet.markercluster/MarkerCluster.Default.css" />
<script src="libs/leaflet/plugins/Leaflet.markercluster/leaflet.markercluster.js" type="text/javascript" charset="utf-8"></script>

Ahora editamos el archivo MapaOSM.js, agregando los datos GeoJSON.

Datos GeoJSON
Datos GeoJSON

Link para copiar los datos GeoJSON y agregar a tu código fuente.

Los datos GeoJSON son estáticos, pero se puede obtener de forma dinámica (explicaré en otra parte del curso).

Ahora creamos una capa vectorial que contendrá los datos GeoJSON.
// Layer GeoJSON.
var geojsonLayer = L.geoJson(geojsonFeature, {});

Agregar una capa vectorial con datos GeoJSON
Agregar una capa vectorial con datos GeoJSON

Agregamos el agrupador de cluster.
// Cluster de marcadores.
var cluster_marcadores = L.markerClusterGroup(); // Se crea un cluster group.
cluster_marcadores.addLayer(geojsonLayer); // Agrega el Layer GeoJSON al cluster group.
mapa.addLayer(cluster_marcadores); // Agrega el cluster group al mapa.

Agregar cluster group
Agregar cluster group

Volvemos a entrar a nuestro navegador y refrescamos el sitio. Tenemos que mover un poco el mapa para poder ver el agrupador de marcadores.

Mapa con el cluster
Mapa con el cluster

Volvemos a en el código y cambiamos el zoom.
var zoom = 12;

Ajustar el zoom
Ajustar el zoom

Volvemos a entrar al navegador y refrescamos el sitio. Ahora si ya vemos el cluster al entrar al sitio.

Mapa con el cluster al iniciar el sitio
Mapa con el cluster al iniciar el sitio

Si hacemos click en el cluster, se muestran tres marcadores. Eso indica que en la misma posición existen tres marcadores.

Mapa con tres puntos en la misma posición
Mapa con tres puntos en la misma posición

Al hacer click en uno de los marcadores, no hace nada porque le falta agregar un evento para que haga algo. En la tercera parte del curso les mostré como hacer eso.

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo de varios marcadores en una misma posición
Código fuente: ejemplo_varios_marcadores

(Visited 419 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*