topic Re: Simple question about setting InfoWindow content in ArcGIS JavaScript Maps SDK Questions

Simple question about setting InfoWindow content

ConsumerWatchdog — Sat, 11 Dec 2021 07:45:29 GMT

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);
				});
			}
		}
	});
}); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Simple question about setting InfoWindow content

RobertScheitlin__GISP — Tue, 25 Feb 2020 19:38:41 GMT

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

Re: Simple question about setting InfoWindow content

ConsumerWatchdog — Tue, 25 Feb 2020 19:41:12 GMT

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-map-ab827a105d0c

Thank you!

Julia

Re: Simple question about setting InfoWindow content

ConsumerWatchdog — Tue, 25 Feb 2020 19:45:16 GMT

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"

Re: Simple question about setting InfoWindow content

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:45:32 GMT

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);
        });
      }
    }
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Simple question about setting InfoWindow content

ConsumerWatchdog — Tue, 25 Feb 2020 21:36:54 GMT

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