Hace ya un tiempo, tuve una entrevista técnica sobre html, css, y javascript.

Las tecnologías que me pedían no eran nada novedosas para mí, pero el desafío estuvo en que me pidieron hacer un MAPA.

Siento compasión por el Nico del pasado, y me hubiera gustado tener un tutorial más ameno de cómo hacerlo, es por eso que hoy les traigo justamente eso, un tutorial de cómo agregar un mapa a tu web con Leaflet.

El propósito de este artículo es que prácticamente cualquier persona pueda seguir y entender su contenido, por lo que las explicaciones intentan ser lo más abarcativas posibles.

Empecemos.


Conocimientos Necesarios

Para poder seguir con facilidad este tutorial, van a necesitar lo siguiente:

  1. Conocimientos básicos de HTML, CSS, y JAVASCRIPT (igual voy a ir comentando todo para que se vaya entendiendo)
  2. Ganas de aprender!

Lo que vamos a hacer

  1. Vamos a crear un archivo HTML, que va a contener nuestro mapa
  2. Vamos a darle estilos a nuestro mapa desde el archivo CSS
  3. Vamos a usar JAVASCRIPT para poder renderizar nuestro mapa (mostrarlo)

Empecemos con el Set Up

  1. Lo primero que vamos a hacer es crear una carpeta que se llame mapa. La podés crear en cualquier lugar (acordate la ubicación igual)

Dentro de esa carpeta vamos a crear 3 archivos:

  • Un archivo que se llame index.html
  • Un archivo que se llame styles.css
  • Un archivo que se llame script.js

Y con eso ya hicimos la configuración básica de nuestro proyecto!


ARCHIVO index.html

El archivo index.html va a contener todo nuestro lenguaje HTML, que es nuestro esqueleto de la página.

Lo primero que vamos a hacer es crear una estructura básica de HTML, si no sabés que es eso, podes leer un poco más acá.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
<!-- este es el título que va a tener nuestra página -->
  </head>
  <body>
<!-- Acá adentro vamos a poner nuestro contenido visible -->
  </body>
</html>

Ahora bien, lo más importante es que todo lo que pongamos dentro de la etiqueta <body> </body> es lo que vamos a ver en nuestra página web.

Lo único que vamos a poner dentro de nuestra etiqueta body es lo siguiente:

1- Una etiqueta <div> </div>, donde dentro de ella vamos a renderizar (mostrar) el mapa:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="map"></div>
<!-- Insertamos nuestro mapa -->
  </body>
</html>

Noten que a la etiqueta <div></div> le agregué un id con el valor “map”
Esto es para más adelante poder acceder a esa etiqueta que tiene el nombre “map” y darle estilos o hacerla interactiva desde javascript.

Ahora, lo que vamos a hacer es importar código javascript y css de Leaflet, que lo que hace es resolver muchos problemas que en otro caso tendríamos que resolver nosotros.

Para hacerlo, siguiendo la documentación de Leaflet:

En nuestro archivo index.html agregamos dentro de la etiqueta <head></head> lo siguiente:

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

Esto lo que hace es traer los estilos de Leaflet para usar por defecto.

También, en nuestro archivo index.html, y debajo de la línea que recién agregamos, vamos a poner lo siguiente:

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

Esta línea SI O SI debe estar debajo de los estilos de Leaflet y dentro de la etiqueta <head></head>.

Lo que va a hacer esta línea es traernos el javascript de Leaflet para facilitarnos la renderización del mapa.

Además, vamos a traer nuestros propios estilos desde nuestro archivo styles.css de la siguiente manera:

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

Y por último vamos a traernos nuestro archivo script.js a nuestro index.html.Para hacerlo tenemos que poner justo antes de cerrar la etiqueta <body></body> la siguiente línea:

  <script src="script.js"></script>

En síntesis nuestro archivo index.html debería quedar:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
    <link rel="stylesheet" href="styles.css" /> 
  </head>
  <body>
    <div id="map"></div>
    <script src="script.js"></script>
  </body>
</html>

Y con estos pasos terminamos con nuestro archivo index.html


ARCHIVO styles.css

El archivo styles.css va a contener todo nuestro lenguaje CSS, que es la manera que tenemos de darle estilos (colores, tamaños, formas, etc) a nuestras etiquetas HTML.

Lo único que vamos a hacer en este archivo, es darle un tamaño a nuestro mapa. Por eso, dentro de nuestro archivo styles.css vamos a escribir lo siguiente:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

Si querés investigar un poco más sobre CSS podés entrar acá.

Igualmente, lo que están haciendo estas líneas, es decirle a nuestro CSS que vaya a buscar la etiqueta de nuestro HTML que tenga asignado un ID con el nombre de “map” (algo que ya hicimos en el paso 1 de nuestro index.html) y asignarle una altura del 100% del tamaño del body (que también es 100%).

También le estamos diciendo a las etiquetas html y body, que no tengan margen ni padding.

¡Y eso es todo lo que vamos a hacer con nuestro archivo styles.css!


ARCHIVO script.js

En nuestro archivo script.js es donde realmente vamos a hacer la “magia” para que nuestro mapa funcione.

Como ya importamos el archivo javascript de Leaflet, tenemos a nuestra disposición ciertas herramientas que vamos a usar a continuación.

Empecemos:

  1. Vamos a declarar una variable que lea la etiqueta div con el id "map" que creamos, y a esa etiqueta le vamos a agregar nuestro mapa:
const map = L.map("map").setView([-34.595986, -58.3724715], 10);

Lo que estamos haciendo es declarar una variable que se llama map y a esa variable le agregamos el valor L que es la manera que tiene leaflet de ejecutar su javascript.

Entonces le decimos:

L.map(“map”)
  • Leaflet, quiero que el mapa esté adentro de la etiqueta que tenga el id “map”.
.setView(([-34.595986, -58.3724715], 10)
  • Leaflet, ejecutá la función setView(), y te voy a pasar dos parámetros, el primero va a ser un array con las coordenadas(x, y) del punto donde va a aparecer por defecto el mapa, y el segundo va a ser el zoom, cuanto mas chico el número menos zoom tiene el mapa.

Después vamos a declarar otra variable, que va a hacer que muestre los tiles. Los tiles son las imágenes que conforman el mapa (son muchas).

const imagenes = L.tileLayer(  "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png").addTo(map);

Acá lo que le estamos diciendo es:

L.tileLayer( "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png")
  • Leaflet, usá las imágenes que están en esta url

Y después ejecutamos la función addTo(map)

addTo(map);

Y acá le decimos:

  • Leaflet, agrega estas imágenes al mapa que cree en la variable map.

En síntesis nuestro archivo script.js debería haber quedado algo similar a esto:

const map = L.map("map");
//creamos el mapa dentro de la etiqueta con id "map"
const ubicacion = map.setView([-34.595986, -58.3724715], 10);
// hacemos el mapa se cree en las cordenadas -34.595986, -58.3724715
// con zoom 10

const imagenes = L.tileLayer("https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
).addTo(map);
//agregamos las imágenes al mapa

Con todo esto, deberíamos tener un mapa funcional!


Lo extra

Por ahora, no estamos haciendo nada con nuestro mapa, el desafío que les dejo a los que hayan podido llegar hasta acá, es que puedan agregar marcadores al mapa.

La idea es que eventualmente puedan hacer algo similar a esto.

Toda la documentación que utlicé para escribir este artículo se encuentra aquí:


Espero que les haya servido como guía para iniciarse con el desarrollo web, o con los mapas.

Me pueden mandar sus consultas o mejoras del código (porque hay mil cosas para mejorar) a mi twitter @ncastrogarcia

Muchas gracias por tu tiempo!