AnsweredAssumed Answered

Simple question about setting InfoWindow content

Question asked by ConsumerWatchdog on Feb 25, 2020
Latest reply on Feb 25, 2020 by 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);
                    });
               }
          }
     });
});

Outcomes