I would so appreciate some guidance about a coding language I know little about!
I work mostly on the analysis side of things but have been tasked with customizing a mapjournal that my organization is hosting ourselves. That means I'm working in a javascript/html environment that am trying to learn on the fly.
I found very clear documentation on how to add code to the custom-scripts file in my compiled mapjournal materials. The code I added was to enable infowindows to popup on hover/mouse-over and to enable map elements to navigate through the side panel.
That is working just as expected when I test the map. I would so appreciate some help understanding how to set the content for my infowindow. I've already looked at most of the documentation but haven't been successful trying to add html or placeholders for my content. Because I'm only getting snippets of information and, since I'm completely new to javascript and html, I need pretty robust instructions. There also seem to be so many different creative ways to do this.
So here are my overall questions:
1. How do I set the content for my infowindow so it shows all the field elements I would like it to (as shown in the photo below)
2. Should I be using popups in the code rather than infowindows? I want to display a photo {Photo} that pulls from a field with html that references a photo online. I've read that maybe popups are more appropriate for this?
3. If I already configured popups in the webmap I'm using, is there a way to just call directly on those to popup with a hover?
I am including the code that I already have as well as the fields/styling that I am hoping to achieve in the infowindow/popup.
Thank you thank you! I assume this is super simple, I just don't have the foundation to get it working yet.
------------------------------------------------------------------------------------------------
<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"dojo/topic"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>topic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">/*
* Custom Javascript to be executed while the application is initializing goes here
*/</SPAN>
<SPAN class="comment token">// The application is ready</SPAN>
topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">subscribe</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"tpl-ready"</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">/*
* Custom Javascript to be executed when the application is ready goes here
*/</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> WEBMAP_ID <SPAN class="operator token">=</SPAN> <SPAN class="string token">"f59c379abdc84cf4a6f3e916c8ccb330"</SPAN><SPAN class="punctuation token">,</SPAN>
LAYER_ID <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Advocates_1_JSONtest_6741"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> clickHandlerIsSetup <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">subscribe</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"story-loaded-map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> result<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">==</SPAN> WEBMAP_ID <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN> clickHandlerIsSetup <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> app<SPAN class="punctuation token">.</SPAN>maps<SPAN class="punctuation token">[</SPAN>result<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>response<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">,</SPAN>
layer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>LAYER_ID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> layer <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouse-over"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMapCursor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"pointer"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTitle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<div style='font-weight:bold;font-size:14px'>"</SPAN><SPAN class="operator token">+</SPAN>e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Name<SPAN class="operator token">+</SPAN><SPAN class="string token">"</div>"</SPAN>
<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>
<SPAN class="string token">"<div>"</SPAN><SPAN class="operator token">+</SPAN>e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>Location<SPAN class="operator token">+</SPAN><SPAN class="string token">"</div>"</SPAN>
<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">300</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">200</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="comment token">//On mouseout, revert to default cursor and hide tooltip</SPAN>
layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouse-out"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMapCursor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"default"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</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="punctuation token">;</SPAN>
<SPAN class="comment token">//On click, scroll to corresponding MJ section</SPAN>
layer<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>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> index <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"MJ_Index"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
topic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">publish</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"story-navigate-section"</SPAN><SPAN class="punctuation token">,</SPAN> index<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="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="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></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><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
