Story Map Customization

MayurDodiya · ‎04-10-2018

Hi,

I created story map using Portal templates Map Journal. I downloaded the Story map template from github and deployed on my own web server.

I start customize story maps, I am adding basemap button (by clicking on button open basemap gallery widget) and Search widget in my story map, and its working fine. I have video embedded in my features and when user click on features on map, it will show popup window with video player (YouTube embedded code and my own video from my server) in popup. Now, when I switch to full screen mode of the video, Basemap button and Search widget shows on top of the video full screen, any custom button/widgets I add it shows on top of the full screen window of video, look at the screenshots below.

I am adding custom widgets UI code here in index.html page and script code in custom-scripts.js

custom widget start from here

<div id="search"></div> Search widgets here
<div class="absIcon" title="Basemap Gallery"> basemap gallery button here
<img src="resources/lib/colorbox/images/basemap.png" width="20" height="20" style="margin-top: 10px;">
</div>
custom widget end here
</div>

...................

</div>

I switched to full screen mode video then widgets are displayed on top of the window

I exit full screen mode video and widgets and its on top of map, working fine.

Any ideas please, What I am doing wrong and where should I put UI code in index.html page or any changes I have to do in .js file?

Thank you!