Looping through GeoJSON items from GeoRSS with jQuery

JavaScript
1

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();
        });
    }


    });
});
[COLOR=#000000][FONT=Arial]});[/FONT][/COLOR]
2

Hi mate,

The main problem seems to be here:

$xml.find("title").each(
    // ...
);

if you change it to look for item rather than title, it finds all the item tags and iterates over them, searching within them for the item data.

The code you posted has a few other issues (it creates an item object and doesn’t do anything with it, and it never calls the displayPosts() function) so I ended up rewriting it slightly to get it working… I’ll post it here in case it’s useful to you:

function displayPost(item) {
    //Get the url for the image.
    var htmlString = '<a href="' + item.link + '">' + item.title + '</a>';
    var contentString = '<div class="content">' + htmlString + '</div>';

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

    //Create a new info window using the Google Maps API
    rssmarker.bindPopup(contentString).openPopup();
}

$.get('http://shifting-sands.com/feed/', function(rssdata) {
    $(rssdata).find("item").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()
            }
        displayPost(item);
    });
});
1 Like