0

Am looking into both options as a means to generate an interactive unordered list of map feature names, not id#s, at clicked locations. The CartoDB example of clustering creates a list of cartodb_ids.

It has the capability to display a list of features contained in each cluster in an html sidebar. Selecting from the list returns information about the feature in the same window and the map zooms to that location. It was working well until I tried to add a bit to change the list of cartodb_IDs to a list of feature names. With help, I got the list of names, but now no information displays in the sidebar when the name is clicked. The debugger tells me not to put functions in a loop, and I can see that the function somehow doesn't know to continue with the next function outside the loop. I'm probably wrong. Anyhow, I have tried several things, but the following seem closest to what I'd like to do:

function addCursorInteraction(layer) {

layer.bind('featureClick', function (e, latlon, pxPos, data, layer) {
    var list = data.cdb_list.split(','); // I wonder if this 'cdb_list' is the list generated by the sql template(see tutorial): I don't know where to start with that part.
    if (list.length > 1) {
        $('.here-title').html(list.length + " programs at this location:");
        $('.here').html("<ul></ul>");

        var iID;
        var iTitle;
        var i;
        for (i in list)

        {
          //Work-around to turn cartodb_id list into a feature titles list
          $.get("http://username.cartodb.com/api/v1/sql?q=select cartodb_id, name, description, ST_X(the_geom) lon, ST_Y(the_geom) lat from table_name WHERE cartodb_id = " + list[i], function (ret) {
                var i;
                var count = 0;
                for (i in ret.rows[0]) { 
                    if (count == 1) { //this means #2 of the items called in sql above ('name')
                        iTitle = ret.rows[0][i];
                        iID = ret.rows[0];
                    }
                    count++;
                }
            //Append list items (titles) to sidebar
            $(".here ul").append('<li><a href="#' + list[0] + '" class="cartodb_id" id="' + list[0] + '">' + iTitle + '</a></li></li>');
            });
        }
      //Assign click function to list
        $('.cartodb_id').on('click', function () {
          $.get("http://username.cartodb.com/api/v1/sql?q=select cartodb_id, name, description, ST_X(the_geom) lon, ST_Y(the_geom) lat from table_name WHERE cartodb_id = " + $(this).attr('id'), function (ret) {

              //Get geolocation of selected feature name and zoom there
                var lat = ret.rows[0].lat;
                delete ret.rows[0].lat;
                var lon = ret.rows[0].lon;
                delete ret.rows[0].lon;
                map.setView(new L.LatLng(lat, lon), 16);

                //Populate sidebar with cartodb_id, name, and description of selected feature                  
                $('.here-title').html("");
                $('.here').html("");
                var i;
                for (i in ret.rows[0]) {
                    $('.here').append("<h3>" + i + "</h3>");
                  $('.here').append(ret.rows[0][i]);
                }
            });
        });

    } else {
        $('.here-title').html("");
        $('.here').html("");
        $.get("http://username.cartodb.com/api/v1/sql?q=select cartodb_id from table_name WHERE cartodb_id = " + data.cartodb_id, function (ret) {

            var i;
            for (i in ret.rows[0]) {
                $('.here').append("<h3>" + i + "</h3>");
                $('.here').append(ret.rows[0][i]);
            }
        });
    }
});
}

Here is the link (deleted)

I don't have enough rep to include all these links. So, let me know if you would like it.

It is two layers: the cluster layer that handles the list and loading content, plus cursor. The other layer is for the layer selection from the drop-down menu. Problem with this is that the cluster layer is always on. This is why I set the cluster layer to 0 opacity. Just wanted the aggregating functionality for the list.

  • could you provide a link to your example running? – javisantana May 20 '14 at 9:17
  • Still, I am fine with how this one is working: jsbin.com/capiduqo/25. Would just like the feature names (column: label) to replace the cartodb_ids in the ul. Was thinking maybe Query by Distance on a single layer would de-complicate matters. Thank you. – tbushman May 22 '14 at 14:26
  • I got it to work. :) I can't adequately express my happiness at this. jsbin.com/capiduqo/35/edit. – tbushman May 24 '14 at 11:45
  • This snippet was handy for reference: bl.ocks.org/andrewxhill/8547753 – tbushman May 24 '14 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.