<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Implement custom popup for &amp;quot;map series&amp;quot; template in ArcGIS JavaScript Maps SDK Questions</title>
    <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/implement-custom-popup-for-quot-map-series-quot/m-p/273359#M25201</link>
    <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt; font-family: arial, helvetica, sans-serif;"&gt;Hi,&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt; font-family: arial, helvetica, sans-serif;"&gt;I'm trying to figure out how to extend the map series template - &lt;A href="http://storymaps.arcgis.com/en/app-list/map-series/" title="http://storymaps.arcgis.com/en/app-list/map-series/"&gt;Story Map Series | Story Maps&lt;/A&gt; . 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. &lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt; font-family: arial, helvetica, sans-serif;"&gt;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 &lt;/SPAN&gt;&lt;SPAN style="font-family: arial, helvetica, sans-serif;"&gt;&lt;CODE style="font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6000003814697px; background: transparent;"&gt;&lt;SPAN style="font-family: arial, helvetica, sans-serif;"&gt;"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:&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-family: arial, helvetica, sans-serif;"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;//create infowindow&lt;/EM&gt;&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var infoWindow = new InfoWindow(null, domConstruct.create("div"));&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; infoWindow.startup();&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; //set infowindow for map to use&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; app.map.infoWindow = infoWindow;&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; app.map.infoWindow.resize(275, 275);&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; //create basic template for testing. Will add charts and content once its working.&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var template = new esri.InfoTemplate();&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; template.setTitle("Test");&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; template.setContent(getWindowContent);&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; //add feature layer to map with infoTemplate.... &lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var layer = new FeatureLayer("my feature layer url", {&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; mode: FeatureLayer.MODE_ONDEMAND,&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; infoTemplate: template,&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; outFields: ["*"]&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; });&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var symbol = new SimpleFillSymbol();&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; layer.setRenderer(new SimpleRenderer(symbol));&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; app.map.addLayer(layer);&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;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 &lt;SPAN style="color: #e23d39;"&gt;TypeError: Cannot read property 'toScreen' of undefined&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Can someone point me in the right direction?&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;FYI, I'm using the following sample as a guide to creating the infoWindow - &lt;A href="https://developers.arcgis.com/javascript/jssamples/widget_infowindowchart.html" title="https://developers.arcgis.com/javascript/jssamples/widget_infowindowchart.html"&gt;Info window with chart | ArcGIS API for JavaScript&lt;/A&gt; &lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Thanks.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
    <pubDate>Tue, 21 Jul 2015 01:06:36 GMT</pubDate>
    <dc:creator>ZorbaConlen</dc:creator>
    <dc:date>2015-07-21T01:06:36Z</dc:date>
    <item>
      <title>Implement custom popup for "map series" template</title>
      <link>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/implement-custom-popup-for-quot-map-series-quot/m-p/273359#M25201</link>
      <description>&lt;HTML&gt;&lt;HEAD&gt;&lt;/HEAD&gt;&lt;BODY&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt; font-family: arial, helvetica, sans-serif;"&gt;Hi,&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt; font-family: arial, helvetica, sans-serif;"&gt;I'm trying to figure out how to extend the map series template - &lt;A href="http://storymaps.arcgis.com/en/app-list/map-series/" title="http://storymaps.arcgis.com/en/app-list/map-series/"&gt;Story Map Series | Story Maps&lt;/A&gt; . 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. &lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-size: 10pt; font-family: arial, helvetica, sans-serif;"&gt;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 &lt;/SPAN&gt;&lt;SPAN style="font-family: arial, helvetica, sans-serif;"&gt;&lt;CODE style="font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6000003814697px; background: transparent;"&gt;&lt;SPAN style="font-family: arial, helvetica, sans-serif;"&gt;"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:&lt;/SPAN&gt;&lt;/CODE&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="font-family: arial, helvetica, sans-serif;"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;//create infowindow&lt;/EM&gt;&lt;/SPAN&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var infoWindow = new InfoWindow(null, domConstruct.create("div"));&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; infoWindow.startup();&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; //set infowindow for map to use&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; app.map.infoWindow = infoWindow;&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; app.map.infoWindow.resize(275, 275);&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; //create basic template for testing. Will add charts and content once its working.&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var template = new esri.InfoTemplate();&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; template.setTitle("Test");&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; template.setContent(getWindowContent);&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; //add feature layer to map with infoTemplate.... &lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var layer = new FeatureLayer("my feature layer url", {&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; mode: FeatureLayer.MODE_ONDEMAND,&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; infoTemplate: template,&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; outFields: ["*"]&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; });&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; var symbol = new SimpleFillSymbol();&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; layer.setRenderer(new SimpleRenderer(symbol));&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;SPAN style="color: #909090;"&gt;&lt;EM&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; app.map.addLayer(layer);&lt;/EM&gt;&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;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 &lt;SPAN style="color: #e23d39;"&gt;TypeError: Cannot read property 'toScreen' of undefined&lt;/SPAN&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Can someone point me in the right direction?&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;FYI, I'm using the following sample as a guide to creating the infoWindow - &lt;A href="https://developers.arcgis.com/javascript/jssamples/widget_infowindowchart.html" title="https://developers.arcgis.com/javascript/jssamples/widget_infowindowchart.html"&gt;Info window with chart | ArcGIS API for JavaScript&lt;/A&gt; &lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;Thanks.&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;P&gt;&lt;/P&gt;&lt;/BODY&gt;&lt;/HTML&gt;</description>
      <pubDate>Tue, 21 Jul 2015 01:06:36 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/implement-custom-popup-for-quot-map-series-quot/m-p/273359#M25201</guid>
      <dc:creator>ZorbaConlen</dc:creator>
      <dc:date>2015-07-21T01:06:36Z</dc:date>
    </item>
  </channel>
</rss>

