Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Observatorio-GC/Nodos/llms.txt

Use this file to discover all available pages before exploring further.

The map ships with four base maps selectable from the layer control — ESRI Satellite, Argenmap (IGN), OpenTopoMap, and OpenStreetMap. They are defined at the top of the <body> script block in index.html and registered in the baseMaps object that is passed to L.control.groupedLayers(). Only one base map is active at a time; the one included in the layers array of L.map() is the default shown on initial load.

​
Pre-configured base maps

​
Argenmap — Argentina national mapping service

Argenmap is served by the Instituto Geográfico Nacional (IGN) via the WMTS protocol. It requires the leaflet-tilelayer-wmts.js plugin (already loaded in index.html):
index.html
var mapabase_argenmap = new L.TileLayer.WMTS('https://wms.ign.gob.ar/geoserver/capabaseargenmap/gwc/service/wmts?', {
    layer: 'capabaseargenmap',
    style: "normal",
    tilematrixSet: "EPSG:3857",
    format: "image/png",
    attribution: " <a href='https://www.ign.gob.ar/AreaServicios/Argenmap/IntroduccionV2'> IGN - Argenmap v2 </a> | <a href='https://www.godoycruz.gob.ar/'>Secretaria de Ambiente y Desarrollo Sustentable - Godoy Cruz</a> | <a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy "
});

​
ESRI Satellite — default base map on load

ESRI World Imagery provides high-resolution aerial photography. It is the default base map because it is included in the layers array passed to L.map():
index.html
var esriUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    esriAttrib = "Powered by &copy <a href='https://www.esri.com/en-us/home'> ESRI </a> | <a href='https://www.godoycruz.gob.ar/'>Secretaría de Ambiente y Desarrollo Sustentable - Godoy Cruz</a>",
    mapabase_esri = L.tileLayer(esriUrl, {
        maxZoom: 20,
        attribution: esriAttrib
    });

​
OpenTopoMap

OpenTopoMap renders elevation and terrain detail derived from OpenStreetMap and SRTM data:
index.html
var otUrl = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
    otAttrib = 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
    mapabase_ot = L.tileLayer(otUrl, {
        maxZoom: 20,
        attribution: otAttrib
    });

​
OpenStreetMap

OpenStreetMap is also defined in index.html and available for use:
index.html
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    mapabase_osm = L.tileLayer(osmUrl, {
        maxZoom: 20,
        attribution: osmAttrib
    });

​
The baseMaps object and changing the default

The baseMaps object maps the label strings shown in the layer control to their corresponding layer variables:
index.html
var baseMaps = {
    "OpenTopoMap": mapabase_ot,
    "Argenmap": mapabase_argenmap,
    "ESRI Satelital": mapabase_esri,
};
The default base map is determined by which layer variable appears in the layers array when L.map() is constructed. Currently ESRI Satellite is the default:
index.html
var map = L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile,
    layers: [mapabase_esri, godoycruz]  // mapabase_esri loads on start
}).setView([-32.9337, -68.8978], 13);
To change the default to Argenmap, replace mapabase_esri with mapabase_argenmap in that array:
index.html
var map = L.map('map', {
    dragging: !L.Browser.mobile,
    tap: !L.Browser.mobile,
    layers: [mapabase_argenmap, godoycruz]  // argenmap is now default
}).setView([-32.9337, -68.8978], 13);

​
Adding a new tile layer

To introduce a tile provider that is not yet defined, declare the variable before the /* OVERLAYS Y GRUPOS */ section and add it to baseMaps. For example, to add OpenStreetMap to the layer switcher:
index.html
// Already defined in index.html — just add to baseMaps:
var baseMaps = {
    "OpenStreetMap": mapabase_osm,
    "OpenTopoMap": mapabase_ot,
    "Argenmap": mapabase_argenmap,
    "ESRI Satelital": mapabase_esri,
};
For a provider not already in the file, define it first:
index.html
var mapabase_osm = L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        maxZoom: 20,
        attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }
);

​
Changing the initial map view

The map centres on Godoy Cruz at zoom level 13 by default. Adjust the setView() call to change the starting position or zoom:
index.html
// Current default: centre on Godoy Cruz, zoom 13
map.setView([-32.9337, -68.8978], 13);

// Zoom in on a specific district:
map.setView([-32.9200, -68.8500], 15);
Coordinates are [latitude, longitude] in decimal degrees (WGS 84). Zoom levels range from 1 (world) to 20 (street level); the tile providers used here all support maxZoom: 20.
Argenmap uses the WMTS protocol via the leaflet-tilelayer-wmts.js plugin (loaded in index.html as scripts/leaflet-tilelayer-wmts.js), which is why it is instantiated with new L.TileLayer.WMTS(...) instead of L.tileLayer(...). The other three providers — ESRI, OpenTopoMap, and OpenStreetMap — use standard slippy-map TMS tile URLs and work with the built-in L.tileLayer() constructor without any plugin.

Build docs developers (and LLMs) love

Get started for freeTalk to us