I have just little knowledge about HTML and JavaScript. Nevertheless I was playing, copying and pasting around with Leaflet and CartoDB.

I want to display the features GeoJson in a table. This is what I tried.

var map = L.map('map').setView([51.0, 10.0], 6);

var base = {
"S/W" : L.TileLayer.provider('OpenStreetMap.BlackAndWhite'),
"TOP":  L.TileLayer.provider('Thunderforest.OpenCycleMap'),
"OpenStreetMap": L.TileLayer.provider('OpenStreetMap.Mapnik')

window.backupAlert = window.alert;
window.alert = function () {return true};
var alle = L.cartoDB('http://leak-my-brain.cartodb.com/api/v2/sql?q=SELECT * FROM jobsnew', {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconSize: [4, 4],
iconAnchor: [0, 0],
popupAnchor: [0, 0],
iconUrl: "http://www.zoowelt.org/wp-content/uploads/2013/02/viv_point.png"
 onEachFeature: function(feature, layer) {
layer.bindPopup('<strong>' + feature.properties.title + '</strong><br>' + feature.properties.kw);


map.on( "zoomend", function( e ) {
    console.log( "zoom level is " + map.getZoom())
}); //zur ausgabe des Zoomlevels in der Konsole
var layersControl = L.control.layers(base,alle); 
for (var key in alle._layers) {
  if (alle._layers.hasOwnProperty(key)) {
    backupAlert("hi comment");
function writeTable() {
    var out = '';
    for (var row=0; row<1000; row++) {
    if ( typeof(alle._layers[row])=='undefined') continue;
        out += '<tr>' 
        + '<td>' + alle._layers[row].feature.properties.title + '</td>' + 
        + '<td>' + alle._layers[row].feature.properties.kw + '</td>' 
        + '</tr>'

This somehow works but there are some issues. The main problem is that the indices in the alle are not starting at 0 and they are not increasing by the step size of 1.


2 Answers 2


You can loop over a L.LayerGroup using eachLayer in Leaflet. A L.cartoDB object is a specialized L.GeoJSON object which in turn is a specialized layer group.

Each feature, a geometry, in stored in a layer. The properties you want to display can be fetched from the features of the layers we are looping over.

var out = '';
    out += '<tr>';
    out += '    <td>' + layer.feature.properties.title + '</td>';
    out += '    <td>' + layer.feature.properties.kw    + '</td>';
    out += '</tr>';

But notice that creating the L.cartoDB object takes some time for the database query. And since this is done asynchronously, you have to wait for the result in code.

Sadly, as far as I found out, there is no way to pass a callback to handle the result as it returns. Here is a short lineup how to perform the task without the help of CartoDB. I am not going to explain this in more detail since it goes beyond the actual question and you would need to dig into technologies like JavaScript, PHP, SQL, GeoJSON and AJAX first.

  • use a JavaScript framework like jQuery for the AJAX request which allows you to specify a callback function to process the data as it returns
  • use a server side language like PHP to connect to the database, query the data from it, encode it to GeoJSON and output that
  • in the JavaSCript callback do both, create a Leaflet GeoJSON layer to display the result on the map, and loop over the GeoJSON object to append rows for each feature to the table
  • i've tried some timeout statements. but they didn't worked properly. can you describe a possibility to solve the asynchronous loading problem?!
    – Riccardo
    Jun 6, 2013 at 8:01
  • The best solution would be to execute a callback function which inserts the results after the result arrived. For example, the jQuery framework lets you specify such a callback function for AJAX requests.
    – danijar
    Jun 6, 2013 at 8:04

A bit hacky but effective

L.LayerGroup.prototype.eachLayer.call(layer, each_layer_fn);

I use this in a special case of a KML layer what is FeatureGroups inside FeatureGroups, to found the polygons inside I use the following function

var each_layer_fn = function(layer) {
    if(typeof(layer._layers) === 'undefined') {
        // do da thing
    } else
        L.LayerGroup.prototype.eachLayer.call(layer, each_layer_fn);        



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.