Using jQuery to Parse GeoRSS...No polygon graphics displayed...

GISAdmin1 · ‎03-19-2012

I have a simple GeoRSS parser that reads an feed with both polygons and points. The points draw fine, however, the polygons do not draw. It appears they are being created (according to DOM inspector), but, do not show up. Any ideas?

  <script type="text/javascript">
       dojo.require("esri.map");
   
   var map;
   var name = "";
   var description = "";
   var lat;
   var lon;
   var latlon = "";
   var defaultSymbol;               
   var sym;
   
   function init(){ 
       var initExtent = new esri.geometry.Extent({"xmin":-16638238,"ymin":3190518,"xmax":-8811087,"ymax":9060882,"spatialReference":{"wkid":102100}});               
          map = new esri.Map("map",{extent:initExtent});
               
          
     dojo.connect(map,"onLoad",retrieveGeoRSS);
          var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
          map.addLayer(basemap); 
     defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,150,0])); 
     sym = new esri.symbol.SimpleFillSymbol({"color":[255,255,0,64],"outline":{"color":[255,0,0,255],"width":1.5,"type":"esriSLS","style":"esriSLSDashDot"},"type":"esriSFS","style":"esriSFSSolid"});

   }

      function retrieveGeoRSS(){
                 
                $(document).ready(function(){
                    $.ajax({
                      //  url: 'https://portal.masas-x.ca/access/go?code=9xfaletolxkxj6k8r6wl6l5k3&url=https%3A%2F%2Fcommon.masas-x.ca%2Fhub%2Ffeed%3Fsecret%3Dp9tzou%26bbox%3D-154.249%252C41.642%252C-33.751%252C60.4151%26lang%3Den%26limit%3D200&_dc=1332172293795&limit=200',
                        url: 'Entries.xml',
                        cache: false,
                        dataType: 'xml',
                        error : function(xhr, stat){
                         console.log(xhr, stat);
              
             },
                        success: function(rss){

                            //$('#result').html(rss);
                          
       
                            $(rss).find("entry").each(function(){
        
                             name = "Title: " + $(this).find("[nodeName='title']").text();
                             description = "Description: " + $(this).find("[nodeName='content']").text();
                          
                             pointLocation = $(this).find("[nodeName='georss:point']").text();
                             polyLocation = $(this).find("[nodeName='georss:polygon']").text();
                             
                             
                             if (pointLocation){
                               pointLocationArray = pointLocation.split(" ");
                               
                             
                               lat = pointLocationArray[0];
                               lon = pointLocationArray[1];
                               addGraphics(lat,lon,name);              
                  }
                  
                       if (polyLocation){
                          polyLocationArray = polyLocation.split(" ");
                               lat = polyLocationArray[0];
                               lon = polyLocationArray[1];
                           
                               function coordinate(x, y) {
                     this.x = x;
                     this.y = y;
                 }
         
                     var arr = new Array();
                     for (var i = 0; i < polyLocationArray.length; i++) {
                   arr.push(new coordinate(lon,lat));
                 }

                     addPolygonGraphics(arr,name);              
                  }
               
                            });                      
                        }
                    });
                });
      
      }
      
   
   function addGraphics(lat,lon,name)
   {
                var point = new esri.geometry.Point( {"x": lon, "y": lat," spatialReference": {" wkid": 4326} });
                var finalPoint = esri.geometry.geographicToWebMercator(point);
                map.graphics.add(new esri.Graphic(finalPoint, defaultSymbol)); 
        map.infoWindow.setTitle(name); 
        map.infoWindow.resize(200,75);
        //map.infoWindow.setContent("<b>Lat/Lon:</b> " + parseFloat(lat).toFixed(3) + ", " + parseFloat(lon).toFixed(3));
             
   }   
   function addPolygonGraphics(arr,name)
   {
       
                var polygon = new esri.geometry.Polygon(new esri.SpatialReference({wkid:4326}));
                polygon.addRing(arr);
         var poly_wm = esri.geometry.geographicToWebMercator(polygon);
    
            var graphicPOLY = new esri.Graphic(poly_wm,sym);
            map.graphics.add(graphicPOLY); 
            map.infoWindow.setTitle(name); 
        map.infoWindow.resize(200,75);
        //map.infoWindow.setContent("<b>Lat/Lon:</b> " + parseFloat(lat).toFixed(3) + ", " + parseFloat(lon).toFixed(3));
        
   } 

   dojo.addOnLoad(init);     
  </script>

Sample here:

http://cosmosbeta.surrey.ca/apps/cosmosbeta/COP/test.html

derekswingley1 · ‎03-21-2012

Thanks for posting this�?? it's not everyday you see GeoRSS with polygons.

I've put up a working sample to show you how to do this: http://dl.dropbox.com/u/2654618/georss_polygons.html (and without jQuery!)

Two caveats:
�??if you want this to work in IE, you'll need to do a little more work because dojo.query doesn't work to find node with a colon (hopefully you don't need to support IE)
�??the link above doesn't do any handling for polygons with holes

GISAdmin1 · ‎03-22-2012

Thanks Derek. Once again you have solved the issue. However, I do need to use this map in IE. Your code helped me though. This little snippet of code takes a comma separated sting of lat/lon and parses into an array for the ESRI polygon object:

for ( var i = 0, il = arr.length; i < il; i+=2 ) {
   ring.push([parseFloat(arr[i+1]), parseFloat(arr)]);
}

derekswingley1 · ‎03-22-2012

Glad to help.

For the IE specifics, in the past I've done something like this to parse XML and retrieve tags that have names with colons:

// dojo.query doesn't work for elements with a : in the name on IE
// fallback to native IE methods
var projectInfo = [];
if (dojo.isIE) {
  var lats = resp.getElementsByTagName("geo:lat");
  var lngs = resp.getElementsByTagName("geo:long");
  var projYear = resp.getElementsByTagName("dcst:yearbudgeted");
  var projPerc = resp.getElementsByTagName("dcst:percentcompleted");
  var projName = resp.getElementsByTagName("dcst:projectname");
  var projDesc = resp.getElementsByTagName("dcst:workdescription");
  // make sure there's a lat for each long
  if (lats.length != lngs.length) {
    alert("found more lats than longs or vice versa, aborting...");
    return;
  }
  for (var i = 0, il = lats.length; i < il; i++) {
    projectInfo.push({
      "x": parseFloat(lngs.childNodes[0].nodeValue),
      "y": parseFloat(lats.childNodes[0].nodeValue),
      "percent": projPerc.childNodes[0].nodeValue,
      "year": projYear.childNodes[0].nodeValue,
      "name": projName.childNodes[0].nodeValue,
      "desc": projDesc.childNodes[0].nodeValue
    });
  }
} else { // use dojo.query
  var geoLat = dojo.query("lat", resp);
  var geoLng = dojo.query("long", resp);
  var projYear = dojo.query("yearbudgeted", resp);
  var projPerc = dojo.query("percentcompleted", resp);
  var projName = dojo.query("projectname", resp);
  var projDesc = dojo.query("workdescription", resp);
  if (geoLat.length != geoLng.length) {
    console.log("found more lats than longs or vice versa, aborting...");
    return;
  }
  for (var i = 0, il = geoLat.length; i < il; i++) {
    projectInfo.push({
      "x": parseFloat(geoLng.textContent),
      "y": parseFloat(geoLat.textContent),
      "percent": projPerc.textContent,
      "year": projYear.textContent,
      "name": projName.textContent,
      "desc": projDesc.textContent,
    });
  }
}

Not the prettiest solution but it works.