Mehr

CartoDB fügt benutzerdefinierte Legende zu Sublayer hinzu

CartoDB fügt benutzerdefinierte Legende zu Sublayer hinzu


Folgendes versuche ich zu tun:

Ich habe eine Karte mit Selektoren, die Daten aus derselben Tabelle (mit SQL) laden, basierend auf Ihrer Auswahl. Das alles funktioniert super (Code unten). Ich möchte, dass eine Legende sichtbar ist und nur die Werte des aktuellen Layers angezeigt werden. Wenn der Layer beispielsweise nur zwei mögliche Kategorien hat, möchte ich, dass die Legende nur diese beiden Kategorien anzeigt.

Bonuspunkte für die Möglichkeit, die Legende (Kategorienamen) beim Erstellen der Ebene anzupassen.

Ich habe keine Ahnung, wo ich etwas über Legenden in diesen Code aufnehmen soll:

Funktion createSelector(layer) { var sql = new cartodb.SQL({ user: 'myusername'}); var $options = $('#layer_selector li'); $options.click(function(e) { // die Fläche des ausgewählten Layers abrufen var $li = $(e.target); var attribute = $li.attr('data'); // Alles abwählen und die . auswählen auf eine geklickt $options.removeClass('selected'); $li.addClass('selected'); // Abfrage basierend auf Daten aus dem Layer erstellen var query = "select * from attribute_table"; if(attribute == 'gender' ) { 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(attribute == 'ehe') { query = "select * from attribute_table where "+ attribut + " > '0'"; new_css = '#attribute_table{marker-width: 4;}#attribute_table[marital=1] {marker-fill: #7B00B4;}#attribute_table[marital=2] {marker-fill: #136400;}' } else if(attribute = = 'religion') { query = "select * from attribute_table where "+ attribute + " > '0'"; new_css = '#attribute_table{marker-width: 4;}#attribute_table[religion=1] {ma rker-fill: #A6CEE3;}#attribute_table[religion=3] {marker-fill: #1F78B4;}#attribute_table[religion=4] {marker-fill: #B2DF8A;}#attribute_table[religion=5] {marker- fill: #33A02C;}#attribute_table[religion=2] {marker-fill: #FB9A99;}#attribute_table[religion=7] {marker-fill: #E31A1C;}#attribute_table[religion=8] {marker-fill: #FDBF6F;}#attribute_table[religion=6] {Marker-Fill: #FF7F00;}' } else if(attribute == 'all') { query = "select * from attribute_table"; new_css = '#attribute_table{marker-width: 4;}#attribute_table{marker-fill: #2e5387;}' } // die Abfrage im Layer ändern, um die Karte zu aktualisieren layer.setSQL(query); layer.setCartoCSS(new_css); }); } function main() { cartodb.createVis('map', 'https://myusername.cartodb.com/api/v2/viz/f6b34e86-b382-11e4-b544-0e853d047bba/viz.json', {fliesen_loader: true , center_lat: 39.8282, center_lon: -98.5, zoom: 5, legends:true, fullscreen:true, }) .done(function(vis,layers) { var subLayer =layer[1].getSubLayer(0); createSelector(subLayer ); }) .error(function(err) { console.log(err);}); } window.onload = main;

Es gibt ein funktionierendes Beispiel im Beispielabschnitt der CartoDB.js-Bibliothek, das das meiste von dem tut, wonach Sie zu suchen scheinen.

Schlüsselteil – Sie können Ihre Legende wie folgt definieren:

var customLegend = new cdb.geo.ui.Legend.Custom({ title: "Custom Legend", data: [ { name: "Natural Parks", value: "#58A062" }, { name: "Villages", value: "#F07971" }, { Name: "Rivers", Wert: "#54BFDE" }, { Name: "Fields", Wert: "#9BC562" }, { Name: "Caves", Wert: "#FABB5C" } ]});

Beachten Sie, dass der Wert für den SchlüsselDatenkann dynamisch geändert und aktualisiert werden, abhängig von Benutzerinteraktionen, Datentypen usw.


Schau das Video: CartoDB CSS