Curso sobre creación y desarrollo de mapas – Parte 3: Usando marcadores y mostrando información

En una entrada anterior había explicado lo que es el proyecto OSM. No hicimos un repaso, porque nadie preguntó, así que asumimos que quedo todo muy claro. jej

Ahora en esta tercera parte vamos a seguir codificando usando marcadores y que muestre información por cada uno. En esta parte estaremos usando datos en duro, pero más adelante estaremos mostrando como mostrar datos usando apis o obteniendo datos de nuestra base de datos y de nuestros servidores de mapas.

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

Ejemplo Marcadores
Ejemplo 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_marcadores/

Mapa primera fase
Mapa primera fase

Tenemos el mapa!!!

Tenemos dos tipos de datos en un GIS (Sistema de Información Geográfica):

  • Vectores: manteniendo las características geométricas de las figuras. Ejemplos: puntos, polígonos, lineas, etc
  • Raster: cualquier tipo de imagen digital. Mapas satelitales, etc.

Ahora nos vamos a ocupar solamente en usar datos con formato vectorial. Dentro del formato vectorial se tienen varios formatos como son SHP, GeoJSON/TopoJSON, GML, KML/KMZ, GPX, GeoRSS, etc.

Un archivo GeoJSON es un JSON, pero con información geográfica.

Ejemplo GeoJSON
Ejemplo GeoJSON

Entramos a nuestro editor y nos dirigimos al archivo MapaOSM.js

Capa Base
Capa Base

En el cuadro que marque arriba, es una capa base. Generalmente un mapa contiene muchas capas (layers). En esta parte tendremos dos capas (la capa base que son datos del proyecto OSM) y otra capa de datos vectorial (formato GeoJSON).

Los datos pueden estar separadas por varias capas, dependiendo de tus necesidades.

Agregamos los datos GeoJSON.

Datos GeoJSON
Datos GeoJSON

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

Ahora creamos una capa vectorial que contendrá los datos GeoJSON.
// Agregando datos GeoJSON en una Capa (layer) vectorial.
L.geoJson(v_geojsonFeature).addTo(mapa);

Agregar capa vectorial con datos GeoJSON en el mapa
Agregar capa vectorial con datos GeoJSON en el mapa

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

Visualizar los marcadores
Visualizar los marcadores

Al hacer click en uno de los iconos no hace nada, porque todavía no hemos definido un evento.

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

Cambiamos el zoom
Cambiamos el zoom

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

Visualizar los marcadores con reajuste del zoom
Visualizar los marcadores con reajuste del zoom

Ahora vamos a definir un evento que cuando se haga click en uno de los marcadores, muestre información de ese punto.
Entramos a nuestro editor y agregamos lo siguiente:

Función que muestra informacion en un popup
Función que muestra informacion en un popup

Link para copiar el texto de arriba y agregar a tu código fuente.

Volvamos a entrar a nuestro editor y cambiamos el siguiente código en nuestra capa vectorial que contiene los datos GeoJSON.
// Agregando datos GeoJSON en una Capa (layer) vectorial.
L.geoJson(v_geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(mapa);

Agregamos código en la capa vectorial donde se encuentra los datos GeoJSON
Agregamos código en la capa vectorial donde se encuentra los datos GeoJSON

Volvemos a entrar a nuestro navegador y refrescamos el sitio. Hagan click en un marcador y verán información que contiene ese punto.

Mostrando información en el mapa de un punto
Mostrando información en el mapa de un punto

Si se fijan que al hacer click en algún marcador, va a mostrar toda la información que contiene ese punto. En la función que hemos definido arriba, podemos personalizar que información queremos mostrar, pero en mi caso quería mostrar todo.

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo de marcadores mostrando información
Código fuente: ejemplo_marcadores/

(Visited 268 times, 1 visits today)

Comments

comments


Post Relacionados

8 Comments on Curso sobre creación y desarrollo de mapas – Parte 3: Usando marcadores y mostrando información

Leave a Reply

Tu dirección de correo no será publicada.


*