Coropletas

Un mapa de coropletas es un mapa en el que las regiones toman un estilo (color) en base al valor, dentro de una escala de rangos, del dato contenido en uno de sus atributos.

Por tanto, para construir dicho mapa, es necesario especificar al menos los siguientes parámetros:

• Atributo que contiene el dato
• Rangos definidos
• Estilo para cada uno de los rangos

Puesto que definir cada uno de los rangos, y establecer un estilo para cada uno de ellos es una tarea pesada, se facilita dicha labor pudiendo establecer un número de rangos y un algoritmo/función para calcular sus límites, así como estilos por defecto o simplemente establecer color inicial y color final.

El uso más común sería:

let choropleth = new M.style.Choropleth(valueField, 
                                        [firstColor, lastColor], 
                                        quantification); 

Dónde:

Parámetro	Descripción
valueField	{string} - atributo que contiene el dato
firsColor	{string} - color del rango inferior (opcional)
lastColor	{string} - color del rango superior (opcional)
quantification	{M.style.quantification | function()} - algoritmo de cuantificación y número de rangos. Puede ser una función personalizada o utilizar lo ya definidos M.style.quantification.JENKS(rangos) y M.style.quantification.QUANTILE(rangos) (opcional)

💡 Como se puede observar, el firstColor y lastColor van dentro de un array. Esto es para permitir poder definir tantos estilos (M.style) como rangos se quieran en lugar de pasar únicamente los colores extremos, ignorando en este caso los rangos pasados al algoritmo de cuantificación. Ejemplo

Un ejemplo completo de un mapa de coropletas, construido con Mapea, sería tan sencillo como:

//creación del mapa
let mapajs = M.map({
  'container': 'map',
  "controls": ["layerswitcher"]
});

//creación de la capa
let lyProv = new M.layer.WFS({
  name: "Provincias",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/wfs?",
  name: "Provincias",
  legend: "Provincias - COROPLETAS",
  geometry: 'POLYGON',
});

//se crea el estilo y se aplica a la capa
let choropleth = new M.style.Choropleth(
                     'u_cod_prov', 
                     ['#000000', '#FFFFFF'], 
                     M.style.quantification.JENKS(4));

lyProv.setStyle(choropleth);

//se añade la capa al mapa
mapajs.addLayers(lyProv);

Aquí puede verse un ejemplo funcional

• Mapea permite simplificar aún más la generación de la coropleta, obviando los parámetros opcionales. De esta forma, se establecerá un escala de 5 rangos, de rojo claro a rojo oscuro, calculados mediante JENKS:

let choropleth = new M.style.Choropleth(valueField); 

• En caso de que queramos pasar directamente los rangos de clasificación, la función que tenemos que definir es tan simple como la siguiente:

var rangos_usuario = [10, 20, 30, 40, 50];
let choropleth = new M.style.Choropleth("u_cod_prov", ["red", "blue"], () => rangos_usuario);
layer.setStyle(choropleth);

Ver el ejemplo en funcionamiento

Simbología base

La coropleta utiliza una función DEFAULT_STYLE que genera una simbología Generic de base, en la que el color de los elemento es el único parámetro que no es fijo, ya que dependerá de la propia coropleta. Pero el resto de parámetros, como la transparencia, el stroke, etc. pueden redefinirse para cualquier de los tipos geométricos, de modo que apliquen a las coropletas que se generen posteriormente. Por ejemplo, si queremos establecer una transparencia de 0.5 únicamente a los polígonos:

M.style.Choropleth.DEFAULT_STYLE = function(c) {
    return new M.style.Generic({
      point: {
        fill: {
          color: c,
          opacity: 1,
        },
        stroke: {
          color: 'black',
          width: 1,
        },
        radius: 5,
      },
      line: {
        stroke: {
          color: c,
          width: 1,
        },
      },
      polygon: {
        fill: {
          color: c,
          opacity: 0.5, // Semitransparente
        },
        stroke: {
          color: 'black',
          width: 1,
        },
      },
    });
  };

Hay que tener en cuenta que esto debe establecerse antes de generar la coropleta, y que aplicará a cualquier otra coropleta que generemos posteriormente.