nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Javascript api, info bubbles for stacked graphics

alexlambson

Hey guys.

Basically, what I need to do is have the left/right arrows of an infobubble cycle between two graphics that are at the same coordinates. I tried putting them on seperate graphic layers, but it did not give me the arrow.

Logic

See if two markers have the same coordinates -> link their info bubbles if they do.

Here is how I am separating the layers.

point = new esri.geometry.Point(item.lon, item.lat);  coordinateCheck = item.lat;  graphic = new esri.Graphic(point, symbol);  graphic.setAttributes({'title': checkbox, 'desc': content});  if (usedCoordinates.indexOf(coordinateCheck) > -1){     graphicsLayer2.add(graphic);     console.log('added to layer 2'); } else {     graphicsLayer.add(graphic);     usedCoordinates.push(coordinateCheck);     console.log('added to layer 1 ' + usedCoordinates); }

Will this method work? How do I get the stacked markers to link info bubbles.

Find more posts tagged with

Accepted answers

RRubalcava

I'm almost out the door, so can't test at the moment, but if you remove the template you set in the constructors for your GraphicsLayers and use the map.infoWindow methods to manually populate the infoWindow, I think you'll get the desired behavior. The infoWindow templates on the graphicslayer would override the manual method and since they are not linked they won't do the toggle via next feature you are looking for. It will probably just the Popup for the topmost feature of the overlapping layers.

Depending on how much control you need over when the popup is shown and you really need to keep them in separate layers you could adjust the workflow slightly.

No template for GraphicsLayers
Listen for click event of map
Get graphics from multiple graphicslayers that intersect click point
Dynamically generate the content and add templates to graphics
Use map.infoWindow methods to add features to Popup
Display Popup

Unless the graphics are on the same layer, I don't think you could automate it much easier.

Here is a sample that uses the map.infoWindow.setFeatures method similar to how I was trying to describe it

Feature layer with popup | ArcGIS API for JavaScript‌

All comments

alexlambson

//map is pulled from a webmap id

var graphicsLayer = new esri.layers.GraphicsLayer({
              infoTemplate: template,
              outFields: ["*"]
          });
          var graphicsLayer2 = new esri.layers.GraphicsLayer({
              infoTemplate: template,
              outFields: ["*"]
          }); //create an artboard for our beautiful markers to rest on 
          map.addLayers([graphicsLayer, graphicsLayer2]);

function getIdResults(ids, sortOrder, sortby) {
        map.resize(true);
        map.hideZoomSlider();
        var resData = {'T_IDTrans':ids, 'sortbyfield':sortby, 'sortbylist':sortOrder};
        //reset the map position for seacrh
        //this is done because the window resizes and causes the map to be left of stg.
        var origin = esri.geometry.Point(-113.5581, 37.0953);
        map.centerAndZoom(origin, 12);
        
        graphicsLayer2.clear() //clean up
        graphicsLayer.clear();//give us a clean map
        usedCoordinates = []; //initialize and/or clear the coordinates used

        
        $.ajax({

            //Grab all the json data. Removed this because it is a lot of code
                        var point;  
                        var symbol = new PictureMarkerSymbol(
                        {
                           //symbol info
                        });
                        
                        var graphic; //initialize graphic variable. This is what will be added to the graphic layer
                        
                        var checkbox = //corresponds to a toolbar check box
                         '<input id="p_check_m_' 
                         + item.mls
                         + //more gibberish to make the checkbox

                        var content = '<div><b>' //the body of the info window
                        + item.SaleLease 
                        + '</b></div><div>Listing: ' 
                        + item.T_ListBrokerage 
                        + ' / ' 
                        + item.T_ListAgent 
                        + buying 
                        + '</div>'
                        + '<div>List Date:' + item.T_ListDate + '</div>'
                        + '<div>List Price:' + item.price + '</div>'
                        + '<div>' + addCommas(area) + '</div>';
                        
                        point = new esri.geometry.Point(item.lon, item.lat); //point for graphic
                        
                        coordinateCheck = item.lat; 
                         //I just use latitude since I do not know how to check an array of arrays
                        
                        graphic = new esri.Graphic(point, symbol); //create the graphic
                        
                        graphic.setAttributes({'title': checkbox, 'desc': content}); //set its attributes
                        
                        if (usedCoordinates.indexOf(coordinateCheck) > -1){ 
                              //check to see if item.lat has already been used
                            graphicsLayer2.add(graphic);
                            console.log('added to layer 2');
                        } else {
                            graphicsLayer.add(graphic);
                            usedCoordinates.push(coordinateCheck);
                            console.log('added to layer 1 ' + usedCoordinates);
                        }
                    });    
                    /*dojo.forEach(graphicsLayer.graphics, function(relate){
                        var u;
                    });*/
                    updateContainer();

RRubalcava

If you use the map.infoWindow.setFeatures([n1,n2,...]) that should cycle the graphics in the popup. Can you post the code you're using to display the popups?

alexlambson

I have the graphics displaying their popups, but I cannot get graphics to cycle between each other.

I should probably mention that all of the markers are generated client-side from JSON data from our database.

RRubalcava

You can add the features to the maps infoWindow which is an instance of the Popup

popup-amd | API Reference | ArcGIS API for JavaScript‌

So you could take your graphics and do something like

map.infoWindow.setFeatures([graphic1, graphic2]); // pass it an array of your graphics
map.infoWindow.show(e.mapPoint); // assuming this occurs after a maps click event

Be sure to use map.infoWindow.clearFeatures() every time you need to reset it.

Here is a section from docs on working with Popups

Info windows and graphics | Guide | ArcGIS API for JavaScript‌

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.