Saltar a contenido

1. Creando un mapa.

Autores

Un esqueleto vacío

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Mi primer visor con Leaflet</title>
</head>
<body>
</body>
</html>

Añadimos la librería Leaflet desde un CDN

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <title>Mi primer visor con Leaflet</title>
</head>
<body>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
</body>
</html>

Instanciamos un objeto Map

En Leaflet prácticamente podemos crear todos los objetos de dos formas:

  • Mediante new
  • Mediante una función factoría. Esta forma de hacerlo es lo más habitual y la que usaremos durante el curso. Por eso usamos L.map y no new L.Map

Atención

  • Al contrario que en OpenLayers la obtención de un objeto L.Map requiere que al menos le pasemos un HTMLElement o un id
  • Además de nuevo al contrario que en OpenLayers para que se muestre algún elemento en el DOM Leaflet exige conocer la propiedad `height' del elemento, que podemos especificar de la forma que queramos.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <title>Mi primer visor con Leaflet</title>
</head>
<style>
    .map {
        height: 200px;
    }

</style>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        let map = L.map('map');

    </script>
</body>
</html>

Con esto veremos un espacio vacío y los controles de zoom

Posición inicial del Mapa

Debemos indicar a Leaflet cual será la posición inicial del mapa. Hay muchas formas de hacer esto. Por ejemplo diciendo que encaje el mapa dentro de unos límites (bounds), pero lo más habitual es mediante setView o inicializando Map directamente con un center y un zoom.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <title>Mi primer visor con Leaflet</title>
    <style>
        .map {
            height: 200px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        map = L.map('map', {
            center: [-8.72, 42.24],
            zoom: 4,
        });

    </script>
</body>
</html>

Añadimos nuestra primera capa

El objeto Mapa por si sólo no contiene información geográfica. Debemos añadirle capas. Hay distintos tipos de capas que iremos viendo, por ahora añadiremos OSM. Y también un poco de css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <title>Mi primer visor con Leaflet</title>
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        let map = L.map('map', {
            center: [-8.72, 42.24],
            zoom: 4,
        });
        let osmTileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });
        map.addLayer(osmTileLayer);

    </script>
</body>
</html>

Atención

Uops. ¿No estás viendo Vigo en el mapa, si no África?. Esta es una lección importante que repasaremos más adelante. No todos los "Sistemas de Coordenadas", ni todas las librerías entienden el mismo orden (x e y), (latitud, longitud) cuando usamos un array para especificar las coordenadas de un punto geográfico.

En este momento llega con decir que:

  • Cuando uses una librería debes asegurarte de que estás creando el array de coordenadas en el orden especificado por la librería o crear un objeto específico en lugar de un array. Por ejemplo leaflet tiene el objeto L.latLng
  • Leaflet usa LatLong, mientras que OpenLayers usa LongLat
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <title>Mi primer visor con Leaflet</title>
    <style>
        html,
        body,
        .map {
            height: 100%;
            margin: 0px;
        }

    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
        let map = L.map('map', {
            center: {
                lat: 42.24,
                lon: -8.72
            },
            zoom: 4,
        });
        let osmTileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        });
        map.addLayer(osmTileLayer);

    </script>
</body>
</html>