• 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

Integra OpenStreetMap en tus aplicaciones web con LeafLet y MapBox

El 10 de enero de 2020 por dani 25 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.

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:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

Enlaza también tu archivo de estilos.css:

<link rel="stylesheet" href="estilos.css"/>

Archivo JS:

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin="">
</script>

Y crea un DIV con un identificador, por ejemplo:

<div id="mimapa"></div>

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í:

<!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.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
    <link rel="stylesheet" href="estilos.css"/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <title>Mapa con Open Street Map</title>
</head>

<body>
    <div id="mimapa"></div>
</body>

</html>

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.

<script>
    var mymap = L.map('mimapa').setView([37.1698, -3.965], 18);
</script>

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 &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);

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

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>

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("<b>Mi ubicación</b><br><a href='#'>Solicita más información</a>");

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 😉

Archivado en: Publicaciones, Tutoriales Etiquetado como: desarrollo web, leaflet, openstreetmap, tutoriales

Interacciones con los lectores

Comentarios

  1. Xip dice

    23 de octubre de 2021 a las 00:47

    Enhorabuena por tu entrada. Un gran aporte y bien explicado. Un saludo Dani.

    Responder
  2. Iñaki dice

    8 de junio de 2021 a las 14:34

    Hola Daniel, ¿puedes decirme cómo puedo conseguir que un usuario cree el marcador haciendo clic en el mapa y disponer de las coordenadas para guardarlas? Muchas gracias.

    Responder
  3. Luciano dice

    3 de marzo de 2021 a las 15:44

    Hola , sabes si se puede trazar una ruta con open street map?

    Responder
    • Lore dice

      23 de abril de 2021 a las 01:58

      Si, si se puede puedes utilizar leaflet-ruting-machine esto te ayudará a generar rutas.

      Responder
  4. blas villalba dice

    22 de febrero de 2021 a las 17:30

    He probado los marcadores y me va genial.
    mi consulta es como puedo hacer para mostrar varios puntos(si esposible con trazo de linea) para mostrar un recorrido. por ejemplo tengo una tabla con varios registros que contienen la ubicación fecha y hora.
    gracias!

    Responder
    • dani dice

      24 de febrero de 2021 a las 13:54

      Hola. En este caso habría que consultar la tabla de datos (si está en SQL por ejemplo) y generar el script del trayecto recorriendo en bucle todos los puntos que haya en el registro (SQL).

      Aquí ya entrarían varios procedimientos, por un lado las consultas SQL, el paso de datos PHP a JavaScript, etc.

      Un saludo.

      Responder
      • blas villalba dice

        24 de febrero de 2021 a las 17:02

        muchas gracias por la pronta respuesta. encontré la función «polyline» que la estoy probando utilizando un script y bucle.
        🙂

        Responder
  5. dani dice

    19 de noviembre de 2020 a las 09:49

    Hola a todos, gracias por vuestras preguntas, pero no conozco la API más allá de los artículos y ejemplos que he publicado. No puedo dar respuesta a todas vuestras cuestiones sobre cómo adaptarlo a vuestro proyecto o necesidades concretas, a parte que no dispongo del tiempo.

    Un saludo y gracias.

    Responder
  6. Christian dice

    19 de noviembre de 2020 a las 02:32

    Hola Daniel, gracias por el artículo.
    He diseñado un mapa con múltiples puntos, pero estoy tratando de incluir un buscador a mi Mapa desde hace semanas y no lo he logrado. Estoy utilizando el plugin Leaflet Map. Pero también probé de otras maneras y tampoco pude incluir el buscador. Te dejo el enlace de la web en caso puedas ayudarme. https://redes.pe/buscador/

    Gracias.

    Responder
  7. Irene dice

    17 de noviembre de 2020 a las 23:01

    Hola!,
    gracias por tu excelente articulo, me ayudó muchísimo.
    Me gustaría que me orientaras respecto a cómo puedo incluir en un mapa leaflet, varios markers basados en una tabla de mi BD APEX.
    Gracias de antemano.

    Responder
  8. Omar dice

    29 de octubre de 2020 a las 15:45

    como puede unir dos ubicaciones siguiendo la direccion de su carretera

    Responder
  9. DaiNil dice

    30 de septiembre de 2020 a las 01:25

    Hola!,
    gracias por tu post!.
    Me surge una duda, para la que he encontrado diversas opciones en la red, pero me gustaría conocer vuestra opinión al respecto.

    Me quiero pasar de Gmaps a openMap(leaflet) y ando un poco disperso… 🙂
    Muestro un mapa para cada fila de una tabla, en base a una dirección, por lo que tengo que recuperar primero la lat&long. ¿qué recomiendas para integrar con openStreetMap? ¿nominatim?¿GeoSearch?¿algún otro?

    gracias!!!

    Responder
  10. ARTURO PONCE dice

    12 de septiembre de 2020 a las 18:02

    Es muy interesante este contenido muchas gracias por compartirlo

    Responder
  11. Irene dice

    9 de septiembre de 2020 a las 19:43

    Hola Daniel, muy buena tu explicacion, muchas gracias.
    Quizas puedas ayudarme en un pequeño problemita que tengo en apex 5.0.
    Necesito integrar un mapa en mi aplicacion pero lo he intentado con plugins, y con iframe y nada que me ejecuta.
    podrias colaborarme de cómo hacerlo con openstreetmap en apex?
    Gracias de antemano.

    Responder
  12. Elena dice

    6 de agosto de 2020 a las 11:17

    ¿No se puede prescindir de Mapbox para integrar OSM en la web? O tener alguna alternativa a Mapbox gratuita¿?

    Gracias por el artículo, muy bien explicado! 🙂

    Responder
  13. hector dice

    29 de julio de 2020 a las 04:46

    Se puede integrar para una aplicación tipo uber?
    Tengo una pero por defecto tiene integrada la api de google, por lo que hoy sabemos ya no es libre.
    Entonces puedo cambiar el código para integrar openstreetmap y tendría el mismo rendimiento para el seguimiento de pedidos?

    Responder
    • Daniel, Gestionatuweb.net dice

      29 de julio de 2020 a las 08:12

      Supongo que se podrá integrar, todo es mirar la documentación. Por otro lado no creo que la API de Google haya sido nunca libre, si no gratis. Te aconsejo que si haces el cambio no lo hagas porque sea gratis, si no porque ganarás en soberanía tecnológica y en privacidad. Cuanto más se apoye al proyecto, más rendimiento se le podrá sacar.

      Responder
  14. HUGO dice

    10 de junio de 2020 a las 04:22

    HOLA DANIEL…MIRA, HE SEGUIDO INVESTIGANDO, POR EL TRABAJO QUE ESTAMOS REALIZANDO Y SI ES POSIBLE PASAR DE GOOGLE A MAPBOX Y MUCHÍSIMAS COSAS MÁS, REALMENTE EL MAPBOX JUNTO CON OPEN STREET SON FANTÁSTICOS…ESPERO QUE TE SEA ÚTIL EL LINK DE ESTE VIDEO…SALUDOS DESDE PUEBLA, MÉXICO.
    https://www.youtube.com/watch?v=Yjb0LrPaRwo

    Responder
    • Daniel, Gestionatuweb.net dice

      10 de junio de 2020 a las 09:29

      Muchas gracias por la aportación Hugo. Un saludo!

      Responder
  15. HUGO dice

    8 de junio de 2020 a las 07:48

    Hola Daniel, ¿puedo hacer un mapa con fondo completamente negro y que se vean las calles de colores y los poligonos achurados en vez de rellenos transparentes?
    ¿Puedo exportarle mis poligonos de google earth pro a OSM y a Mapbox ?
    ¿se pueden usar estos planos ya sea de OSM o de Mapbox en una página de Oracle Apex y que todos los que abran mi sitio web los puedan ver, prender y apagar los indicadores y estar relacionados con la base de datos?
    Por último, me parece buenísimo tu sitio y lo que aportas en él, definitivamente me gustan estos mapas sin publicidad, limpios y muy agradables…muchas gracias, espero tus respuestas

    Responder
    • Daniel, Gestionatuweb.net dice

      8 de junio de 2020 a las 09:22

      Hola Hugo, gracias por tu comentario. El dibujado de mapa se puede elegir en el proveedor de mapas al que llama openstreetmap:

      id: ‘mapbox/streets-v11’

      Fíjate que al crear el mapa llamamos a este diseño en concreto. Écha un vistazo a la API de Mapbox a ver si necesitas registrarte para poder usar otros modelos.

      Los polígonos también se pueden definir, a la hora de declararlos con los parámetros:

      color: »,
      fillColor: »,
      fillOpacity: 0.5,

      Respecto a lo de exportar los planos de GoogleMaps, lo desconozco.
      Un saludo.

      Responder
  16. John Paez dice

    2 de marzo de 2020 a las 02:29

    Y por que no usar google maps, es menos complicado

    Responder
    • Daniel, Gestionatuweb.net dice

      2 de marzo de 2020 a las 08:27

      Porque este artículo está dirigido a quien quiere integrar una solución libre y construida por la comunidad en lugar de otra construida por una empresa que vive de vender tus datos, aunque sea más sencilla. Saludos.

      Responder
      • Luis Eric dice

        25 de marzo de 2020 a las 00:50

        Like!

        Responder
    • Sebastian dice

      2 de junio de 2021 a las 17:32

      Pero que comentario boludo….

      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