CODEWITHSUNDEEP
ajaxmapsleafletgeojson
MÖRK
MÖRK

Reputation: 991

Ajax function to collect geoJSON FeatureCollection and then output popups onto leaflet map layer

I am trying to create an ajax function in which I use a form to pass a bbox value to a PHP script which then uses the bbox parameters to output a FeatureCollection back to the ajax callback.

From this I am using JSON.parse() and then trying to display the description part of each feature as a popup over its corresponding point.

I have spent countless hours trying to figure out what is going wrong in my code but I just can't seem to work it out.

Here is my HTML for the form:

<select name="bbox" id="bbox" onchange="ajaxrequest()">
  <option name="Select" value="Select">Please Select</option>
  <option name="Hampshire" value="-1.40,50,-1.39,51&format=geojson">Hampshire</option>
</select>

Here is my AJAX function:

function ajaxrequest()
{
    var bbox = document.getElementById("bbox").value;
    //alert(bbox);
    var request = new Ajax().sendRequest
        ('points.php',
            { method: 'GET',
              parameters: 'bbox=' + bbox,
              callback: resultsReturned }
        );
}

And here is the AJAX callback which contains the feature collection geoJSON in the response text:

function resultsReturned (xmlHTTP)
{
    //alert(xmlHTTP.responseText);
    var geojson = JSON.parse(xmlHTTP.responseText);

    for(var i=0; i<geojson.features.length; i++)
    {
        var layer = new L.geojson();
        layer.addData(geojson.features[i]);
    }
}

Would greatly appreciate it if someone could fill me in on how to finish this as it's killing me.

Thanks in advance.

Upvotes: 1

Views: 4038

Answers (2)

flup
flup

Reputation: 27104

I think you are looking for this then:

function resultsReturned (xmlHTTP)
{
    var features = JSON.parse(xmlHTTP.responseText);
    L.geoJson(features).addTo(map);
}

(See http://leafletjs.com/examples/geojson.html)

If you want to bind a popup to each feature:

function resultsReturned (xmlHTTP)
{
    var features = JSON.parse(xmlHTTP.responseText);
    L.geoJson(features, 
        { onEachFeature: 
              function(feature,layer) {
                  layer.bindPopup(feature.properties.description);
              }
        }).addTo(map);
}

Upvotes: 1

M&#214;RK
M&#214;RK

Reputation: 991

Solved I added this code to my init function. Please note the "null" as this is required so the AJAX callback can populate it.

layer = new L.GeoJSON( null,
    { onEachFeature: function(feature,layer)
        {
            layer.bindPopup(feature.properties.description);
        }
    }).addTo(map);

My initial AJAX call function is the same as posted above and the AJAX response has been changed slightly to this:

function resultsReturned (xmlHTTP)
{
    //alert(xmlHTTP.responseText);
    var features = JSON.parse(xmlHTTP.responseText);

    for(var i=0; i<features.features.length; i++)
    {
        layer.addData(features.features[i]);
    }

}

Thanks for the help @flup for helping me understand the way the the coding works :)

Upvotes: 0

Related Questions