AnsweredAssumed Answered

Implement custom popup for "map series" template

Question asked by zconlen on Jul 20, 2015

Hi,

I'm trying to figure out how to extend the map series template - Story Map Series | Story Maps . I would like to create a custom infowindow, rather than use the default popups from my arcgis.com webmap. I'm doing this to provide a better look and primarily to provide improved charts using dojo.

 

I have downloaded the source code from github and deployed it to my web server. It sounds like the recommended approach to extending the app is to edit the custom javascript and css sections in the index.html file. In the custom javascript section, I'm subscribing to the "story-loaded-map" event as each tab will have its own infowindow, and this is where I'm struggling. I have tried a few approaches, but no luck. Here is what my code looks like now:

 

       //create infowindow

       var infoWindow = new InfoWindow(null, domConstruct.create("div"));

       infoWindow.startup();

        //set infowindow for map to use

       app.map.infoWindow = infoWindow;

       app.map.infoWindow.resize(275, 275);

 

       //create basic template for testing. Will add charts and content once its working.

       var template = new esri.InfoTemplate();

       template.setTitle("Test");

       template.setContent(getWindowContent);

 

        //add feature layer to map with infoTemplate....

       var layer = new FeatureLayer("my feature layer url", {

         mode: FeatureLayer.MODE_ONDEMAND,

         infoTemplate: template,

         outFields: ["*"]

       });

       var symbol = new SimpleFillSymbol();

       layer.setRenderer(new SimpleRenderer(symbol));

       app.map.addLayer(layer);

 

So, the default popup no longer displays, which is good, but the new infowindow does not. In the console, I'm seeing the following Uncaught TypeError: Cannot read property 'toScreen' of undefined

 

Can someone point me in the right direction?

 

FYI, I'm using the following sample as a guide to creating the infoWindow - Info window with chart | ArcGIS API for JavaScript

 

Thanks.

 

 

Outcomes