3

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;
        //console.log(features)

        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

2 Answers 2

2

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

0

The question title in the linked post https://stackoverflow.com/questions/35459896/format-complex-nested-objects/35472272 DOESN'T mention anything of Mapbox layer or Mapbox features.

I will just post the answer from the linked post below.


Here's how you iterate the features object, and create something human-readable out of it. Explanation in the comments:

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

        // Grab the 'ul' element with ID 'features' from the DOM            
        var featureList = document.getElementById('features');

        // Empty the list on every click
        featureList.innerHTML = '';

        // Iterate the features array
        for (var i = 0; i < features.length; i++) {

            // Create a listitem for each feature
            var featureItem = document.createElement('li');

            // Set the feature's listitem's content to the layer's ID
            featureItem.textContent = features[i].layer.id;

            // Append the featureitem to the featurelist
            featureList.appendChild(featureItem);

            // Create a new list for the item's properties
            var propertyList = document.createElement('ul');

            // Append the list to the feature's listitem
            featureItem.appendChild(propertyList);

            // Create convenience var for the properties object
            var properties = features[i].properties;

            // Iterate the properties object
            for (var property in properties) {

                // Create new listitem for every property
                var propertyItem = document.createElement('li');

                // Set property's listitem's textcontent to key/value
                propertyItem.textContent = property + ': ' + properties[property];

                // Append property's listitem to the feature's propertylist.
                propertyList.appendChild(propertyItem);

            }
        }
    });
});

Your Answer

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

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