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 uses L.control.groupedLayers() from the leaflet.groupedlayercontrol plugin. This renders an expandable panel in the top-right of the map with sections for base maps and thematic overlay groups. Users can switch between base maps via radio buttons and toggle individual thematic overlays on or off using checkboxes, all without reloading the page.

​
Initialisation

The grouped layer control is added to the map in js/funcionesMapa.js after both the baseMaps and groupedOverlays objects are defined in index.html:
js/funcionesMapa.js
L.control.groupedLayers(baseMaps, groupedOverlays, opciones_groupedlayers).addTo(map);
The options object is declared in index.html just before the external script is loaded:
index.html
var opciones_groupedlayers = {
    groupCheckboxes: false
};
Setting groupCheckboxes: true would add a master checkbox to each group header, allowing the user to toggle every layer inside that group with a single click.

​
baseMaps structure

Three tile-layer base maps are offered. Only one can be active at a time; they appear as radio buttons at the top of the control panel.
index.html
var baseMaps = {
    "OpenTopoMap": mapabase_ot,
    "Argenmap": mapabase_argenmap,
    "ESRI Satelital": mapabase_esri,
};

​
groupedOverlays structure

Thematic overlays are organised into named groups. Each group renders as a collapsible section inside the control panel, and each layer within it renders as an independent checkbox. The full map ships with twelve groups; a representative excerpt is shown below:
index.html
var groupedOverlays = {
    "ESTRUCTURA URBANA": {
        "Distritos (Ordenanza N° 7124/2021)": Depa,
        "Barrios Consolidados": BarriosConsolidados,
        "Límite Urbano (Ordenanza Nº 7074/2020)": limiurb,
        "Zonificación (Ordenanza Nº 4947/03)": zonificacion,
    },
    "NODOS GRADO 1": {
        "Centro": nodosCentro1,
        "Trapiche": nodosTrapiche1,
    },
    "NODOS GRADO 2": {
        "Gob. Benegas": nodosBenegas2,
        "Centro": nodosCentro2,
        "San Francisco del Monte": nodosMonte2,
        "Villa Hipódromo": nodosHipodromo2,
        // ... more entries
    },
    // ... more groups (SERVICIOS, COMERCIO, CULTURA, SALUD, etc.)
};
Each value (Depa, nodosCentro1, etc.) is a Leaflet layer object — typically a L.geoJSON layer — created earlier in index.html.

​
Overlay add/remove events

Some overlays have an accompanying legend panel rendered in the page HTML. When one of these layers is toggled, js/funcionesMapa.js listens to the map’s overlayadd and overlayremove events and shows or hides the matching legend element by constructing its DOM id from the layer name.
js/funcionesMapa.js
map.on('overlayadd', onOverlayAdd);
map.on('overlayremove', onOverlayRemove);

function onOverlayAdd(e) {
    idlayer = "";
    if (e.name == "Ciclovías Existentes") {
        idlayer = "cicloviasexist";
    } else if (e.name == "Ciclovías Proyectadas DAMI II") {
        idlayer = "cicloDami"
    } else if (e.name == "Ciclovías en Ejecución DAMI II") {
        idlayer = "cicloEjec"
    } else if (e.name == "Índice Final de Caminabilidad") {
        idlayer = "traza";
    }
    document.getElementById("ref_" + idlayer).style.display = 'block';
}
onOverlayRemove mirrors this logic, setting display to 'none' instead of 'block'. The pattern "ref_" + idlayer maps each layer name to the id attribute of its legend <div> in index.html.

​
Scale control

A default Leaflet scale bar is added at the bottom-left of the map:
js/funcionesMapa.js
L.control.scale().addTo(map);

​
Mouse position display

Live cursor coordinates are shown via the L.Control.MousePosition plugin, which reads from scripts/L.Control.MousePosition.js and is initialised in index.html:
index.html
L.control.mousePosition().addTo(map);
The control appends a small readout to the map UI that updates in real time as the user moves the mouse, displaying latitude and longitude of the current cursor position.

Build docs developers (and LLMs) love

Get started for freeTalk to us