How to render points from CartoDB with Leaflet and Leaflet Vector Layers?

Question

I have a table in CartoDB containing some points. I want to render these points dynamically with Leaflet. There is cartodb.js for such tasks, but it does not support full customization of Tooltips, as I have seen. Instead I found a Leaflet-Plugin for that.

In my HTML I have the following JS-Code, but it does not work except showing the Base Map. What am I doing wrong? Are there other solutions for Leaflet?

var map = new L.Map('map').setView([51.0, 10.0], 6);
var defaultLayer = L.TileLayer.provider('MapQuestOpen.OSM');
map.addLayer(defaultLayer);

var baseLayers = {
"Mapquest OSM": defaultLayer,
"OpenStreetMap German Style": L.TileLayer.provider('OpenStreetMap.DE'),
    };

// Use Leaflet Vector Layers plugin to show data from CartoDB

var cartodblayer = new lvector.CartoDB({
    user: "user",
    table: "example_data",
    scaleRange: [6, 20],
    symbology: {
        vectorOptions: {
            icon: new customIcon({
                iconUrl: "/icon/icon.png"
            })
        }
    },
    popupTemplate: '<p>{homepage}</p>',
    singlePopup: false
});

cartodblayer.setMap(map);

map.addControl(new L.Control.Layers(baseLayers, '', {collapsed: true}));

Answer 1

you can query cartoDB to get the points in GeoJSON format like this:

http://{account}.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM {table_name}

You will get a featurecollection looking something similar to this:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":    {"cartodb_id":58,"name":xxx,"email":xxx,"created_at":"2011-03-20T09:44:38Z","updated_at":"2011-09-09T12:39:42Z","ncuser":1311468667},"geometry":{"type":"Point","coordinates":[8.705274,50.607916]}},...

then you parse that using leaflet as described here: http://leafletjs.com/examples/geojson.html

and customize your infowindow using CSS