SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard masm50's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    2,508
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,401
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi mate,

    The main problem seems to be here:
    Code JavaScript:
    $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:

    Code JavaScript:
    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);
        });
    });


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •