• Saltar a la navegación principal
  • Saltar al contenido principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto

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

El 16 de enero de 2020 por dani 15 comentarios

Aviso: Esta entrada tiene 2 o más años, es posible que el método difiera ligeramente, las capturas de pantalla no se correspondan con la versión actual o que la herramienta/complemento ya no esté disponible.
Advertencia: Esta entrada contiene códigos o snippets que podrían no funcionar correctamente en tu instalación de WordPress, o podrían ser incompatibles con tu theme o plugins activos. Úsalos bajo tu responsabilidad, preferiblemente en un entorno de desarrollo y haz siempre copias de tus archivos antes de modificarlos.

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.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
    <title>Calcular rutas</title>
    <style>
        #mapa{
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="mapa"></div>
</body>
</html>

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.

<script>
    if(navigator.geolocation){
        //Funciona la geolocalización
    }
    else{
        //No funciona la geolocalización
    }
</script>

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).

<script>
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

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

            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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>', 
                id: 'mapbox/streets-v11'
            }).addTo(mymap);

            L.Routing.control({
                waypoints: [
                    L.latLng(latitude, longitude),
                    L.latLng(37.17059, -3.60552)
                ],
                language: 'es'
            }).addTo(mymap);
        });
    }
    else{
        var mymap = L.map('mapa', {
            center: [37.17059, -3.60552],
            zoom: 17
        });

        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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imágenes © <a href="https://www.mapbox.com/">Mapbox</a>', 
            id: 'mapbox/streets-v11'
        }).addTo(mymap);
    }
</script>

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:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
    <script src="js/funciones.js"></script>
    <title>Document</title>
</head>
<body>
    <h2>Cómo llegar</h2>

    <form id="formulario_rutas" method="get" action="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car">    
        <input id="coordenadas" type="hidden" name="route" value=""/>
        <input id="calcular_ruta" type="button" value="Cómo llegar"/>
    </form>
</body>
</html>

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…

Archivado en: Publicaciones, Tutoriales Etiquetado como: desarrollo web, openstreetmap, programación web, tutoriales

Interacciones con los lectores

Comentarios

  1. Manel dice

    11 de abril de 2022 a las 12:42

    Hola buenas, como se puede modificar el color de los marcadores de una ruta.

    Responder
  2. Luis CA dice

    13 de febrero de 2021 a las 13:11

    Buenas Daniel, muy buen tutotrial. Mi duda es si con Open Street Map se puede crear rutas, es decir, poner más de dos puntos en la misma ruta.

    El ejemplo sería una ruta turística, primero vamos a la catedral y luego al museo, seguidamente a esta calle emblemática y así hasta crear una ruta.

    Responder
    • dani dice

      15 de febrero de 2021 a las 11:19

      Hola Luis, realmente no he profundizado con la API más allá de estos artículos que publiqué, pero seguramente se pueda hacer, es cuestión de mirar en la API y sobre todo buscar ejemplos prácticos.

      Responder
  3. gonzalo dice

    15 de septiembre de 2020 a las 01:44

    buenas, no se puede cargar una direccion? y calcular la longitud y latitud?

    Responder
  4. Diego Murrugarra dice

    17 de julio de 2020 a las 18:53

    Estimado Daniel, buenos días. Quería consultarte y disculpa mi ignoracia cómo se puede implementar un servidor OSRM en mi hosting ya que la información que haz compartido me ha sido de mucha utilidad y quisiera ejecutar estos conocimientos en un proyecto real.

    Responder
  5. Lucía dice

    17 de junio de 2020 a las 18:25

    Hola Daniel!.
    Mi nombre es Lucía y me encuentro realizando una práctica para la obtención de un Masterd de programación web.
    Siguiendo los pasos que propones he conseguido insertar el mapa con la localización de la empresa y la geolocalización del cliente, pero no encuentro la forma de poder incluir una imagen (mi logotipo), en lugar del marcador que aparece por defecto y añadirle a este un popup con información sobre la empresa. ¿Serías tan amable de indicarme el código que debería añadir?. Seguro nos sirve a muchos usuarios. GRACIAS por anticipado!!!

    Responder
    • Daniel, Gestionatuweb.net dice

      17 de junio de 2020 a las 18:32

      Hola Lucía, visita este artículo https://www.gestionatuweb.net/integra-openstreetmap-en-tus-aplicaciones-web-con-leaflet-y-mapbox/ ahí se explica cómo personalizar el marcador y el popup al hacer clic sobre él.

      Un saludo!

      Responder
      • Lizeth dice

        18 de febrero de 2021 a las 18:59

        Hola Daniel, gracias por tu ayuda me ha servido de mucho en la elaboración de un prototipo. Sabes he seguido paso a paso tu blog incluido el link que nos recomiendas en este comentario y tengo buenos resultados sin embargo quiero personalizar mi market y lo he conseguido; pero al ya generar la ruta con la localización del usuario, el marker personalizado sale independiente al de la ruta generada. Podrías guiarme, te lo agradezco mucho.

        Saludos

        Responder
  6. carlos dice

    13 de junio de 2020 a las 14:56

    Muchas gracias por el aporte! muy bien explicado , me ha servido y funcionado perfectamente.
    No llevo mucho programando y todo que son programas externos suele dar problemas y con google maps que se ha vuelto de pago no es rentable… osm es una alternativa bastante buena. Gracias de nuevo

    Responder
    • Daniel, Gestionatuweb.net dice

      17 de junio de 2020 a las 18:34

      Gracias a ti por tu comentario.

      Para que OpenStreetMap crezca es necesario que colaboremos haciendo aportaciones sobre nuestro entorno. A GoogleMaps le hicimos gran parte del trabajo añadiendo localizaciones y punto de interés. Es hora de hacerlo con OpenStreetMap.

      Responder
  7. Luis dice

    24 de marzo de 2020 a las 20:15

    Muy buena explicación, he seguido tus indicaciones al igual que varios ejemplos similares que he encontrado en la web, pero el resultado siempre es el mismo me dibuja el mapa y los puntos pero no dibuja la ruta entre los dos puntos, alguna idea de lo que puede ser?

    También me gustaría saber como puedo conseguir la distancia y el tiempo entre dos direcciones, no entre dos coordenadas, de manera interna, ya he utilizado añadiendo geocoder: L.Control.Geocoder.nominatim({}) al L.Routing.control pero con el mismo resultado me sale el cuadro para introducir las direcciones y esto lo hace bien, pero no dibuja la ruta en el mapa.

    Gracias de antemano por la ayuda.

    Responder
    • Daniel, Gestionatuweb.net dice

      25 de marzo de 2020 a las 08:37

      Hola Luis, pues no sabría decirte por qué no te dibuja la línea, habría que ver el código por si hay algún error o falta algo.

      En lo de resolver distancias y tiempo no te puedo orientar pues es algo que aún no he estudiado, ahora es que ando justo de tiempo, pero lo probaré próximamente.

      Gracias por tu comentario.

      Responder
      • Luis dice

        25 de marzo de 2020 a las 11:55

        Hola Daniel, gracias por responder tan rápido, estoy escribiendo el primer ejemplo siguiendo las lineas que has puesto, podrías mandarme el fichero con el código del primer ejemplo que te funciona para compararlo con el mio, me estoy volviendo loco y no encuentro el fallo.

        Gracias.

        Responder
      • Luis dice

        25 de marzo de 2020 a las 14:16

        Por fin lo he conseguido Sergio, el certificado del servidor de OSM está caducado, por eso no me funcionaba ningún ejemplo incluido el tuyo. Utilizando el servidor de mapbox si me funciona por fin!!. gracias por tu tiempo.

        Responder
        • Daniel, Gestionatuweb.net dice

          25 de marzo de 2020 a las 14:21

          Perfecto, yo también desconocía que caducaba el certificado del servidor OSM de pruebas, por eso comento que para proyectos en producción sería interesante instalar nuestro propio OMS.

          Saludos.

          Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad

Hosting recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies