0

In OpenLayers I have added a GeoJSON layer (of the world) and created a simple infotool. The GeoJSON layer contains multiple features for some countries.

If I click on a country I only get one result, but I would like to see all the results in the infobox.

The infobox I have created like this:

            landgrab.events.on({
            featureselected: function(event) {
                var feature = event.feature;
                var country = feature.attributes.landgrabbed;
                var landgrabber = feature.attributes.landgrabber;
                var landgrabber_country = feature.attributes.base;
                var hectares = feature.attributes.hectares;
                var output = country + "<br/><br/>Land taken by: " + landgrabber + "<br/>From country:  " + landgrabber_country + "<br/>Hectares:  " + hectares;
                document.getElementById("output-id").innerHTML = output;
            }
        });

An example of the GeoJSON layer is:

{ "type": "Feature", "id": 2, "properties": { "landgrabbed": "Angola", "landgrabber": "CAMC Engineering Co. Ltd", "base": "China", "sector": "Construction", "hectares": 1500.0, "production": "Rice", "projected_investment": "US$77 million", "status_of_deal": "Done ", "isoa3": "AGO" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 16.326528354567046, -5.877470391466218 ], [ 16.573179965896145, -6.622644545115094 ], [ 16.86019087084523, -7.222297865429979 ], [ 17.089995965247169, -7.545688978712477 ], [ 17.472970004962292, -8.068551120641658 ], [ 18.134221632569052, -7.987677504104866 ], [ 18.464175652752687, -7.847014255406478 ], [ 19.016751743249671, -7.98824594486014 ], [ 19.166613396896082, -7.738183688999726 ], [ 19.417502475673217, -7.155428562044278 ], [ 20.037723016040218, -7.11636117923166 ], [ 20.09162153492062, -6.943090101756951 ], [ 20.601822950938327, -6.939317722199689 ], [ 20.51474816252653, -7.299605808138665 ], [ 21.728110792739756, -7.290872491081316 ], [ 21.746455926203367, -7.920084730667114 ], [ 21.94913089365204, -8.305900974158305 ], [ 21.801801385187957, -8.908706556842986 ], [ 21.875181919042404, -9.523707777548566 ], [ 22.208753289486424, -9.89479623783653 ], [ 22.155268182064333, -11.084801120653779 ], [ 22.402798292742432, -10.993075453335692 ], [ 22.837345411884769, -11.017621758674338 ], [ 23.456790805767469, -10.867863457892483 ], [ 23.912215203555746, -10.926826267137542 ], [ 24.017893507592618, -11.237298272347118 ], [ 23.904153680118242, -11.722281589406336 ], [ 24.079905226342902, -12.191296888887308 ], [ 23.930922072045377, -12.565847670138822 ], [ 24.016136508894704, -12.911046237848552 ], [ 21.933886346125945, -12.898437188369357 ], [ 21.887842644953878, -16.080310153876894 ], [ 22.56247846852429, -16.898451429921835 ], [ 23.215048455506093, -17.523116143465955 ], [ 21.377176141045595, -17.93063648851971 ], [ 18.956186964603631, -17.789094740472237 ], [ 18.263309360434221, -17.309950860262006 ], [ 14.209706658595053, -17.353100681225712 ], [ 14.058501417709039, -17.423380629142656 ], [ 13.462362094789967, -16.971211846588744 ], [ 12.814081251688407, -16.941342868724078 ], [ 12.215461460019384, -17.111668389558062 ], [ 11.73419884608515, -17.301889336824502 ], [ 11.640096062881611, -16.673142185129208 ], [ 11.778537224991567, -15.793816013250691 ], [ 12.123580763404448, -14.878316338767931 ], [ 12.175618930722266, -14.449143568583892 ], [ 12.500095249083017, -13.547699883684402 ], [ 12.738478631245442, -13.137905775609937 ], [ 13.312913852601838, -12.483630466362513 ], [ 13.633721144269828, -12.038644707897191 ], [ 13.738727654686926, -11.297863050993143 ], [ 13.686379428775297, -10.731075941615842 ], [ 13.387327915102162, -10.373578383020728 ], [ 13.120987583069876, -9.766897067914115 ], [ 12.875369500386569, -9.166933689005489 ], [ 12.929061313537801, -8.959091078327575 ], [ 13.236432732809874, -8.562629489784342 ], [ 12.933040398824318, -7.596538588087753 ], [ 12.72829837408392, -6.927122084178805 ], [ 12.227347039446443, -6.294447523629373 ], [ 12.322431674863566, -6.100092461779653 ], [ 12.735171339578699, -5.965682061388478 ], [ 13.02486941900699, -5.984388929878108 ], [ 13.375597364971895, -5.864241224799557 ], [ 16.326528354567046, -5.877470391466218 ] ] ], [ [ [ 12.436688266660923, -5.684303887559224 ], [ 12.182336866920281, -5.789930515163803 ], [ 11.914963006242118, -5.037986748884734 ], [ 12.318607618873926, -4.606230157086159 ], [ 12.62075971848455, -4.438023369976122 ], [ 12.995517205465205, -4.781103203961919 ], [ 12.631611769265845, -4.991271254092936 ], [ 12.468004184629763, -5.248361504744992 ], [ 12.436688266660923, -5.684303887559224 ] ] ] ] } }
,
{ "type": "Feature", "id": 3, "properties": { "landgrabbed": "Angola", "landgrabber": "ENI", "base": "Italy", "sector": "Energy", "hectares": 12000.0, "production": "Oil palm", "projected_investment": null, "status_of_deal": "In process", "isoa3": "AGO" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 16.326528354567046, -5.877470391466218 ], [ 16.573179965896145, -6.622644545115094 ], [ 16.86019087084523, -7.222297865429979 ], [ 17.089995965247169, -7.545688978712477 ], [ 17.472970004962292, -8.068551120641658 ], [ 18.134221632569052, -7.987677504104866 ], [ 18.464175652752687, -7.847014255406478 ], [ 19.016751743249671, -7.98824594486014 ], [ 19.166613396896082, -7.738183688999726 ], [ 19.417502475673217, -7.155428562044278 ], [ 20.037723016040218, -7.11636117923166 ], [ 20.09162153492062, -6.943090101756951 ], [ 20.601822950938327, -6.939317722199689 ], [ 20.51474816252653, -7.299605808138665 ], [ 21.728110792739756, -7.290872491081316 ], [ 21.746455926203367, -7.920084730667114 ], [ 21.94913089365204, -8.305900974158305 ], [ 21.801801385187957, -8.908706556842986 ], [ 21.875181919042404, -9.523707777548566 ], [ 22.208753289486424, -9.89479623783653 ], [ 22.155268182064333, -11.084801120653779 ], [ 22.402798292742432, -10.993075453335692 ], [ 22.837345411884769, -11.017621758674338 ], [ 23.456790805767469, -10.867863457892483 ], [ 23.912215203555746, -10.926826267137542 ], [ 24.017893507592618, -11.237298272347118 ], [ 23.904153680118242, -11.722281589406336 ], [ 24.079905226342902, -12.191296888887308 ], [ 23.930922072045377, -12.565847670138822 ], [ 24.016136508894704, -12.911046237848552 ], [ 21.933886346125945, -12.898437188369357 ], [ 21.887842644953878, -16.080310153876894 ], [ 22.56247846852429, -16.898451429921835 ], [ 23.215048455506093, -17.523116143465955 ], [ 21.377176141045595, -17.93063648851971 ], [ 18.956186964603631, -17.789094740472237 ], [ 18.263309360434221, -17.309950860262006 ], [ 14.209706658595053, -17.353100681225712 ], [ 14.058501417709039, -17.423380629142656 ], [ 13.462362094789967, -16.971211846588744 ], [ 12.814081251688407, -16.941342868724078 ], [ 12.215461460019384, -17.111668389558062 ], [ 11.73419884608515, -17.301889336824502 ], [ 11.640096062881611, -16.673142185129208 ], [ 11.778537224991567, -15.793816013250691 ], [ 12.123580763404448, -14.878316338767931 ], [ 12.175618930722266, -14.449143568583892 ], [ 12.500095249083017, -13.547699883684402 ], [ 12.738478631245442, -13.137905775609937 ], [ 13.312913852601838, -12.483630466362513 ], [ 13.633721144269828, -12.038644707897191 ], [ 13.738727654686926, -11.297863050993143 ], [ 13.686379428775297, -10.731075941615842 ], [ 13.387327915102162, -10.373578383020728 ], [ 13.120987583069876, -9.766897067914115 ], [ 12.875369500386569, -9.166933689005489 ], [ 12.929061313537801, -8.959091078327575 ], [ 13.236432732809874, -8.562629489784342 ], [ 12.933040398824318, -7.596538588087753 ], [ 12.72829837408392, -6.927122084178805 ], [ 12.227347039446443, -6.294447523629373 ], [ 12.322431674863566, -6.100092461779653 ], [ 12.735171339578699, -5.965682061388478 ], [ 13.02486941900699, -5.984388929878108 ], [ 13.375597364971895, -5.864241224799557 ], [ 16.326528354567046, -5.877470391466218 ] ] ], [ [ [ 12.436688266660923, -5.684303887559224 ], [ 12.182336866920281, -5.789930515163803 ], [ 11.914963006242118, -5.037986748884734 ], [ 12.318607618873926, -4.606230157086159 ], [ 12.62075971848455, -4.438023369976122 ], [ 12.995517205465205, -4.781103203961919 ], [ 12.631611769265845, -4.991271254092936 ], [ 12.468004184629763, -5.248361504744992 ], [ 12.436688266660923, -5.684303887559224 ] ] ] ] } }

An example of the whole page can be found here: http://stefanvanderhoorn.nl/experiments/ol_empty_base_geojson.html

Hope someone can help!

Thanks

2 Answers 2

2

It's more of a JS question to be honest; the easiest way would be iterate over all available attributes and append them to the output (rather than hardcode names of the attributes):

// (...)
featureselected: function (event) {
    var feature = event.feature;
    var infoTable = createInfoTable(feature);
    var output = country + "<br/><br/>" + infoTable;
    document.getElementById("output-id").innerHTML = output;
}
// (...)

function createInfoTable(feature) {
    var headers = {
        "landgrabber": "Land taken by",
        "landgrabbed": "From country"
        "hectares": "Hectares"
        // etc.
    };

    var html = "";

    for (var key in feature.attributes) {
        var value = feature.attributes[attribute];
        var header = headers[key];
        html += header + ": " + value + "<br/>";
    }

    return html;
}

You didn't specify your requirements so I covered the simplest scenario, not handling special cases (value is null, attribute required/optional, etc.)

1
  • 1
    or use map (I use underscore.js): function createInfoTable(feature) { var headers = { "landgrabber": "Land taken by", "landgrabbed": "From country", "hectares": "Hectares" // etc. }; return _.map(headers, function(name, key){ return name + ": " + feature.attributes[key]; }).join("</br>"); }
    – atlefren
    Commented May 30, 2013 at 11:49
0

if all the features share the same fields in the GeoJSON, just write every field. If not, do the same, just write every field as you did and then add if/else to define which field will be printed and which won't, something like:

if (landgrabbed =! null)
else
// etc, etc,
fi

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.