Utilizar mapa base de IGN en Leaflet

Cómo incoporar el mapa base de IGN en una página web utilizando Leaflet

Leaflet es una biblioteca de JavaScript de código abierto que se utiliza para crear aplicaciones de mapas web. Permite a desarrolladores sin experiencia en SIG visualizar fácilmente mapas web.

1. Incluir la hoja de estilos y la biblioteca JS de Leaflet en la cabecera de una página web

Incorpar el archivo CSS y script JS de Leaflet en la sección head de la página web.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

2. Crear un contenedor (div) en la página web en donde se desee incluir el mapa

Colocar un elemento div en el lugar de la página web donde se desea mostrar el mapa. Es importante completar el atributo id del contenedor.
Leaflet necesita que se establezca un alto específico para el div. Esto es posible realizarlo con CSS o bien definiendo el estilo con el atributo style en el elemento que se utilice.

<div id="mapa" style="height:500px;"></div>

En el código de ejemplo, se indica el valor mapa para el atributo id y un alto de 500px para el contenedor.

3. Convertir el contenedor (div) en un mapa

Es necesario que el div haya sido creado antes de convertirlo en un mapa. A partir del código que se observa a continuación, se puede convirtir el div con id="mapa" en un mapa de Leaflet.

<script type="text/javascript" >
var mimapa = L.map('mapa').setView([-40, -59], 4);
</script>

En el código de ejemplo, se está indicando que el mapa esté centrado en la latitud -49, longitud -59 y nivel de zoom 4. Para cambiar el centro del mapa, modificar el nivel del zoom, agregar un marcador, o realizar otras operaciones, por favor, consultar el manual de Leaflet.

4. Agregar el mapa base de IGN

Para agregar un mapa base a Leaflet se debe contar con una instancia de un mapa, en nuestro ejemplo, está en la variable mimapa y también se debe conocer la URL del servicio OGC que brinda un mapa base.

<script type="text/javascript" >
L.tileLayer('https://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/capabaseargenmap@EPSG%3A3857@png/{z}/{x}/{-y}.png', {
    attribution: '<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | <a href="http://www.ign.gob.ar/AreaServicios/Argenmap/IntroduccionV2" target="_blank">Instituto Geográfico Nacional</a> + <a href="http://www.osm.org/copyright" target="_blank">OpenStreetMap</a>',
      minZoom: 3,
      maxZoom: 18
}).addTo(mimapa);
</script>

En el código de ejemplo, se está utilizando la URL https://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/capabaseargenmap@EPSG%3A3857@png/{z}/{x}/{-y}.png como servicio de mapa base, se indica la atribución del mapa y se permite un zoom con profundidad desde 3 hasta 18.
En caso de querer utilizar el mapa base gris del IGN, reemplazar la URL anterior por https://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/mapabase_gris@EPSG%3A3857@png/{z}/{x}/{-y}.png

5. El código, hasta el momento, debiera verse de la siguiente forma

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</head>
<body>                              
  <div id="mapa" style="height:500px;"></div>
    <script type="text/javascript" >
    //Inicializar el mapa
    var mimapa = L.map('mapa').setView([-40, -59], 4);
    //Agregar mapa base de IGN
    L.tileLayer('https://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/capabaseargenmap@EPSG%3A3857@png/{z}/{x}/{-y}.png', {
        attribution: '<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | <a href="http://www.ign.gob.ar/AreaServicios/Argenmap/IntroduccionV2" target="_blank">Instituto Geográfico Nacional</a> + <a href="http://www.osm.org/copyright" target="_blank">OpenStreetMap</a>',
        minZoom: 3,
        maxZoom: 18
    }).addTo(mimapa);
    </script>
</body>
</html>

Ver el código en funcionamiento

Ver el código en funcionamiento con el mapa gris

6. Agregar marcadores sobre el mapa

Además del mapa base, se pueden agregar otros objetos al mapa, como ser, marcadores, lineas, polígonos y mucho más. A continuación veremos como agregar un marcador.

<script type="text/javascript" >
var marcador = L.marker([-37, -65]).addTo(mimapa);
</script>

En el ejemplo anterior se agregó un marcador al mapa mimapa indicando que se muestre en la latitud -37 y en la longitiud -65.

7. Utilizar ventanas emergentes

Las ventanas emergentes (o popups) se utilizan generalmente cuando desea mostrar información sobre un objeto en particular.

<script type="text/javascript" >
marcador.bindPopup("¡Hola mundo!").openPopup();
</script>

En el ejemplo anterior, se vincula información con un marcador específico. Llamando al método openPopup() la ventana emergente aparecerá abierta por defecto.

8. El código final debiera verse de la siguiente forma

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</head>
<body>                              
  <div id="mapa" style="height:500px;"></div>
    <script type="text/javascript" >
    //Inicializar el mapa
    var mimapa = L.map('mapa').setView([-40, -59], 4);
    //Agregar mapa base de IGN
    L.tileLayer('https://wms.ign.gob.ar/geoserver/gwc/service/tms/1.0.0/capabaseargenmap@EPSG%3A3857@png/{z}/{x}/{-y}.png', {
        attribution: '<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | <a href="http://www.ign.gob.ar/AreaServicios/Argenmap/IntroduccionV2" target="_blank">Instituto Geográfico Nacional</a> + <a href="http://www.osm.org/copyright" target="_blank">OpenStreetMap</a>',
        minZoom: 3,
        maxZoom: 18
    }).addTo(mimapa);
    //Agregar un marcador
    var marcador = L.marker([-37, -65]).addTo(mimapa);
    //Agregar popup al marcador
    marcador.bindPopup("¡Hola mundo!").openPopup();
    </script>
</body>
</html>

Ver el código en funcionamiento

Ver el código en funcionamiento con el mapa gris

Institucional

Representaciones Internacionales

Administración

Marco Legal

Transparencia

Geodesia

Cartografía

Información Geoespacial

Sensores remotos

Geografía

I+D

Servicios Web de Mapas

Publicaciones

Ventas

Capacitación

Museo Geográfico

Biblioteca