Icon Factory Functions Reference — Leaflet Marker Icons - Observatorio Territorial GC

Icon factory functions are pointToLayer callbacks for L.geoJson(). They accept (feature, latlng) and return a L.marker() configured with the appropriate L.Icon instance. All icons are instantiated from one of two base prototypes — iconoComun (standard pin size) or iconoParaTren (smaller square icon) — both defined via L.Icon.extend() in js/iconos.js.

Base icon configuration

The two prototypes set shared options so individual icon instances only need to supply their iconUrl.

js/iconos.js

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

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

iconoComun uses the standard Leaflet pin shape at 25 × 41 px. iconoParaTren uses a smaller 20 × 20 px square — suitable for dense transit stop clusters along the metrotranvía line.

Individual icon instances are declared at module level so they are created once and reused by every factory call:

js/iconos.js

iconoAsistencia  = new iconoComun({ iconUrl: 'img/Asistencia.png'  });
iconoEnseñanza   = new iconoComun({ iconUrl: 'img/Enseñanza.png'   });
iconoComercio    = new iconoComun({ iconUrl: 'img/Comercio.png'    });
iconoCultura     = new iconoComun({ iconUrl: 'img/Cultura.png'     });
iconoCulto       = new iconoComun({ iconUrl: 'img/Culto.png'       });
iconoEsparcimiento = new iconoComun({ iconUrl: 'img/Esparcimiento.png' });
iconoOficina     = new iconoComun({ iconUrl: 'img/Oficina.png'     });
iconoServicios   = new iconoComun({ iconUrl: 'img/Servicios.png'   });
iconoTren        = new iconoParaTren({ iconUrl: 'img/tren.png'     });
// … and many more colour and speciality icons

Factory function reference

Each factory function follows the same one-liner pattern and is also paired with a pre-built options object (e.g. asignarIconoComercio) that can be spread directly into L.geoJson() options.

Factory Function	Icon File	Icon Size	Typical Use
`crearIconoAsistencia(feature, latlng)`	`img/Asistencia.png`	25 × 41	Centros de salud, clínicas, hospitales
`crearIconoEnseñanza(feature, latlng)`	`img/Enseñanza.png`	25 × 41	Escuelas, jardines, universidades
`crearIconoComercio(feature, latlng)`	`img/Comercio.png`	25 × 41	Farmacias, bares, restaurantes, supermercados
`crearIconoCultura(feature, latlng)`	`img/Cultura.png`	25 × 41	Museos, teatros, bibliotecas
`crearIconoCulto(feature, latlng)`	`img/Culto.png`	25 × 41	Templos, iglesias
`crearIconoEsparcimiento(feature, latlng)`	`img/Esparcimiento.png`	25 × 41	Polideportivos, uniones vecinales, pistas salud
`crearIconoOficina(feature, latlng)`	`img/Oficina.png`	25 × 41	Dependencias municipales, bancos
`crearIconoServicios(feature, latlng)`	`img/Servicios.png`	25 × 41	Cajeros, WiFi, puntos verdes, solmáforos
`crearIconoPilas(feature, latlng)`	`img/pilas_r2.png`	25 × 41	Puntos de recepción de pilas
`crearIconoPanel(feature, latlng)`	`img/paneles_3.png`	25 × 41	Paneles solares
`crearIconoTren(feature, latlng)`	`img/tren.png`	20 × 20	Paradas metrotranvía
`crearIconoVerde(feature, latlng)`	`img/marker-icon-2x-green.png`	25 × 41	Planta recicladora, spa
`crearIconoRojo(feature, latlng)`	`img/marker-icon-2x-red.png`	25 × 41	Bodegas, puestos
`crearIconoAzul(feature, latlng)`	`img/marker-icon-2x-blue.png`	25 × 41	Aventura / turismo aventura
`crearIconoAmarillo(feature, latlng)`	`img/marker-icon-2x-yellow.png`	25 × 41	Hospedajes
`crearIconoNaranja(feature, latlng)`	`img/marker-icon-2x-orange.png`	25 × 41	Residencias adultos mayores, diques
`crearIconoDorado(feature, latlng)`	`img/marker-icon-2x-gold.png`	25 × 41	Bodegas premium, patrimonio
`crearIconoNegro(feature, latlng)`	`img/marker-icon-2x-black.png`	25 × 41	Usos misceláneos / sin categoría
`crearIconoGris(feature, latlng)`	`img/marker-icon-2x-grey.png`	25 × 41	Infraestructura inactiva
`crearIconoVioleta(feature, latlng)`	`img/marker-icon-2x-violet.png`	25 × 41	Usos misceláneos
`crearIconoEscul(feature, latlng)`	`img/escultura_3.png`	25 × 41	Esculturas urbanas
`crearIconositios(feature, latlng)`	`img/sitios.png`	25 × 41	Sitios y conjuntos edilicios
`crearIconoedi(feature, latlng)`	`img/edificios.png`	25 × 41	Edificios patrimoniales
`crearIconoMast(feature, latlng)`	`img/mastil_r2.png`	25 × 41	Mástiles
`crearIconoMastp(feature, latlng)`	`img/banderita_r2.png`	25 × 41	Mástiles públicos
`crearIconoPersi(feature, latlng)`	`img/persianas_r2.png`	25 × 41	Persianas (shutter art)
`crearIconoAntena(feature, latlng)`	`img/ante_r2.png`	25 × 41	Antenas de telecomunicaciones
`crearIconoBiblio(feature, latlng)`	`img/biblio_r2.png`	25 × 41	Bibliotecas
`crearIconoCentrosalud(feature, latlng)`	`img/centrosalud_r2.png`	25 × 41	Centros de salud municipales
`crearIconoClinicaprivada(feature, latlng)`	`img/clinicaprivada_r2.png`	25 × 41	Clínicas privadas
`crearIconoDependmuni(feature, latlng)`	`img/dependmuni_r2.png`	25 × 41	Dependencias municipales
`crearIconoEstabeducat(feature, latlng)`	`img/estabeducat_r2.png`	25 × 41	Establecimientos educativos
`crearIconoFarmacias(feature, latlng)`	`img/farmacias_r2.png`	25 × 41	Farmacias
`crearIconoHospitales(feature, latlng)`	`img/hospitales2.png`	25 × 41	Hospitales
`crearIconoSeguridad(feature, latlng)`	`img/institucseguridad_r2.png`	25 × 41	Instituciones de seguridad
`crearIconoJardmatern(feature, latlng)`	`img/jardmatern_r2.png`	25 × 41	Jardines maternales
`crearIconoPoli(feature, latlng)`	`img/poli_r2.png`	25 × 41	Polideportivos
`crearIconoUnivec(feature, latlng)`	`img/univec_r2.png`	25 × 41	Uniones vecinales
`crearIconoSTV(feature, latlng)`	`img/pegman_3.png`	25 × 41	Street View / puntos de interés
`crearIconoVerde2(feature, latlng)`	`img/verde2_r2.png`	25 × 41	Espacios verdes secundarios
`crearIconoSema_r2(feature, latlng)`	`img/sema_r2.png`	25 × 41	Semáforos / señalética
`crearIconoWifi(feature, latlng)`	`img/wIfI_r2.png`	25 × 41	Puntos de acceso WiFi público

Factory function pattern

Every factory follows the same minimal pattern — look up the pre-instantiated icon constant and wrap it in an L.marker():

js/iconos.js

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

Each factory is also paired with a convenience options object (e.g. asignarIconoComercio) containing only { pointToLayer: ... }. You can spread or pass this object directly to L.geoJson():

// Using the factory function directly:
var centrosdesalud = L.geoJson(centrosdesaludData, {
    pointToLayer: crearIconoAsistencia,
    onEachFeature: agregarPopupSalud
});

// Using the pre-built options object:
var farmacias = L.geoJson(farmaciasData, asignarIconoFarmacias);

When a layer needs both a custom icon and a popup, pass pointToLayer and onEachFeature as separate options to L.geoJson(). The pre-built asignar* objects only set pointToLayer, so you will always need to add onEachFeature manually for popup support.

Companion `asignar*` objects

Every factory function has a matching plain object that packages it as a ready-to-use pointToLayer option:

Options Object	Factory Used
`asignarIconoTren`	`crearIconoTren`
`asignarIconoComercio`	`crearIconoComercio`
`asignarIconoCulto`	`crearIconoCulto`
`asignarIconoCultura`	`crearIconoCultura`
`asignarIconoAsistencia`	`crearIconoAsistencia`
`asignarIconoEsparcimiento`	`crearIconoEsparcimiento`
`asignarIconoEnseñanza`	`crearIconoEnseñanza`
`asignarIconoOficina`	`crearIconoOficina`
`asignarIconoServicios`	`crearIconoServicios`
`asignarIconoVerde`	`crearIconoVerde`
`asignarIconoRojo`	`crearIconoRojo`
`asignarIconoNegro`	`crearIconoNegro`
`asignarIconoAzul`	`crearIconoAzul`
`asignarIconoDorado`	`crearIconoDorado`
`asignarIconoNaranja`	`crearIconoNaranja`
`asignarIconoGris`	`crearIconoGris`
`asignarIconoVioleta`	`crearIconoVioleta`
`asignarIconoWifi`	`crearIconoWifi`
`asignarIconoAmarillo`	`crearIconoAmarillo`
`asignarIconoAntena`	`crearIconoAntena`
`asignarIconoBiblio`	`crearIconoBiblio`
`asignarIconoCentrosalud`	`crearIconoCentrosalud`
`asignarIconoescul`	`crearIconoEscul`
`asignarIconoClinicaprivada`	`crearIconoClinicaprivada`
`asignarIconoDependmuni`	`crearIconoDependmuni`
`asignarIconoEstabeducat`	`crearIconoEstabeducat`
`asignarIconoFarmacias`	`crearIconoFarmacias`
`asignarIconoHospitales`	`crearIconoHospitales`
`asignarIconoPilas`	`crearIconoPilas`
`asignarIconoSeguridad`	`crearIconoSeguridad`
`asignarIconoJardmatern`	`crearIconoJardmatern`
`asignarIconoPoli`	`crearIconoPoli`
`asignarIconositios`	`crearIconositios`
`asignarIconoedi`	`crearIconoedi`
`asignarIconoPersi`	`crearIconoPersi`
`asignarIconoMast`	`crearIconoMast`
`asignarIconoMastp`	`crearIconoMastp`
`asignarIconoPanel`	`crearIconoPanel`
`asignarIconoUnivec`	`crearIconoUnivec`
`asignarIconoVerde2`	`crearIconoVerde2`
`asignarIconoSema_r2`	`crearIconoSema_r2`

JavaScript API

Data

Icon Factory Functions Reference — Leaflet Marker Icons

Base icon configuration

Factory function reference

Factory function pattern

Companion `asignar*` objects

Build docs developers (and LLMs) love

JavaScript API

Data

Documentation Index

​Base icon configuration

​Factory function reference

​Factory function pattern

​Companion asignar* objects

Build docs developers (and LLMs) love

Base icon configuration

Factory function reference

Factory function pattern

Companion `asignar*` objects