Can You Hook Into Map Series StoryMap Webmap Change Event?

pmckinney

I am working on developing a JavaScript solution to add the alt attribute to images in map popups. Using the events listed in this repo's readme, I cannot get consistent results when changing between webmaps. I have tried the code in different topic.subscribe sections within the custom-scripts.js file.

Is there an event that fires when the webmaps change? I'll provide my sample code below. Any help is greatly appreciated:

<SPAN class="keyword token">let</SPAN> webmap <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN>

webmap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

        <SPAN class="comment token">// only execute code if a popup is displayed on click</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>webmap<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN>isShowing<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            
            <SPAN class="comment token">// img elements within the feature popup</SPAN>
            <SPAN class="keyword token">let</SPAN> popupImage <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'div.image > img'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">typeof</SPAN> popupImage <SPAN class="operator token">!==</SPAN> <SPAN class="string token">'undefined'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>  
               <SPAN class="comment token">// popup title - bridge name</SPAN>
               <SPAN class="keyword token">let</SPAN> bridgeNameElement <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'div.esriViewPopup > div.mainSection > div.header'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML<SPAN class="punctuation token">;</SPAN>
            
                <SPAN class="comment token">// add alt attribute using bridge's name</SPAN>
               popupImage<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'alt'</SPAN><SPAN class="punctuation token">,</SPAN> bridgeNameElement<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="comment token">// || 'some string'</SPAN>
           <SPAN class="punctuation token">}</SPAN>          
        
       <SPAN class="punctuation token">}</SPAN>

<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>    <SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>