Picasa Images in arcgis JSAPI, using point clustering.

Discussion created by LanceWeaver on Jul 10, 2012
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...     (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.)


Using the new point clustering class  (   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...

The code that manages the marker symbols looks like this

        function addClusters(response) {
            var photoInfo = {};
            var wgs = new esri.SpatialReference({ "wkid": 4326 });
            // =, function(p) {
   =, function(p) {
                try {
                    var pos = p["georss$where"]["gml$Point"]["gml$pos"]["$t"] ;
                    var lat = pos.substr(0," "));
                    var lng = pos.substr(" "));
                } 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,
                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>' +


            // cluster layer that uses OpenLayers style clustering
            clusterLayer = new extras.ClusterLayer({
            "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" );
            var one = new esri.symbol.PictureMarkerSymbol("", 32, 32).setOffset(0, 15);
            var two = new esri.symbol.PictureMarkerSymbol("", 44, 44).setOffset(0, 5);
            var three = new esri.symbol.PictureMarkerSymbol("", 60, 60).setOffset(0, 5);
            var four = new esri.symbol.PictureMarkerSymbol("", 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);

            map.infoWindow.resize(270, 316);