Expresiones compuestas de MapLibre

Combinar expresiones

Mostrar estaciones inactivas o en mantenimiento en gris.

paint: {
 'circle-radius': 8,
 'circle-color': [
  'case',
  ['!=',['get','status'],'active'],
  '#999999',
  [
   'interpolate',
   ['linear'],
   ['get','pm10'],
   0, '#2ecc71',
   80, '#e74c3c'
  ]
 ]
}

Ejercicio práctico

Example

Modificar la expresión para que las estaciones inactive sean rojas.

Mapa bivariado (crimen violento vs propiedad)

Crear un mapa donde:

color = combinación de ambos tipos de crimen

Clasificar cada variable

Ejemplo:

violent_crimes
0–1000  → bajo
1000–3000 → medio
>3000 → alto

property_crimes
0–5000 → bajo
5000–10000 → medio
>10000 → alto

Expresión MapLibre

paint: {
 'circle-radius': 10,
 'circle-color': [
  'case',

  ['all',
   ['>', ['get','violent_crimes'], 3000],
   ['>', ['get','property_crimes'], 10000]
  ], '#7f0000',

  ['all',
   ['>', ['get','violent_crimes'], 3000],
   ['<=', ['get','property_crimes'], 10000]
  ], '#d7301f',

  ['all',
   ['<=', ['get','violent_crimes'], 3000],
   ['>', ['get','property_crimes'], 10000]
  ], '#fc8d59',

  '#fee0d2'
 ]
}

Ejercicio práctico

Example

Cambiar el tamaño de los círculos según el crime_rate

'circle-radius': [
    'interpolate',
    ['linear'],
    ['get','crime_rate'],
    400,6,
    900,18
]

Estilo dependiente del zoom

map.addLayer({
    id: "landuse",
    type: "fill",
    source: "landuse",

    paint: {
        "fill-color": [
            "interpolate",
            ["linear"],
            ["zoom"],

            5,
            "#dddddd",

            10,
            [
                "match",
                ["get", "class"],
                "residential",
                "#f2c9a1",
                "industrial",
                "#d1b3ff",
                "commercial",
                "#a1d99b",
                "park",
                "#74c476",
                "#cccccc",
            ],
        ],

        "fill-opacity": 0.7,
    },
});

Ejercicio práctico

Example

Usar los datos de landuse.geojson para hacer que:

• A bajo zoom todos los usos son similares
• A nivel de zoom intermedio solo diferenciar residential e industrial
• A alto zoom se diferencian claramente

Ejercicio entregable

Atlas Urbano Interactivo 2pt

Diseñar un mapa interactivo en MapLibre GL JS que represente:

• Jerarquía urbana (cities)
• Estructura funcional del territorio (landuse)
• Calidad ambiental (stations)

Requisitos

• Integrar las 3 sources: cities, landuse y stations
• Contener al menos:
  • 3 layers tipo circle o symbol
  • 1 layer tipo fill
  • 1 filtro (filter)
  • 5 expresiones distintas
  • 1 expresión que combine zoom + atributo
  • 1 manejo explícito de valores nulos (coalesce o case)
  • 1 interpolación cuantitativa (interpolate)
  • 1 clasificación nominal (match)

El mapa debe organizarse en tres niveles visuales:

Base territorial (landuse)

Objetivo: representar la estructura urbana sin dominar la escena.

Requisitos:

• Color categórico por landuse
• Opacidad dependiente de density
• Simplificación visual a bajo zoom

Sistema urbano (cities)

Objetivo: jerarquizar núcleos urbanos.

Requisitos:

• Tamaño proporcional a population
• Color dependiente de capital
• Texto visible solo a partir de cierto zoom.

Calidad del aire (stations)

Objetivo: representar riesgo ambiental.

Requisitos:

• Mostrar solo estaciones activas
• Color dependiente de pm10
• Manejo de valores nulos
• Radio dependiente de zoom

🧭 Rúbrica de evaluación — MapLibre GL JS (2 puntos)

📊 Distribución general

Criterio	Puntuación
1. Integración de datos (sources)	0.3
2. Estructura de layers	0.4
3. Uso de expresiones	0.7
4. Diseño cartográfico por niveles	0.5
5. Calidad técnica y coherencia	0.1
TOTAL	2.0

---

1. Integración de datos (0.3 pt)

Nivel	Descripción
0.3	Integra correctamente las 3 sources (cities, landuse, stations) y se visualizan
0.2	3 sources con pequeños errores de configuración
0.1	Solo 2 sources funcionales
0.0	1 o ninguna source funcional

---

2. Estructura de layers (0.4 pt)

Subcriterios: - 3 layers tipo circle o symbol - 1 layer tipo fill - 1 filtro (filter)

Nivel	Descripción
0.4	Cumple todos los requisitos correctamente
0.3	Falta 1 elemento
0.2	Faltan 2 elementos
0.1	Implementación muy incompleta
0.0	No cumple

---

3. Uso de expresiones (0.7 pt)

Subcriterios: - ≥ 5 expresiones distintas - Expresión combinando zoom + atributo - Uso de coalesce o case (nulos) - Uso de interpolate - Uso de match

Nivel	Descripción
0.7	Cumple todos los requisitos correctamente
0.6	Falta 1 tipo de expresión
0.5	Faltan 2 requisitos
0.3	Uso básico pero incompleto
0.1	Uso muy limitado o incorrecto
0.0	No usa expresiones correctamente

---

4. Diseño cartográfico por niveles (0.5 pt)

4.1 Base territorial — landuse (0.15 pt)

Nivel	Descripción
0.15	Color categórico por landuse + opacidad dependiente de density + simplificación visual a bajo zoom
0.10	Falta uno de los elementos
0.05	Implementación básica
0.0	Incorrecto o inexistente

---

4.2 Sistema urbano — cities (0.15 pt)

Nivel	Descripción
0.15	Tamaño proporcional a population + color dependiente de capital + texto visible según zoom
0.10	Falta uno de los elementos
0.05	Implementación parcial
0.0	Incorrecto o inexistente

---

4.3 Calidad del aire — stations (0.20 pt)

Nivel	Descripción
0.20	Filtro de estaciones activas + color dependiente de pm10 + manejo de nulos + radio dependiente de zoom
0.15	Falta uno de los elementos
0.10	Faltan dos elementos
0.05	Implementación mínima
0.0	Incorrecto o inexistente

---

5. Calidad técnica y coherencia (0.1 pt)

Nivel	Descripción
0.1	Código limpio, consistente, sin errores y bien organizado
0.05	Pequeños errores o inconsistencias
0.0	Código confuso o con errores graves

---

⚖️ Reglas de penalización global

• ❌ No usar expresiones → máximo 0.8
• ❌ No separar correctamente los 3 niveles → máximo 1.2
• ❌ Mapa no funcional → 0 automático

---

🧠 Criterios cualitativos (feedback)

No puntúan directamente, pero se tendrán en cuenta:

• Claridad visual y jerarquía cartográfica  
• Uso adecuado de simbología (evitar saturación)  
• Uso del zoom como variable narrativa  
• Legibilidad de etiquetas