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)); }); }
