Custom Map Icons and Layer Styles for the Nodos Map

The map uses a custom Leaflet Icon system defined in js/iconos.js. Icons fall into two categories: thematic PNG icons for specific service categories (health, education, commerce, etc.) built on the shared iconoComun base prototype, and colour-coded pin markers that reuse the standard Leaflet marker shape in different colours for tourism and other point types. Both categories are exposed as factory functions with the signature (feature, latlng) so they can be passed directly to pointToLayer in any L.geoJson() call.

Built-in icon factories

All thematic icons share the same base prototype, which sets the shadow image and all anchor measurements consistently across the map:

js/iconos.js

// Base icon prototype
var iconoComun = L.Icon.extend({
    options: {
        shadowUrl: 'img/marker-shadow.png',
        iconSize: [25, 41],
        shadowSize: [41, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34]
    }
});

A second prototype, iconoParaTren, uses a smaller 20×20 px icon size for metro/tramway stops:

js/iconos.js

var iconoParaTren = L.Icon.extend({
    options: {
        shadowUrl: 'img/marker-shadow.png',
        iconSize: [20, 20],
        shadowSize: [41, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34]
    }
});

The following factory functions are available out of the box. Pass any of them as pointToLayer when creating a L.geoJson() layer:

Factory function	Icon file	Used for
`crearIconoAsistencia`	`img/Asistencia.png`	Health centres, hospitals, clinics
`crearIconoEnseñanza`	`img/Enseñanza.png`	Schools, kindergartens, universities
`crearIconoComercio`	`img/Comercio.png`	Commerce, pharmacies, bars, restaurants
`crearIconoCultura`	`img/Cultura.png`	Museums, theatres, libraries
`crearIconoCulto`	`img/Culto.png`	Places of worship
`crearIconoEsparcimiento`	`img/Esparcimiento.png`	Sports, parks, recreation
`crearIconoOficina`	`img/Oficina.png`	Municipal offices, banks
`crearIconoServicios`	`img/Servicios.png`	ATMs, gas stations, WiFi, green points
`crearIconoPilas`	`img/pilas_r2.png`	Battery recycling points
`crearIconoPanel`	`img/paneles_3.png`	Solar panels
`crearIconoTren`	`img/tren.png` (20×20 px)	Metro/tramway stops
`crearIconoSeguridad`	`img/institucseguridad_r2.png`	Police stations, security posts
`crearIconoEscul`	`img/escultura_3.png`	Sculptures and public art
`crearIconoedi`	`img/edificios.png`	Heritage buildings
`crearIconositios`	`img/sitios.png`	Heritage sites and building complexes
`crearIconoMast`	`img/mastil_r2.png`	Flag masts (private)
`crearIconoMastp`	`img/banderita_r2.png`	Flag masts (public)
`crearIconoPersi`	`img/persianas_r2.png`	Security shutters
`crearIconoVerde`	`img/marker-icon-2x-green.png`	Recycling plant, spa
`crearIconoRojo`	`img/marker-icon-2x-red.png`	Wineries, rural posts
`crearIconoAzul`	`img/marker-icon-2x-blue.png`	Adventure tourism
`crearIconoAmarillo`	`img/marker-icon-2x-yellow.png`	Lodgings
`crearIconoNaranja`	`img/marker-icon-2x-orange.png`	Senior residences, dams
`crearIconoNegro`	`img/marker-icon-2x-black.png`	General-purpose black pin
`crearIconoDorado`	`img/marker-icon-2x-gold.png`	General-purpose gold pin
`crearIconoGris`	`img/marker-icon-2x-grey.png`	General-purpose grey pin
`crearIconoVioleta`	`img/marker-icon-2x-violet.png`	General-purpose violet pin

Each factory function follows the same pattern — for example, crearIconoComercio:

js/iconos.js

iconoComercio = new iconoComun({ iconUrl: 'img/Comercio.png' });

function crearIconoComercio(feature, latlng) {
    return L.marker(latlng, { icon: iconoComercio });
}

Creating a custom icon

To add a new icon for a dataset that doesn’t fit an existing category, follow this two-step pattern inside js/iconos.js:

js/iconos.js

// 1. Create an icon instance using the base prototype
var iconoCustom = new iconoComun({ iconUrl: 'img/my-icon.png' });

// 2. Create a factory function
function crearIconoCustom(feature, latlng) {
    return L.marker(latlng, { icon: iconoCustom });
}

Place your PNG image in the img/ directory, then use the factory in any layer declaration in index.html:

index.html

var miCapa = L.geoJson(MisDatos, {
    pointToLayer: crearIconoCustom,
    onEachFeature: agregarPopupfarmacias
});

If your icon is smaller or larger than the standard 25×41 px, extend iconoComun with a custom iconSize before creating the instance:

js/iconos.js

var iconoMiniatura = L.Icon.extend({
    options: {
        shadowUrl: 'img/marker-shadow.png',
        iconSize: [16, 16],
        shadowSize: [20, 20],
        iconAnchor: [8, 16],
        popupAnchor: [0, -14]
    }
});

var iconoCustomSmall = new iconoMiniatura({ iconUrl: 'img/my-small-icon.png' });

Polygon and line styles

Polygon and line layers do not use pointToLayer. Instead, call setStyle() on the L.geoJson() result to apply a uniform visual style, or use eachLayer() to drive the style dynamically from feature properties. Static style applied once — the pattern used throughout index.html for layers like barrios, espverdes, and the node district polygons:

index.html

// Neighbourhood boundaries — orange fill
var barrios = L.geoJson(Barrios, {
    onEachFeature: agregarPopuppatrimoniales
}).setStyle({
    color: "#E86211",
    fillOpacity: 0.75
});

// Green spaces — green fill
var espverdes = L.geoJson(EspaciosVerdes, {
    onEachFeature: agregarPopupespaciosverdes
}).setStyle({
    color: "#4daf4a",
    fillOpacity: 0.75
});

Dynamic style function driven by feature properties — used by layers such as zoning, districts, flood risk, and the walkability index. The function iterates each feature and applies a colour based on a property value:

js/popups.js

// Zoning layer — colour each polygon by its Layer property
function estilozoni() {
    zonificacion.eachLayer(function (featureInstanceLayer) {
        var id_feature = featureInstanceLayer.feature.properties['Layer'];
        if (id_feature == "CEMENTERIO") {
            color_actual = '#202bf1';
        } else if (id_feature == "COMERCIAL") {
            color_actual = '#0055ff';
        } else if (id_feature == "RESIDENCIAL") {
            color_actual = '#48ccdb';
        }
        // ... additional cases ...
        featureInstanceLayer.setStyle({
            color: color_actual, fillOpacity: 0.35
        });
    });
}

These style functions are called immediately after L.map() is created in index.html:

index.html

estiloDistritosDepartamentales();
estilozoni();
estilored();
estilocloacas();
estilocuencas();
estiloley();
estiloinundacion();
estilosuelo();
estilometro();
estilosendero();
estilocaminabilidad();

The setStyle() method accepts any Leaflet Path options: color (stroke colour), weight (stroke width in pixels), opacity (stroke opacity), fillColor (fill colour, defaults to the stroke color if omitted), fillOpacity, and dashArray (e.g. "5, 10" for a dashed line). All values can be overridden at any time by calling setStyle() again on the layer variable.

Get Started

Map Layers

Customisation

Controls & Tools

Built-in icon factories

Creating a custom icon

Polygon and line styles

Build docs developers (and LLMs) love

Get Started

Map Layers

Customisation

Controls & Tools

Documentation Index

​Built-in icon factories

​Creating a custom icon

​Polygon and line styles

Build docs developers (and LLMs) love

Built-in icon factories

Creating a custom icon

Polygon and line styles