I have an interactive map based on MapBox WebGL. I have an 'on click' function which is returning all information on data layers at that location (lovely). For each object I am trying to pull out just 'layer.id' (layer title) and 'layer.properties'(held as an object) and display that only.

I can't change the geojson so i need to be able to access the properties without knowing what they keys are.

I figured it would just be a case of looping through as an object array but i can't get it right.

Currently this partially works in the console;

map.on('click', function (e) {
        map.featuresAt(e.point, {radius: 5, layer: lyrlist}, function (err, features) {
        if (err) throw err;

        var keys = Object.keys(features);
        var val = "";

        for (var i = 0; i < keys.length; i++) {
            val = features[keys[i]];

    //console.log(val.layer.id,val.properties); shows layer title and property object in console.

        //document.getElementById('features').innerHTML = JSON.stringify(features, null, 2); Shows all info in panel.

link to demo site: http://www.activenaturalist.org.uk/lcren/imap/mb.html


This is now a duplicate and has been (better asked) answered in full here: https://stackoverflow.com/questions/35459896/format-complex-nested-objects/35472272

Your Answer

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

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