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.

Because the Observatorio Territorial GC — Nodos project is pure HTML and vanilla JavaScript, there is no build step, no dependency installation, and no compilation. The entire application is a single index.html file that references local assets and a handful of CDN-hosted scripts. To run it locally you only need a static HTTP server — any tool that can serve files over http:// will work. Opening index.html directly via the file:// protocol is not recommended, as some browsers block cross-origin script loading for locally referenced files.
1

Clone the repository

Clone the project from GitHub and enter the directory:
git clone https://github.com/Observatorio-GC/Nodos.git && cd Nodos
The repository contains no node_modules, no lock files, and no build artefacts — just HTML, CSS, JavaScript, and GeoJSON data files.
2

Serve it locally

Start any static file server from inside the Nodos/ directory. Python’s built-in HTTP server requires no installation on most systems:
python3 -m http.server 8080
Then open your browser at:
http://localhost:8080
The Leaflet map will load centred on Godoy Cruz ([-32.9337, -68.8978] at zoom level 13) with the ESRI Satellite base layer and the municipal boundary (godoycruz) displayed by default.
Any other static server works equally well — for example npx serve ., live-server, or VS Code’s Live Server extension.
3

Explore overlay layers

The grouped layer control sits in the top-right corner of the map. Click it to expand the panel. You will see:
  • A Base Layers section at the top with radio buttons to switch between OpenTopoMap, Argenmap, and ESRI Satelital.
  • Multiple overlay groups below, each with individual checkboxes — Estructura Urbana, Nodos Grado 1, Nodos Grado 2, Propuestas, Caminabilidad, Administración, Servicios, Comercio, Cultura, Culto, Educación, Salud, and Esparcimiento.
Check any overlay to draw it on the map. Certain overlays (Ciclovías Existentes, Ciclovías Proyectadas DAMI II, Ciclovías en Ejecución DAMI II, and Índice Final de Caminabilidad) also trigger a legend panel to appear in the bottom-left corner, showing distance or quality-rating keys.
4

Click a map feature to inspect its popup

Click any point marker or polygon on the map to open its popup. The popup content depends on the layer:
  • Centros de Salud — shows the facility name (Nombre_1) and street address (Direccion).
  • Establecimientos Educativos — shows name, education level (Nivel), and management type (Gestion).
  • Nodos (district polygons) — shows the node name (NOMBRE) and a list of missing services (DESCRIPTIO).
  • Gastronomía layers (bars, restaurants, cafés) — shows name, address, opening hours, and contact details.
Use the PolylineMeasure tool (ruler icon on the left toolbar) to measure distances between features, and the print button to export the current map view.

​
Understanding the data pipeline

Every geographic dataset in the project follows the same simple loading pattern.

​
Step 1 — GeoJSON stored as a JS variable

Each data file inside scripts/ declares a global JavaScript variable whose value is a GeoJSON FeatureCollection. For example, scripts/Centrosdesalud.js begins: 
var centrosdesalud = {
  "type": "FeatureCollection",
  "name": "Centros de Salud",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
    ...
  ]
};
This approach avoids any fetch() / AJAX call and lets the data be consumed synchronously during page load.

​
Step 2 — The script tag includes the variable into the page

index.html loads every dataset via a plain <script> tag in the <head>: 
<script type="text/javascript" src="scripts/Centrosdesalud.js"></script>
Once this tag is evaluated, the global variable centrosdesalud is available everywhere on the page.

​
Step 3 — Leaflet consumes the variable directly

Inside the <body> script block, L.geoJson() wraps the raw GeoJSON variable into a Leaflet layer. The pointToLayer option maps each GeoJSON point feature to a custom marker icon, and onEachFeature binds a popup to every feature: 
centrosdesalud = L.geoJson(centrosdesalud, {
    pointToLayer: crearIconoAsistencia,
    onEachFeature: agregarPopupSalud
}),
  • crearIconoAsistencia is a factory function defined in js/iconos.js that returns L.marker(latlng, { icon: iconoAsistencia }).
  • agregarPopupSalud is defined in js/popups.js and calls layer.bindPopup(...) with the feature’s Nombre_1 and Direccion properties.
The resulting layer object is then registered under a human-readable label in the groupedOverlays object, which is passed to L.control.groupedLayers(): 
var groupedOverlays = {
    "SALUD": {
        "Centros de Salud": centrosdesalud,
        "Clínicas Privadas":  clinicaspriv,
        "Hospitales": hospital,
    },
    // ...
};

var opciones_groupedlayers = { groupCheckboxes: false };

L.control.groupedLayers(baseMaps, groupedOverlays, opciones_groupedlayers).addTo(map);

​
Adding your own layer

To add a new dataset, follow these three steps:
  1. Export your GeoJSON and save it as scripts/MiDataset.js, declaring it as var MiDataset = { ... };.
  2. Add <script type="text/javascript" src="scripts/MiDataset.js"></script> to the <head> of index.html.
  3. Create a Leaflet layer variable and register it in groupedOverlays inside the <body> script block.

​
Next steps

Project Structure

Deep-dive into the repository layout — every directory, file, and the role it plays.

Introduction

Read about the project’s background, technology stack, and all available overlay categories.

Build docs developers (and LLMs) love

Get started for freeTalk to us