Simple question about setting InfoWindow content

[ConsumerWatchdog]

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.

------------------------------------------------------------------------------------------------

define(["dojo/topic"], function(topic) {
	/*
	* Custom Javascript to be executed while the application is initializing goes here
	*/

	// The application is ready
	topic.subscribe("tpl-ready", function(){
	/*
	 * Custom Javascript to be executed when the application is ready goes here
	 */
	});

	var WEBMAP_ID = "f59c379abdc84cf4a6f3e916c8ccb330",
		LAYER_ID = "Advocates_1_JSONtest_6741";

	var clickHandlerIsSetup = false;

	topic.subscribe("story-loaded-map", function(result){
		if ( result.id == WEBMAP_ID && ! clickHandlerIsSetup ) {
			var map = app.maps[result.id].response.map,
				layer = map.getLayer(LAYER_ID);

			if ( layer ) {
				layer.on("mouse-over", function(e){
					map.setMapCursor("pointer");
					map.infoWindow.setTitle("<div style='font-weight:bold;font-size:14px'>"+e.graphic.attributes.Name+"</div>"
						);
					map.infoWindow.setContent(
						"<div>"+e.graphic.attributes.Location+"</div>"
						);
					map.infoWindow.show(e.graphic.geometry);
					map.infoWindow.resize(300,200);
				});
        
        //On mouseout, revert to default cursor and hide tooltip
				layer.on("mouse-out", function(e){
					map.setMapCursor("default");
					map.infoWindow.hide();
				});
				
		//On click, scroll to corresponding MJ section
				layer.on("click", function(e){
					var index = e.graphic.attributes["MJ_Index"];
					topic.publish("story-navigate-section", index);
				});
			}
		}
	});
}); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

By "mapjournal" do you mean Story Map? What specific app are you editing?

[ConsumerWatchdog]

Hi Robert,

It's a classic story map (the map journal style). For reference, I used this tutorial to get where I am at this point:

https://medium.com/story-maps-developers-corner/navigate-map-journal-sections-using-the-mainstage-ma... 

Thank you!

Julia

[ConsumerWatchdog]

And all the content I want the infowindow or popup to draw from is contained in the layer that I reference near the top of the code: LAYER_ID = "Advocates_1_JSONtest_6741"

[RobertScheitlin__GISP · Accepted solution]

Julia,

  I will answer your third question as it seems that is the main goal.

  topic.subscribe("story-loaded-map", function (result) {
    if (result.id == WEBMAP_ID && !clickHandlerIsSetup) {
      var map = app.maps[result.id].response.map,
        layer = map.getLayer(LAYER_ID);

      if (layer) {
        layer.on("mouse-over", function (e) {
          map.setMapCursor("pointer");
          //Open the webmaps configured popup for this feature
          map.infoWindow.setFeatures([e.graphic]);
          map.infoWindow.show(e.graphic.geometry);
          map.infoWindow.resize(300, 200);
        });

        //On click, scroll to corresponding MJ section
        layer.on("click", function (e) {
          var index = e.graphic.attributes["MJ_Index"];
          topic.publish("story-navigate-section", index);
        });
      }
    }
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ConsumerWatchdog]

That worked beautifully! And until I learn more about development, this will make it much more straightforward for me to update the configuration.

Thank you so much. You've answered questions for most of the discussion posts I've looked up. You're a hero.

Julia