Más

CartoDB agregando leyenda personalizada a la subcapa

CartoDB agregando leyenda personalizada a la subcapa


Esto es lo que intento hacer:

Tengo un mapa con selectores que cargan datos de la misma tabla (usando SQL) según lo que seleccionó. Todo esto funciona muy bien (código a continuación). Lo que quiero es que una leyenda sea visible y que solo muestre los valores incluidos en la capa actual. Por ejemplo, si la capa tiene solo dos categorías posibles, entonces quiero que la leyenda muestre solo esas dos categorías.

Puntos de bonificación por poder personalizar la leyenda (nombres de categorías) mientras creo la capa.

No tengo idea de dónde incluir algo sobre leyendas en este código:

función createSelector (capa) {var sql = new cartodb.SQL ({usuario: 'myusername'}); var $ opciones = $ ('# layer_selector li'); $ options.click (function (e) {// obtener el área de la capa seleccionada var $ li = $ (e.target); var atributo = $ li.attr ('data'); // deseleccionar todo y seleccionar el se hizo clic en uno $ options.removeClass ('selected'); $ li.addClass ('selected'); // crear una consulta basada en datos de la capa var query = "select * from attribute_table"; if (atributo == 'género' ) {query = "select * from attribute_table where" + attribute + "> '0'"; new_css = '#attribute_table {marker-width: 4;} # attribute_table [gender = 2] {marker-fill: # A6CEE3;} #attribute_table [gender = 1] {marker-fill: # 1F78B4;} '} else if (atributo ==' marital ') {query = "select * from attribute_table donde" + atributo + ">' 0 '"; new_css = '#attribute_table {marker-width: 4;} # attribute_table [marital = 1] {marker-fill: # 7B00B4;} # attribute_table [marital = 2] {marker-fill: # 136400;}'} else if (atributo = = 'religión') {query = "select * from attribute_table where" + attribute + "> '0'"; new_css = '#attribute_table {marker-width: 4;} # attribute_table [religión = 1] {ma rker-fill: # A6CEE3;} # attribute_table [religión = 3] {marcador-relleno: # 1F78B4;} # atributo_table [religión = 4] {marcador-relleno: # B2DF8A;} # atributo_table [religión = 5] {marcador- fill: # 33A02C;} # attribute_table [religión = 2] {marcador-relleno: # FB9A99;} # atributo_table [religión = 7] {marcador-relleno: # E31A1C;} # atributo_table [religión = 8] {marcador-relleno: # FDBF6F;} # attribute_table [religión = 6] {marcador-relleno: # FF7F00;} '} else if (atributo ==' all ') {query = "select * from attribute_table"; new_css = '#attribute_table {marker-width: 4;} # attribute_table {marcador-fill: # 2e5387;}'} // cambia la consulta en la capa para actualizar el mapa layer.setSQL (consulta); layer.setCartoCSS (new_css); }); } function main () {cartodb.createVis ('map', 'https://myusername.cartodb.com/api/v2/viz/f6b34e86-b382-11e4-b544-0e853d047bba/viz.json', {tiles_loader: true , center_lat: 39.8282, center_lon: -98.5, zoom: 5, leyendas: verdadero, pantalla completa: verdadero,}) .done (función (vis, capas) {var subLayer = capas [1] .getSubLayer (0); createSelector (subLayer );}) .error (function (err) {console.log (err);}); } window.onload = main;

Hay un ejemplo funcional en la sección de ejemplos de la biblioteca CartoDB.js que hace la mayor parte de lo que parece estar buscando.

Porción clave: puede definir su leyenda de la siguiente manera:

var customLegend = new cdb.geo.ui.Legend.Custom ({title: "Leyenda personalizada", datos: [{nombre: "Parques naturales", valor: "# 58A062"}, {nombre: "Pueblos", valor: "# F07971"}, {nombre: "Ríos", valor: "# 54BFDE"}, {nombre: "Campos", valor: "# 9BC562"}, {nombre: "Cuevas", valor: "# FABB5C"} ]});

Tenga en cuenta que el valor de la clavedatosse puede cambiar y actualizar dinámicamente según las interacciones del usuario, los tipos de datos, etc.


Ver el vídeo: CartoDB: Customizing maps using CSS