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.

Popup content is defined by onEachFeature callback functions collected in js/popups.js. Each function receives two arguments — feature (the GeoJSON feature object) and layer (the Leaflet layer instance for that feature) — and calls layer.bindPopup(htmlString) with an HTML string built from feature.properties. The map’s L.geoJson() calls in index.html reference these functions by name via the onEachFeature option, so every feature in the dataset gets the same popup template with its own property values substituted in.

​
Built-in popup patterns

​
Simplest popup — single property

agregarPopupfarmacias is the minimal pattern used as a fallback for many layers. It renders just the feature name in bold:
js/popups.js
function agregarPopupfarmacias(feature, layer) {
    if (feature.properties && feature.properties.Nombre) {
        layer.bindPopup("<strong>" + feature.properties.Nombre + "</strong>");
    }
}

​
Multi-field popup

agregarPopupfarmaciasgc extends the basic pattern to show address, phone number, and district on separate lines. This is the popup used for the pharmacy layer:
js/popups.js
function agregarPopupfarmaciasgc(feature, layer) {
    if (feature.properties && feature.properties.Nombre) {
        layer.bindPopup(
            "<strong>" + feature.properties.Nombre + "</strong><br/>" +
            feature.properties.Direccion + "<br/>" +
            feature.properties.Telefono + "<br/>" +
            feature.properties.Distrito
        );
    }
}

​
Image popup

agregarPopupturismo embeds a photo from the img/turismo/ folder using the filename stored in the Fotos property. The image is centred and sized to 200×160 px:
js/popups.js
function agregarPopupturismo(feature, layer) {
    if (feature.properties && feature.properties.Nombre) {
        layer.bindPopup(
            "<strong>" + feature.properties.Nombre + "</strong><br/>" +
            feature.properties.Ubicacion + "<br/>" +
            "<img src='img/turismo/" + feature.properties.Fotos +
            "' height='160px' width='200px' style='display:block; margin: auto; margin-top:7px;' />"
        );
    }
}

​
Node popup with a labelled field

agregarPopupNodos is the popup used for all district node polygons (Grade 1, Grade 2, and proposed nodes). It labels the second field explicitly so the content is self-explanatory:
js/popups.js
function agregarPopupNodos(feature, layer) {
    if (feature.properties && feature.properties.NOMBRE) {
        layer.bindPopup(
            "<strong>" + feature.properties.NOMBRE + "</strong><br/>" +
            "Servicios faltantes: <strong>" + feature.properties.DESCRIPTIO
        );
    }
}

​
Writing a custom popup function

1
Add the function in js/popups.js
2
Open js/popups.js and add a new function at the end of the file. Replace MiCapa, nombre, categoria, and direccion with the actual property names from your GeoJSON dataset (check them with console.log(feature.properties) in your browser’s developer tools if you are unsure):
3
function agregarPopupMiCapa(feature, layer) {
    if (feature.properties && feature.properties.nombre) {
        layer.bindPopup(
            "<strong>" + feature.properties.nombre + "</strong><br/>" +
            "Categoría: " + feature.properties.categoria + "<br/>" +
            "Dirección: " + feature.properties.direccion
        );
    }
}
4
Reference it in the layer declaration in index.html
5
In the /* OVERLAYS Y GRUPOS */ section of index.html, pass your new function as onEachFeature when declaring the layer:
6
var miCapa = L.geoJson(MisDatos, {
    pointToLayer: crearIconoComercio,
    onEachFeature: agregarPopupMiCapa
});

​
Common popup patterns reference

FunctionKey property checkedTypical content
agregarPopupfarmaciasNombreName only
agregarPopupfarmaciasgcNombreName, address, phone, district
agregarPopupSaludNombre_1Name and address
agregarPopupescuelasNombre_1Name, level, management type
agregarPopupHospitalNombre_1Name, address, jurisdiction
agregarPopupturismoNombreName, location, embedded photo
agregarPopupGastronomiaNombreName, address, hours, contact
agregarPopupGastronomia2NombreName, address, contact
agregarPopupNodosNOMBREName and missing services
agregarPopupPolosNOMBREName and planning proposal
agregarPopupzoniLayerZoning category name
agregarPopupDistritosDepartamentalesNombre_1District name and area (km²)
agregarPopupcuencasNombre_1Watershed name and surface area
agregarPopupDepenNombre_1Name; iframe embed if ENLACE present
agregarPopupCaminabilidadNameStreet name and walkability description
Popup HTML supports any inline HTML. You can include hyperlinks (<a href="...">), tables (<table>), and additional images. The agregarPopupDepen function even embeds a full iframe with a municipal information panel when the feature has an ENLACE property. Keep popup content concise on mobile — Leaflet popups are scrollable but very wide content can overflow on small screens.
Always guard property access with feature.properties && feature.properties.PropName before using a value. If a feature in the dataset is missing a property — which is common in real-world GeoJSON exports — accessing it directly without a check will throw a JavaScript TypeError and break popup binding for all subsequent features in the same layer.

Build docs developers (and LLMs) love

Get started for freeTalk to us