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.
After the Leaflet map and all GeoJSON layers are created, a set of style functions is called to apply dynamic styles based on feature.properties. Each function iterates over its target layer with layer.eachLayer() and calls featureInstanceLayer.setStyle() with a colour derived from a specific property value. This approach allows each feature in a shared layer to be coloured individually without creating separate GeoJSON layers per category.
All style functions documented here are defined in js/popups.js, alongside the popup functions. The calls to those functions appear in the inline <script> block inside index.html. To find or edit a style function, search for function estilo in js/popups.js.
Style functions called at map initialisation
The following calls appear in index.html immediately after L.map() is constructed, under the comment /* FUNCIONES DE ESTILO DE OVERLAYS */:
estiloDistritosDepartamentales();
estilozoni();
estilored();
estilocloacas();
estilocuencas();
estiloley();
estiloinundacion();
estilosuelo();
estilometro();
estilosendero();
estilocaminabilidad();
Function reference
| Function | Layer Variable | Property Used | Description |
|---|
estiloDistritosDepartamentales() | Depa | qc_id (0–8) | Colours departmental district polygons by numeric ID; fills at 25% opacity |
estilozoni() | zonificacion | Layer (string) | Fills zoning polygons by land-use category name; opacity 35% |
estilored() | redesagua | id (1–3) | Styles water distribution network lines by type ID; opacity 75% |
estilocloacas() | sistcloacal | id (1–3) | Styles sewer/cloacal network lines by type ID; opacity 75% |
estilocuencas() | cuencas | qc_id (1–3) | Colours hydrological basins with a diagonal stripe pattern via L.StripePattern |
estiloley() | zonaley | id (1–5) | Styles Ley 4886 zone polygons in greyscale shades; opacity 75% |
estiloinundacion() | inundacion | id (1–4) | Applies blue flood-risk gradient to inundation zones; opacity 75% |
estilosuelo() | suelo | id (1–3) | Colours soil classification polygons; opacity 75% |
estilometro() | metro | id (1–2) | Styles the metrotranvía line: red for active track, grey for other segments |
estilosendero() | sendGeo | id (1) | Styles the geological trail in burnt-orange (#cf7601); opacity 75% |
estilocaminabilidad() | traza | PROMEDIO_P (1–4) | Colours walkability segments by average score; weight 5; opacity 100% |
Colour schemes
estiloDistritosDepartamentales — Depa layer
Colours each of the nine departmental districts by its qc_id integer:
qc_id | Colour | Hex |
|---|
| 0 | Purple | #93278f |
| 1 | Blue | #0e0ef0 |
| 2 | Yellow | #efba00 |
| 3 | Orange | #ec6726 |
| 4 | Green | #139b48 |
| 5 | Dark Red | #941313 |
| 6 | Navy | #105689 |
| 7 | Teal | #41b6a5 |
| 8 | Pink | #ff3eb2 |
fillOpacity: 0.25.
estilozoni — zonificacion layer
Colours zoning polygons by the string value of the Layer property:
Layer value | Colour | Hex |
|---|
CEMENTERIO | Blue | #202bf1 |
CENTRO CIVICO | Dark Green | #035d04 |
COMERCIAL | Blue | #0055ff |
COMERCIAL MIXTA | Yellow | #e9e517 |
EXTENSION INDUSTRIAL | Purple | #6619ff |
INDUSTRIAL1 | Tan | #dcc587 |
INDUSTRIAL2 | Steel Blue | #6a9cd1 |
PARQUE RECREACION | Lime Green | #1ed736 |
CULTURAL | Lavender | #c074d1 |
RESIDENCIAL | Cyan | #48ccdb |
RESIDENCIAL MIXTA | Burnt Orange | #e95f28 |
fillOpacity: 0.35.
estilored and estilocloacas — redesagua / sistcloacal layers
Both functions share identical colour logic keyed on the id property:
id | Colour | Hex |
|---|
| 1 | Light Blue | #62b8e5 |
| 2 | Peach/Amber | #fbb75b |
| 3 | Red | #f05d51 |
fillOpacity: 0.75.
estilocuencas — cuencas layer
Hydrological basins receive a diagonal stripe fill via the leaflet-pattern plugin (L.StripePattern). The stripe options are:
{ height: 8, weight: 4, spaceWeight: 4, color: color_actual,
spaceColor: color_actual, spaceOpacity: 0.3, angle: -45 }
qc_id | Colour | Hex |
|---|
| 1 | Light Blue | #62b8e5 |
| 2 | Peach/Amber | #fbb75b |
| 3 | Red | #f05d51 |
estiloley — zonaley layer
Ley 4886 zones are styled in greyscale, keyed on id:
id | Colour | Hex |
|---|
| 1 | Near-white | #fafafa |
| 2 | Medium grey | #9f9f9f |
| 3 | Light grey | #b8b8b8 |
| 4 | Lighter grey | #d7d7d7 |
| 5 | Dark grey | #848484 |
estiloinundacion — inundacion layer
Flood risk zones use a blue gradient from low to high risk:
id | Risk Level | Colour | Hex |
|---|
| 1 | Low | Pale Blue | #c2dffb |
| 2 | Medium | Mid Blue | #73b3d8 |
| 3 | High | Deep Navy | #08306b |
| 4 | Highest | Deep Navy | #08306b |
estilosuelo — suelo layer
Soil classification polygons use three distinct colours:
id | Soil Type | Colour | Hex |
|---|
| 1 | — | Dusty Rose | #d18581 |
| 2 | — | Sage Green | #64c589 |
| 3 | — | Sand Yellow | #dcc57d |
estilometro — metro layer
The metrotranvía line uses two states:
id | State | Colour |
|---|
| 1 | Active / operational | red |
| 2 | Other / planned | #b4afb3 (light grey) |
estilosendero — sendGeo layer
The geological trail has a single style for id == 1:
id | Colour | Hex |
|---|
| 1 | Burnt Orange | #cf7601 |
The walkability style function
estilocaminabilidad() is the most prominent dynamic style function in the project. It colours each segment of the traza layer (Índice Final de Caminabilidad) based on the PROMEDIO_P average walkability score:
function estilocaminabilidad() {
traza.eachLayer(function (featureInstanceLayer) {
var id_feature = featureInstanceLayer.feature.properties['PROMEDIO_P'];
if (id_feature == 1) {
color_actual = '#e31a1c';
} else if (id_feature == 2) {
color_actual = '#ff7f00';
} else if (id_feature == 3) {
color_actual = '#fbeb09';
} else if (id_feature == 4) {
color_actual = '#16b934';
}
featureInstanceLayer.setStyle({
color: color_actual, fillOpacity: 1, weight: 5
});
});
}
PROMEDIO_P | Rating | Colour | Hex |
|---|
"4" | Óptimo | Green | #16b934 |
"3" | Bueno | Yellow | #fbeb09 |
"2" | Regular | Orange | #ff7f00 |
"1" | Malo | Red | #e31a1c |
weight: 5 and fillOpacity: 1, making them visually prominent over the base map. The popup for each segment is handled by agregarPopupCaminabilidad.
General pattern
All style functions follow the same structure: iterate with eachLayer, read a property, pick a colour, call setStyle. The general template is:
function estiloMiCapa() {
miCapa.eachLayer(function (featureInstanceLayer) {
var categoria = featureInstanceLayer.feature.properties['CATEGORIA'];
var color_actual = '#aaaaaa'; // default / fallback colour
if (categoria === 'A') {
color_actual = '#1a9641';
} else if (categoria === 'B') {
color_actual = '#a6d96a';
} else if (categoria === 'C') {
color_actual = '#fdae61';
}
featureInstanceLayer.setStyle({
color: color_actual,
fillColor: color_actual,
fillOpacity: 0.7,
weight: 1
});
});
}
// Call it after the map and layer are initialised:
estiloMiCapa();
Dynamic styling with eachLayer + setStyle() is useful when the same GeoJSON layer needs different colours per feature based on property values, avoiding the overhead of creating one L.geoJson() instance per category. It also makes it easy to update all colours at once by re-calling the function.