Picasa Images in arcgis JSAPI, using point clustering.

[lanceweaver]

Basically I am trying to duplicate the Google Maps, Picasa images layer... in an arcgis javascript application

Here's an example of it working in Google maps...  http://geology.utah.gov/testing/fieldtrip/index.html     (it is dynamically pulling a Picasa feed of thousands of images, and then clustering them on the google map, using the top picture in the stack as the cluster marker symbol.)

[ATTACH=CONFIG]15923[/ATTACH]

Using the new point clustering class  (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/layers_point_c...)   I'v pretty much got it working in the arcgis javascript api....    I just need to replace the default renderer picture marker symbol with a dynamic image from the attributes of the marker on the top of the markercluster stack.

Any Ideas?   Here's my ArcGIS application so far...  http://geology.utah.gov/testing/fieldtrip/esrimap_1.html

The code that manages the marker symbols looks like this

        function addClusters(response) {
            var photoInfo = {};
            var wgs = new esri.SpatialReference({ "wkid": 4326 });
            //photoInfo.data = dojo.map(resp, function(p) {
            photoInfo.data = dojo.map(response.feed.entry, function(p) {
                try {
                    var pos = p["georss$where"]["gml$Point"]["gml$pos"]["$t"] ;
                    var lat = pos.substr(0,pos.search(" "));
                    var lng = pos.substr(pos.search(" "));
                } catch (e) {
                    //console.log("not there: "+e.message);
                }

                var latlng = new esri.geometry.Point(parseFloat(lng), parseFloat(lat), wgs);
                var webMercator = esri.geometry.geographicToWebMercator(latlng);
                var attributes = {
                    "Caption": p.summary["$t"],
                    "Title": p.title["$t"],
                    "NumberComments": p.gphoto$commentCount["$t"],
                    "Tags": p["media$group"]["media$keywords"]["$t"],
                    "Name": "none",
                    "Image": p["media$group"]["media$thumbnail"][4].url,
                    "Link": p.link[1].href
                };
                //console.log(attributes);
                return { "x": webMercator.x, "y": webMercator.y, "attributes": attributes };
            });




            // popupTemplate to work with attributes specific to this dataset
            var popupTemplate = esri.dijit.PopupTemplate({
            "title": "Virtual Field Guide",
            "description":'<div class="popupDiv">' +
                '<div class="popupImage"><a href="{Link}" target="_blank"><img src="{Image}" ></a></div>' +
                '<br><span class="popupField">File Name: </span> <span class="popupValue">{Title} </span>' +
                '<br><span class="popupField">Tags: </span> <span class="popupValue">{Tags} </span>' +
                '<br><span class="popupField">Caption: </span> <span class="popupValue">{Caption} </span>' +
                '<br><span class="popupField">User Comments: </span> <span class="popupValue">{NumberComments} </span>' +
                '<br><small><a href="{Link}" target="_blank"> Open in Picasa </a></small>' +
                '</div>'

            });

            // cluster layer that uses OpenLayers style clustering
            clusterLayer = new extras.ClusterLayer({
            "data": photoInfo.data,
            "distance": 30,
            "id": "clusters",
            "labelColor": "#fff",
            "labelOffset": 0,
            "resolution": map.extent.getWidth() / map.width,
            "singleColor": "#888",
            "showSingles": true,
            "singleTemplate": popupTemplate
            });
            var defaultSym = new esri.symbol.SimpleMarkerSymbol().setSize(4);
            var renderer = new esri.renderer.ClassBreaksRenderer( defaultSym,"clusterCount" );
            console.log("hi");
            console.log(photoInfo.data);
            var one = new esri.symbol.PictureMarkerSymbol("http://geology.utah.gov/testing/fieldtrip/img/pic-stack-80px.png", 32, 32).setOffset(0, 15);
            var two = new esri.symbol.PictureMarkerSymbol("http://geology.utah.gov/testing/fieldtrip/img/pic-stack2-80px.png", 44, 44).setOffset(0, 5);
            var three = new esri.symbol.PictureMarkerSymbol("http://geology.utah.gov/testing/fieldtrip/img/pic-stack5-80px.png", 60, 60).setOffset(0, 5);
            var four = new esri.symbol.PictureMarkerSymbol("http://geology.utah.gov/testing/fieldtrip/img/pic-stack6-80px.png", 72, 72).setOffset(0, 5);
            renderer.addBreak(0, 2, one);
            renderer.addBreak(2, 100, two);
            renderer.addBreak(100, 200, three);
            renderer.addBreak(200, 1001, four);

            clusterLayer.setRenderer(renderer);
            map.addLayer(clusterLayer);
            map.infoWindow.resize(270, 316);