openstreetmap – danisanchez.net

Agrupar marcadores en clusters en OpenStreetMap

dani.sanchez — Tue, 13 Apr 2021 08:16:09 +0000

Cuando en determinadas zonas de nuestro mapa se aglutinan varios marcadores, un buen recurso suele ser agruparlos en clusters, de forma que el número de elementos en el mapa disminuya mejorando así la usabilidad y visibilidad.

Esta funcionalidad no viene integrada directamente en la API de OpenStreetMap (LeafletJS) y tenemos que implementarla mediante un sencillo plugin, Leaflet MarkerCluster.

Para el ejemplo vamos a crear un mapa en OpenStreetMap como lo haríamos normalmente y como vimos en artículos anteriores: Integra OpenStreetMap en tus aplicaciones web con LeafLet y MapBox.




    
    
    
    
    
    Mapa con OpenStreetMap

Ejecutando este código ya deberíamos poder visualizar un mapa vacío. Si no carga, revisa el código. Puedes modificar las coordenadas por las de tu zona, si lo prefieres.

Ahora vamos a añadir unos cuantos marcadores en un espacio reducido:

/*MARCADORES*/
var marker1 = L.marker([37.1698, -3.965]).addTo(mymap);
var marker2 = L.marker([37.1698, -3.966]).addTo(mymap);
var marker3 = L.marker([37.1700, -3.966]).addTo(mymap);
var marker4 = L.marker([37.1700, -3.967]).addTo(mymap);
var marker5 = L.marker([37.1696, -3.964]).addTo(mymap);
var marker6 = L.marker([37.1694, -3.964]).addTo(mymap);

Hasta aquí bien, tenemos 6 marcadores agrupados en una zona reducida, lo que a simple vista dificulta un poco la visibilidad. Para poder agrupar estor marcadores en clusters vamos a añadir los scripts del plugin MarkerCluster en el de nuestra página a continuación de los scripts de Leaflet:

Bien, lo primero que vamos a hacer es volver al código de marcadores y quitarles el método addTo(mymap), ya que no vamos a añadirlos de forma indepeniente y dejar este método puede crear repeticiones y comportamientos extraños.

/*MARCADORES*/
var marker1 = L.marker([37.1698, -3.965]);
var marker2 = L.marker([37.1698, -3.966]);
var marker3 = L.marker([37.1700, -3.966]);
var marker4 = L.marker([37.1700, -3.967]);
var marker5 = L.marker([37.1696, -3.964]);
var marker6 = L.marker([37.1694, -3.964]);

A continuación de los marcadores, vamos a declarar un grupo de clusters:

var grupos = L.markerClusterGroup();

Y lo único que tenemos que hacer es añadir cada marcador a este grupo:

grupos.addLayer(marker1);
grupos.addLayer(marker2);
grupos.addLayer(marker3);
grupos.addLayer(marker4);
grupos.addLayer(marker5);
grupos.addLayer(marker6);

Huelga decir que si tienes cientos de marcadores no es necesario escribir todo manualmente, usa un bucle que para eso están!

/*POR EJEMPLO:*/
for(var i=1; i <= 6; i++){
    grupos.addLayer(marker+i);
}

Por último agregamos el grupo al mapa:

mymap.addLayer(grupos);

Los marcadores se irán agrupando dinámicamente según el zoom que apliquemos al mapa.

Os dejo el código del archivo html final comentado:




    
    
    
    
    
    
    
    	
    	
   	
	
	 
    Mapa con Open Street Map

Contribuir al crecimiento de OpenStreetMap es muy sencillo

dani.sanchez — Thu, 18 Jun 2020 10:07:33 +0000

OpenStreetMap es la base de datos de mapas libre más grande del mundo. A diferencia de otros mapas comerciales, no pertenece a una gran empresa con ánimo de lucro, si no a una comunidad mundial tanto de desarrolladores encargados de los aspectos técnicos, pasando por colaboradores que contribuyen añadiendo datos sobre caminos, sendas, cafeterías, puntos de interés… y apoyado (que no dirigido) por la OpenStreetMap Foundation, que como detallan en su página web, nacen con la iniciativa de crear y proporcionar datos geográficos libres que cualquiera pueda usar y compartir.

OpenStreetMap puede ser utilizado en sitios web para señalar ubicaciones, trazar rutas, delimitar áreas circulares o poligonales, puede ser usado como navegador GPS con aplicaciones como OSMand, etc.

En este mismo blog he escrito un par de tutoriales sobre la integración y uso de la API para tu sitio web:

Integra OpenStreetMap en tus aplicaciones web con LeafLet y MapBox

Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario

Tú puedes contribuir a que OpenStreetMap siga creciendo aportando datos de interés de tu zona (ciudad, barrio, municipio) a la base de datos. Y hacerlo es tremendamente sencillo.

Crea una cuenta en OpenStreetMap.org

Para poder subir tus aportaciones, primero crea una cuenta en openstreetmap.org, tranquilo/a, no vas a recibir SPAM ni promociones, pero a través de tu cuenta podrás ver tus contribuciones, modificarlas y eliminarlas.

Una vez inicies sesión con tu cuenta, tendrás habilitado el botón de Editar:

Antes de editar nada, el sistema te va a proponer realizar un tutorial, te animo a que lo hagas, es muy sencillo de seguir y no tardarás más de 5 minutos en completarlo.

Aún así te daré algunos «TIPS» para hacer tus aportaciones.

Navega por tu zona localizando puntos de interés. Puedes empezar por las instalaciones públicas como: Centros de salud, oficinas de administración, de correos, bibliotecas, colegios, institutos, instalaciones deportivas, parques…

Existen 3 herramientas principales para añadir datos al mapa:

Punto.
Área.
Línea

El punto se utiliza principalmente para marcar establecimientos, como cafeterías, estaciones de servicio, tiendas, etc.

Con el área puedes delimitar parques, zonas residenciales o edificios completos.

Las líneas se utilizan para trazar nuevas calles o caminos que no estén registrados.

En la siguiente imagen, he delimitado con un área el estadio de fútbol de mi municipio:

Una vez delimitada el área, lo primero es seleccionar una categoría, en este caso «Campo o cancha de fútbol» y después puedo cumplimentar todos los datos que conozca sobre el lugar.

En la siguiente imagen he utilizado un punto para señalar una cafetería:

También he señalado el área de bajos comerciales:

Y la piscina municipal, que tampoco estaba ubicada:

Para finalizar guardamos los cambios y estos se verán reflejados casi en tiempo real en todos los servicios que utilicen mapas de OpenStreetMap.

De verdad que te animo a que tú hagas lo mismo en tu zona, cuanto más práctico sea OpenStreetMap, más gente comenzará a usarlo. De hecho muchas empresas se están planteando migrar a OpenStreetMap debido al cambio de políticas de Google en su actual API de GoogleMaps.

Contribuir a un proyecto libre repercute en beneficio de todos.

Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario

dani.sanchez — Thu, 16 Jan 2020 09:46:15 +0000

Hace unos días veíamos los conceptos básicos para integrar OpenStreetMap en nuestras aplicaciones web.

Hoy vamos a ir un paso más allá y veremos un ejemplo de cómo calcular rutas partiendo de la geolocalización del usuario hasta el punto destino que estará predefinido (por ejemplo, nuestro negocio, un punto de interés, etc.).

Lo primero, debemos agregar un nuevo plugin que se encargará de realizar los cálculos de ruta y dibujar el trazado: Leaflet Routing Machine.

Este sería el código base de nuestra página HTML, con las llamadas tanto a las librerías de Leaflet como a las de Routing Machine.




    
    
    
    
    
    
    
    Calcular rutas

Comprobar que el dispositivo (navegador) soporta geolocalización

Aquí me voy a centrar en la documentación de Mozilla donde no he tenido ningún problema para geolocalizarme con Firefox (en Chrome/Chromium si he tenido problemas para geolocalizarme debido a unas limitaciones que ha impuesto Google a la geolocalización a través de HTML5).

El siguiente código está probado para Firefox y podría no funcionar correctamente en otros navegadores.

Con el código anterior comprobamos si la geolocalización está disponible en el dispositivo o navegador web del usuario, en caso afirmativo dibujaremos un mapa donde se mostrará la ruta calculada desde la posición del usuario hasta nuestra ubicación de interés.

En caso de que la geolocalización no funcione, podemos dibujar un mapa normal con la ubicación de nuestro destino (sin calcular rutas).

Obtener las coordenadas del usuario

Vamos a comentar un poco el codigo. En caso de que la geolocalización esté disponible, el método que obtiene la ubicación del usuario es getCurrentPosition, al que le pasamos una función de callback con un parámetro (position) en el que podemos obtener tanto la latitud como la longitud por separado:

navigator.geolocation.getCurrentPosition(function(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
});

A continuación dibujamos el mapa posicionándolo en la ubicación del usuario:

var mymap = L.map('mapa', {
    center: [latitude, longitude],
    zoom: 12
});

Hay que tener en cuenta que la geolocalización a través de IP puede no ser muy fiable. Si la central a la que estás conectado se encuentra en tu misma población, la geolocalización te ubicará más o menos en tu pueblo, pero por ejemplo, mi conexión ADSL proviene de una red Air Wifi, cuya central se encuentra en otra ciudad, así que el navegador me geolocaliza en esa otra ciudad…

Esto no ocurre con el navegador de mi smartphone si además tengo activada la Ubicación, en este caso me geolocaliza a la perfección.

Tras dibujar el mapa llamamos al Routing Machine pasándole las dos coordenadas a calcular:

Llamar al método para calcular la ruta

L.Routing.control({
    waypoints: [
        L.latLng(latitude, longitude), //dirección obtenida del usuario
        L.latLng(37.17059, -3.60552) //dirección fija de destino
    ],
    language: 'es'
}).addTo(mymap);

No olvides especificar el código de idioma para que las indicaciones aparezcan en español.

NOTA IMPORTANTE:

El cálculo de ruta se origina en un servidor OSRM de demostración cuya finalidad es la de probar la API, de hecho si abrimos la consola del inspector de elementos nos avisa de esto:

You are using OSRM’s demo server. Please note that it is NOT SUITABLE FOR PRODUCTION USE. Refer to the demo server’s usage policy: https://github.com/Project-OSRM/osrm-backend/wiki/Api-usage-policy

To change, set the serviceUrl option.

Please do not report issues with this server to neither Leaflet Routing Machine or OSRM – it’s for demo only, and will sometimes not be available, or work in unexpected ways.

Please set up your own OSRM server, or use a paid service provider for production.

El texto nos advierte que no es recomendable usarlo para entornos de producción, ya que el servidor puede no estar disponible en determinados momentos.

Por lo que si queremos implementar el cálculo de rutas en una aplicación web de producción, deberíamos configurar nuestro propio servidor OSRM en nuestro servicio de hosting (consultar al soporte técnico) y modificar la variable serviceURL dentro del leaflet-routing-machine.js

Calcular rutas enviando las coordenadas a OpenStreetMap.org

Si no queremos configurar un servidor OSRM siempre podemos hacer el cálculo de rutas directamente en la web de openstreetmap.org.

Para ello podemos enviar a través de un formulario HTML, las coordenadas mediante GET al action=»https://www.openstreetmap.org/directions?engine=fossgis_osrm_car» si queremos hacer la ruta en coche o a «https://www.openstreetmap.org/directions?engine=fossgis_osrm_foot» si queremos calcular la ruta a pie.

La cadena con las coordenadas tiene que tener la siguiente síntaxis:

latitud1,longitud1;latitud2,longitud2, por ejemplo:

37.17618,-3.96473;37.1894,-3.7216

Las coordenadas del usuario tendrán que enviarse en el formulario de forma dinámica, es decir, a través de una variable, mientras que las coordenadas de destino pueden especificarse estáticamente.

Para el ejemplo, vamos a crear una página HTML con el formulario, y un archivo de funciones .JS que obtendrá las coordenadas del usuario, las pasará al formulario y lo enviará a openstreetmap.org. En el código he integrado jQuery para hacer las escuchas al botón y enviar los datos.

Página HTML:




    
    
    
    
    
    Document


    Cómo llegar

Crearemos un formulario con un campo oculto (hidden) que contendrá como valor la cadena que pasaremos a openstreetmap ya formateada como éste espera recibirla. Y un botón que al hacer clic ejecute todo el proceso.

Archivo JS:

"use strict";

$(document).ready(function(){
    $("#calcular_ruta").click(function(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position){
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;

                var cadenaRuta = latitude+","+longitude+";37.1894,-3.7216";
                $("#coordenadas").val(cadenaRuta);
                $("#formulario_rutas").submit();
            });
        }
    });
});

En el archivo de funciones, captamos el clic al botón del formulario, geolocalizamos al usuario y construimos la cadenaRuta que pasaremos como valor al campo hidden (coordenadas) del formulario. Por último hacemos un submit al formulario y OpenStreetMap hará la magia.

No queda integrado en nuestra web como sí pasaría con un servidor OSRM, pero al menos es una solución elegante.

Paso a paso y no sin alguna dificultad vamos avanzando hacia la no dependencia del todopoderoso GoogleMaps. Seguiremos próximamente…

Integra OpenStreetMap en tus aplicaciones web con LeafLet y MapBox

dani.sanchez — Fri, 10 Jan 2020 17:47:06 +0000

Para compartir una ubicación rápida con OpenStreetMap puedes ir directamente a OpenStreetMap.org y localizar el lugar que deseas compartir, ya sea indicando una dirección exacta o unas coordenadas:

En el menú derecho utiliza la opción «Compartir», selecciona HTML y copia el código HTML que tendrás que incrustar en tu página.

Ejemplo de mapa incrustado:

Ver mapa más grande

Pero si necesitas crear un mapa personalizado, con varios marcadores, con la posibilidad de insertar áreas, personalizar la imagen del marcador, podemos integrar OpenStreetMap en nuestro proyecto web gracias a las librerías de Leaflet y a los fondos de MapBox.

Para dar nuestros primeros pasos vamos a ejecutar un ejercicio sencillo. Crea un nuevo directorio con los siguientes archivos:

index.html
estilos.css

En el archivo index.html añade las librerías de LeafLet:

Archivo CSS:

Enlaza también tu archivo de estilos.css:

Archivo JS:

Y crea un DIV con un identificador, por ejemplo:

Ajusta con CSS el alto que desees para el mapa:

#mimapa {height: 600px;}

De forma que tu index.html quede más o menos así:




    
    
    
    
    
    
    Mapa con Open Street Map

A continuación vamos a añadir un poco de JavaScript para inicializar el mapa en una ubicación predefinida. Este código podemos insertarlo en el archivo index.html a continuación del DIV o en un archivo de funciones JavaScript externo.

Utiliza las coordenadas con las que quieras inicializar el mapa, el segundo parámetro «18» corresponde al ZOOM inicial.

Ahora tenemos que llamar a las librerías de MapBox para dibujar el mapa:

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 25,
    attribution: 'Datos del mapa de © OpenStreetMap, ' + 'CC-BY-SA, ' + 'Imágenes © Mapbox', 
    id: 'mapbox/streets-v11'
}).addTo(mymap);

No olvides especificar las atribuciones tal y como se exige en las condiciones y términos de uso.

attribution: 'Datos del mapa de © OpenStreetMap, ' + 'CC-BY-SA, ' + 'Imágenes © Mapbox

Existen varios tipos de mapa en MapBox, puedes consultar en su documentación y utilizar el que prefieras, para el ejemplo hemos utilizado «streets-v11».

Con este código ya tenemos inicializado un mapa con una ubicación y zoom predefinidos.

Añadir un marcador

Vamos a añadir nuestro primer marcador:

var marker = L.marker([37.1698, -3.965]).addTo(mymap);

Especifica las coordenadas del marcador.

Popups en marcadores

Podemos activar un popup utilizando el método bindPopup, con información al hacer clic en el marcador. La información podemos generarla en HTML con todas las ventajas que conlleva (insertar links, imágenes…):

marker.bindPopup("Mi ubicación
Solicita más información");

Personalizar el marcador

Incluso podemos personalizar el tipo de marcador por defecto agregando una imagen.

var marcador = L.icon({
        iconUrl:'images/marcador.png',
        iconSize: [60, 85]
});

Y asignarlo a un marcador:

var marker = L.marker([37.1698, -3.965], {icon: marcador}).addTo(mymap);

Y recuerda que puedes agregar todos los marcadores que necesites (por ejemplo, extraídos de una base de datos):

var marker2 = L.marker([37.1699, -3.968], {icon: marcador}).addTo(mymap);
var marker3 = L.marker([37.1697, -3.966], {icon: marcador}).addTo(mymap);

Añadir un área (círculo)

Hay casos en los que no nos interesa especificar la ubicación exacta del marcador, si no una zona aproximada (muy habitual por ejemplo en webs inmobiliarias, donde no queremos indicar dónde hay inmuebles vacíos…).

var circle = L.circle([37.1697, -3.964], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 40
}).addTo(mymap);

Entre los parámetros que podemos ajustar al area tenemos: las coordenadas, el color principal, el color del borde, la opacidad y el radio del area establecido en metros.

Añadir polígonos

Asímismo tenemos la posibilidad de crear polígonos para deliminar zonas específicas en el mapa, también muy útil para webs inmobiliarias donde podemos delimitar fincas y parcelas.

var polygon = L.polygon([
        [37.168474, -3.966202],
        [37.167482, -3.966827],
        [37.167602, -3.964477]
]).addTo(mymap);

Solo tenemos que especificar las coordenadas de cada punto del polígono.

Con esto ya tenemos para empezar a jugar con los mapas de OpenStreetMap.

Todos estos códigos y más los puedes consultar en la documentación de LeafLet y sacarle todo el partido a la API.
https://leafletjs.com/examples.html

Si te ha gustado, por favor, compártelo en tus redes. Nos vemos en el siguiente post