Expresiones MapLibre GL JS

Expresiones Data-Driven Básicas

Operadores de acceso a datos

Son expresiones que acceden a los datos de los elementos (features).

• get → obtiene un campo de propiedades.

• properties → obtiene el objeto completo de propiedades.

• geometry-type → tipo de geometría del feature.

• id → obtiene el feature id.

Ejemplo:

"paint": {
  "circle-radius": [
    "to-number",
    ["get", "population"]
  ]
}

Expresiones condicionales o de decisión

Condicional lógico case

Permite evaluar condiciones encadenadas.

Ejemplo:

"circle-opacity": [
  "case",
  [">", ["get", "population"], 1000], 1,
  0.3
]

Significa:

• Si population > 1000 → opacidad 1

• Sino → opacidad 0.3

Clasificación por rangos con step

step — saltos discretos

"circle-radius": [
  "step", ["get", "density"],
  2,     // valor base
  50, 4,
  150, 6
]

Si density<50 → 2px; <150 → 4px; >150 → 6px.

Crear un mapa donde la contaminación se clasifica en rangos discretos.

paint: {
 'circle-radius': 8,
 'circle-color': [
  'step',
  ['get','pm10'],
  '#2ecc71',
  20, '#f1c40f',
  40, '#e67e22',
  80, '#e74c3c'
 ]
}

Mapa continuo con interpolate

Produce resultados continuos y suaves mediante la interpolación entre pares de valores de entrada y salida ("paradas")

"circle-radius": [
  "interpolate", ["linear"],
  ["get", "density"],
  0,   2,
  100, 10
]

Altera el tamaño de 2px a 10px entre density=0 y 100.

Crear un mapa donde el color del punto depende del valor de PM10.

paint: {
 'circle-radius': 8,
 'circle-color': [
  'interpolate',
  ['linear'],
  ['get','pm10'],
  0, '#2ecc71',
  40, '#f1c40f',
  80, '#e67e22',
  120, '#e74c3c'
 ]
}

Categorías con match

Mostrar estaciones según su tipo.

paint: {
 'circle-radius': 8,
 'circle-color': [
  'match',
  ['get','type'],
  'traffic', '#e63946',
  'urban', '#457b9d',
  'background', '#2a9d8f',
  '#999999'
 ]
}

Ejercicio práctico

Example

Añadir también:

'circle-stroke-color': '#ffffff',
'circle-stroke-width': 1

Mapa temático de usos del suelo (categorías)

map.addSource("landuse", {
    type: "geojson",
    data: "https://gss-mtig.github.io/geo-web-mgeo/data/landuse.geojson",
});

map.addLayer({
    id: "landuse-fill",
    type: "fill",
    source: "landuse",
    paint: {
        "fill-color": [
            "match",
            ["get", "class"],
            "residential",
            "#f2c9a1",
            "industrial",
            "#d1b3ff",
            "commercial",
            "#a1d99b",
            "#cccccc",
        ],
        "fill-opacity": 0.7,
    },
});

Ejercicio práctico

Example

Usar los datos de landuse.geojson para:

• Añadir una categoría nueva con color propio.

Ejercicio práctico

Example

Usar los datos de cities.geojson para hacer una clasificacion de color por categoría

• Usar la expresión match
• Usar la propiedad category

Normalizar datos

Calcular dinámicamente la tasa con una expresión de MapLibre:

["*", ["/", ["get", "crimes"], ["get", "population"]], 100000]

Ejercicio práctico

Example

Usar los datos de cities.geojson para:

• Crear un mapa de número total de crímenes (crimes)
• Crear un mapa de crímenes por 100000 habitantes (crime_rate)

Usar coalesce para valores faltantes

Si la propiedad puede estar ausente:

"circle-color": [
  "coalesce",
  ["get", "color"],
  "#888888"
]

Esto usa color si existe, sino gris.

Mezcla de zoom y datos

Podemos combinar zoom y datos:

"circle-radius": [
  "interpolate", ["linear"], ["zoom"],
  5, ["get", "pop"],
  15, ["*", 2, ["get", "pop"]]
]

Esto cambia tamaño según zoom y atributo.

Manejo de valores nulos

"circle-color": [
  "case",
  ["==", ["get", "pm10"], null], "#999999",
  ["interpolate", ["linear"], ["get", "pm10"],
    0, "#2c7bb6",
    50, "#d7191c"
  ]
]

Ejercicio práctico

Example

Usar los datos de stations.geojson para:

• Mostrar solo estaciones activas
• Representar contaminación
• Estilo neutro para datos faltantes

Etiquetado (Symbol layer)

map.addLayer({
    id: "cities-labels",
    type: "symbol",
    source: "cities",
    layout: {
        "text-field": ["get", "name"],
        "text-size": 14,
        "text-offset": [0, 1.2],
        "text-anchor": "top",
    },
    paint: {
        "text-color": "#333",
        "text-halo-color": "#ffffff",
        "text-halo-width": 2,
    },
});

Ejercicio práctico

Example

Usar los datos de cities.geojson para:

• Mostrar solo ciudades con población > 500000

Tamaño de etiquetas según población

'text-size': [
    'interpolate',
    ['linear'],
    ['get', 'population'],
    0, 10,
    500000, 14,
    2000000, 22
]

Ejercicio práctico

Example

Usar los datos de cities.geojson para:

• ciudades pequeñas → texto gris
• ciudades grandes → text negro

Etiquetas solo a cierto nivel de zoom

'text-size': [
    'interpolate',
    ['linear'],
    ['zoom'],
    5, 10,
    10, 18
]

Ejercicio práctico

Example

Usar los datos de cities.geojson para:

• Hacer que las etiquetas solo aparezcan a zoom > 6

Uso de iconos con sprite (icon-image)

Primero se carga el icono:

map.loadImage("icon-station.png", (error, image) => {
    if (error) throw error;
    map.addImage("station-icon", image);
});

Luego se usa en una symbol layer:

map.addSource("stations", {
    type: "geojson",
    data: "https://gss-mtig.github.io/geo-web-mgeo/data/stations.geojson",
});

map.addLayer({
    id: "stations-icons",
    type: "symbol",
    source: "stations",
    layout: {
        "icon-image": "station-icon",
        "icon-size": 0.5,
        "icon-anchor": "bottom",
    },
});

Ejercicio práctico

Example

Usar los datos de stations.geojson para:

• Añadir etiqueta con el nombre de la estación

Iconos diferentes según atributo (data-driven icons)

'icon-image': [
    'match',
    ['get', 'type'],
    'train', 'train-icon',
    'metro', 'metro-icon',
    'bus', 'bus-icon',
    'default-icon'
]

Ejercicio práctico

Example

Usar los datos de stations.geojson para:

• Añadir un icono distinto para cada tipo de estación.

Simbolizar estaciones con iconos del sprite

Representar estaciones con iconos diferentes según el tipo de estación.

map.addLayer({
    id: "stations-icons",
    type: "symbol",
    source: "stations",
    layout: {
        "icon-image": [
            "match",
            ["get", "type"],
            "traffic",
            "car",
            "urban",
            "town",
            "background",
            "tree",
            "marker",
        ],

        "icon-size": 0.8,
        "icon-allow-overlap": true,
    },
});

Ejercicio práctico

Example

Usar los datos de stations.geojson para:

• muestre icono según type
• muestre nombre de estación
• cambie tamaño según pm10