AnsweredAssumed Answered

Flickr API on Story maps

Question asked by n.delafeld on Feb 21, 2014
Latest reply on Feb 21, 2014 by n.delafeld
Hi, I am integrating Flickr API to my MapTour Story map.
I found this example here and I managed to see all photos on the map.
The problem is that I can't open Popups to see details for Photos as they do. I click and nothing happens. Why that?
The only difference in my code is the creation of the map.
Here is the code for the map:
function loadWebMap(webmapIdOrJSON) {  console.log("maptour.core.Core - loadWebMap - webmapId:", webmapIdOrJSON);      arcgisUtils.createMap(webmapIdOrJSON, "mainMap", {   mapOptions: {    slider: true,    autoResize: false,    // Force the web map extent to the world to get all data from the FS    extent : new Extent({     xmax: 180,     xmin: -180,     ymax: 90,     ymin: -90,     spatialReference: {      wkid:4326     }    }),    showAttribution: true   },   ignorePopups: true,   bingMapsKey: commonConfig.bingMapsKey  }).then(   lang.hitch(this, function(response){    webMapInitCallback(response);   }),   lang.hitch(this, function(){    initError("createMap");   })  );   }

here is the callback for the map:
function webMapInitCallback(response) {  console.log("maptour.core.Core - webMapInitCallback");      if( configOptions.authorizedOwners && configOptions.authorizedOwners.length > 0 && configOptions.authorizedOwners[0] ) {   var ownerFound = false;        if( response.itemInfo.item.owner )     ownerFound = $.inArray(response.itemInfo.item.owner, configOptions.authorizedOwners) != -1;        if (!ownerFound) {    initError("invalidConfigOwner");    return;   }  }      app.map = response.map;  app.data.setWebMapItem(response.itemInfo);      app.map.disableKeyboardNavigation();   // Initialize header  // Title/subtitle are the first valid string from: index.html config object, web application data, web map data  var title = configOptions.title || WebApplicationData.getTitle() || response.itemInfo.item.title;  var subtitle = configOptions.subtitle || WebApplicationData.getSubtitle() || response.itemInfo.item.snippet;      applyUILayout(WebApplicationData.getLayout() || configOptions.layout);   var urlParams = Helper.getUrlParams();  var appColors = WebApplicationData.getColors();  var logoURL = WebApplicationData.getLogoURL() || APPCFG.HEADER_LOGO_URL;  var logoTarget = (logoURL == APPCFG.HEADER_LOGO_URL) ? APPCFG.HEADER_LOGO_TARGET : WebApplicationData.getLogoTarget();      app.header.init(   ! app.isInBuilderMode && (APPCFG.EMBED || urlParams.embed || urlParams.embed === ''),   title,   subtitle,   appColors[0],   logoURL,   logoTarget,   ! app.isInBuilderMode && (    (! isProd() && Helper.getAppID(isProd()))    || isProd() && app.data.userIsAppOwner()),   WebApplicationData.getHeaderLinkText() === undefined ? APPCFG.HEADER_LINK_TEXT : WebApplicationData.getHeaderLinkText(),   WebApplicationData.getHeaderLinkURL() === undefined ? APPCFG.HEADER_LINK_URL : WebApplicationData.getHeaderLinkURL(),   WebApplicationData.getSocial()  );  document.title = title ? $('<div>' + title + '</div>').text() : 'Map Tour';      _mainView.webmapLoaded();  //------------------here is were I call the function for Flickr----------------------  dojo.connect(app.map,"onLoad",loadPhotos("Lakes")); }


And here is the code for Flickr:
window.loadPhotos = function loadPhotos(key) {         var flickrPhotos = esri.request({           url: "http://api.flickr.com/services/feeds/geo",           content:{               format:"json",               tagmode: "any",               tags: key           },           callbackParamName: "jsoncallback"         });         flickrPhotos.then(addPhotos);      };        function addPhotos(data){              app.map.graphics.clear();       var symbol = new esri.symbol.PictureMarkerSymbol("http://dl.dropbox.com/u/52777651/flickr.png", 24, 24);         var template = new PopupTemplate ({            title: "{title}",            description:"{description}"         });          dojo.forEach(data.items, function(item){            var loc = new esri.geometry.Point(item.longitude, item.latitude);            app.map.graphics.add(new esri.Graphic(loc, symbol, item, template));                                });  }

Outcomes