CODEWITHSUNDEEP
jqueryjsonleafletmapboxgeorss
Tim
Tim

Reputation: 45

Looping through GeoJSON items from GeoRSS with jQuery

I have a GeoRSS feed, that I am trying to parse with jQuery to create a geoJSON array that I can then add to a MapBox map with Leaflet.

I think I have managed to turn the GeoRSS into GeoJSON ok, but then I just can;t seem to work out how to loop through each item so I can then add it my map. If I take out the loop part I get a single point plotted onto my map - the most recent entry from the RSS feed.

Any pointers would be very much appreciated!

Here's the code I'm running:

$(document).ready(function(){
$.get('http://shifting-sands.com/feed/', function(rssdata) {
var $xml = $(rssdata);
$xml.find("title").each(function() {
    var $this = $(this),
        item = {
            title: $this.find("title").text(),
            link: $this.find("link").text(),
            description: $this.find("description").text(),
            pubDate: $this.find("pubDate").text(),
            latitude: $this.find("lat").text(),
            longitude: $this.find("long").text()                
    }

function displayPosts(rssdata){ $.each(rssdata.rss.channel.item, function(i,item){

                //Read in the lat and long of each photo and stores it in a variable.
                lat = item.latitude;
                long = item.longitude;
                title = item.title;
                clickurl = item.link;
                //Get the url for the image.
                var htmlString = '<a href="' + clickurl + '">' + title + '</a>';                        
                var contentString = '<div id="content">' + htmlString + '</div>';   

                //Create a new marker position using the Leaflet API.
                var rssmarker = L.marker([lat, long]).addTo(map);

                //Create a new info window using the Google Maps API

                rssmarker.bindPopup(contentString).openPopup();
        });
    }

    });
});

});

Upvotes: 2

Views: 777

Answers (1)

tmcw
tmcw

Reputation: 11882

Create a GeoJSON feature collection:

var featurecollection = { type: 'FeatureCollection', features: [] };

And in each loop iteration, push the feature onto it.

featurecollection.features.push({
  type: 'Feature',
  properties: {}, // any properties you want in the feature
  geometry: [long, lat]
});

Upvotes: 2

Related Questions